Die Position des Scrollbalkens geht nach einem Postback verloren

Question

Hallo,

ich habe eine Liste (Master) mit folgendem Code:

                <div style="overflow:auto; width:100%;height:inherit;height:455px;" >
                    <asp:GridView ID="LvListe" AutoGenerateColumns="False"
                        DataKeyNames="ID" DataSourceID="LvListSource" 
                        OnRowDataBound="LvListeGridView_RowDataBound"
                        ShowHeaderWhenEmpty="True" Width="100%" GridLines="None" ShowHeader="False"
                        CssClass="grid-view" EmptyDataText="[Es sind keine Einträge vorhanden.]"
                        runat="server" >
                        <SelectedRowStyle ForeColor="White" BackColor="Navy" />
                        <AlternatingRowStyle BackColor="#F8F8F8" Font-Underline="False"
                            ForeColor="Black" />
                        <Columns>
                            <asp:CommandField SelectText ="Select" ShowSelectButton="true"
                                ItemStyle-CssClass = "HideButton" HeaderStyle-CssClass ="HideButton" >                       
                                <HeaderStyle CssClass="HideButton"></HeaderStyle>
                                <ItemStyle CssClass="HideButton"></ItemStyle>
                            </asp:CommandField>
                            <asp:BoundField DataField="Name" HeaderText="Name" HeaderStyle-CssClass="fieldname"
                                SortExpression="Name" HeaderStyle-HorizontalAlign="Left" Visible="false" >
                                <HeaderStyle HorizontalAlign="Left" CssClass="fieldname"></HeaderStyle>
                            </asp:BoundField>
                            <asp:TemplateField SortExpression="Status" ShowHeader="false" >
                                <ItemTemplate>
                                    <asp:Image ID="Image1" runat="server" ImageUrl='<%# GetImageName(Eval("Status")) %>' ToolTip='<%# Eval("Bezeichnung") %>' />
                                </ItemTemplate>
                                <ItemStyle VerticalAlign="Top" />
                                <HeaderStyle CssClass="fieldname" HorizontalAlign="Left" VerticalAlign="Top"  Width="20px" />
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="Bezeichnung" SortExpression="Titel">
                                <ItemTemplate>
                                    <asp:Label ID="Label2" runat="server" Text='<%# Bind("Name") %>' Font-Italic="true"></asp:Label><br />
                                    <asp:Label ID="Label1" runat="server" Text='<%# Server.HtmlEncode(Eval("Titel")) %>' CssClass="titel"></asp:Label>
                                    <div style="height:5px;"></div>
                                </ItemTemplate>
                                <HeaderStyle CssClass="fieldname" HorizontalAlign="Left" />
                            </asp:TemplateField>
                        </Columns>
                    </asp:GridView>
                </div>

Es gibt zwei weitere Listen (Detail), die Details zu einem in obiger Liste ausgewählten Eintrag zeigen.

Wird ein Eintrag der Liste vom Nutzer ausgewählt, so werden die Detailtabellen aktualisiert -  es findet ein Postback statt. Hat die Liste mehr Einträge als auf der vorgesehenen Fläche darstellbar, so entstehen Rollbalken. Allerdings geht die aktuelle Position des Rollbalken nach dem Postback verloren - trotz der Pagedirektive MaintainScrollPositionOnPostback="true".

Woran kann das liegen?

MfG

 

 

Answer 1

Die Pagedirektive gilt nur für die Page nicht für den div container - Du musst eine javascript einbauen welches über start und end request di entsprechenden positionen wiederherstellt.

Answer 2

Hier mien Lösungsansatz:

1. Die Javascript-Funktionen:

<script language = "javascript" type="text/javascript">
    function saveScrollPosition() {
        try {
            document.getElementById("MainContent_FormContent_ScrollPos").value = document.getElementById("MainContent_FormContent_Liste_div").scrollTop;
        }
        catch (e) {
            alert( "Fehler beim Ermitteln der Scrollposition: " + e.ToString );
        }
    }

    function restoreScrollPosition() {
        try {
            document.getElementById("MainContent_FormContent_Liste_div").scrollTop = document.getElementById("MainContent_FormContent_Scrollpos").value;
        }
        catch (e) {
            alert( "Fehler beim Wiederherstellen der Scrollposition: " + e.ToString );
        }
    }

    window.onload = restoreScrollPosition;

</script>

2. Der ASP-Code (Ausschnitt):

                <asp:HiddenField ID="ScrollPos" value="0" runat="server" />
                <div onscroll="saveScrollPosition();" id="Liste_div" style="overflow:auto; width:100%;height:inherit;height:455px;" >
                    <asp:GridView ID="Liste" AutoGenerateColumns="False"
                      ....
                </div>

Bemerkungen:

1.
Es wird nur der vertikale Scrollbalken wiederhergestellt. Ansosnten muß man halt noch ScrollLeft mit berücksichtigen.

2.
Der Prefix "MainContent_FormContent_" muß an die konkreten Verhältnsse angepaßt werden.

Kritiken?