none
Posicion de scroll despues del postback en div dependiendo del multiview dentro de un update panel. RRS feed

  • Pregunta

  • Hola, quisiera mantener la posición del scroll en el div que contiene a un multiview con muchas views. Cada que hago click para cambiar de view o en cualquier boton que haga un postback me cambia la posicion del scroll del div que contiene al multiview. Cabe mencionar que todo esto se encuentra dentro de un ModalPopUpExtender con un UpdatePanel.

    Mi PopUp

    A continuacion mi codigo:

    <cc1:ModalPopupExtender ID="MPE" runat="server" 
            DropShadow="false" 
            PopupControlID="PanelPopUp" 
            TargetControlID="lnkFake" 
            BackgroundCssClass="modalBackground">
        </cc1:ModalPopupExtender>
        <asp:LinkButton ID="lnkFake" runat="server"></asp:LinkButton>
        <div id="otraarea">
            <asp:Panel ID="PanelPopUp" runat="server">
                <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                    <ContentTemplate>
                        <div id="popup" style="width: 750px">
                            <div id="contenido">
                                <div style="height: 170px">
                                   <%-- ... mas controles ... --%>
                                </div>
                                <div style="height: 220px;">
                                    <div id="barraBotones" runat="server" style="width: 100%; top: -40px">
                                        <asp:Button ID="btnIZQ" CommandName="izq" runat="server" Text="IZQ" CssClass="btn btn-sm btn-primary" Width="10.5%" OnClick="barraBotones_Click" />
                                        <asp:Button ID="btnTRA" CommandName="tra" runat="server" Text="TRA" CssClass="btn btn-sm btn-primary" Width="10.5%" OnClick="barraBotones_Click" />
                                        <%-- ... mas botones --%>
                                        <%-- ... mas botones --%>
                                    </div>
                                    <div id="dvScroll" runat="server" style="; width: 100%; height: 200px; top: 5px; overflow-y: hidden; overflow-x: hidden;">
                                        <asp:MultiView ID="MultiView1" ActiveViewIndex="0" runat="server">
                                            <asp:View ID="View1" runat="server">
                                                    <asp:GridView ID="GV_IZQ" runat="server" AutoGenerateColumns="false" CellSpacing="2" CellPadding="2" BorderColor="Transparent" BorderStyle="Solid" BorderWidth="1px" ForeColor="Black" GridLines="Vertical" ShowFooter="true" Width="100%" OnRowDataBound="GV_Revisiones_OnRowDataBound">
                                                        <Columns>
                                                            <asp:BoundField HeaderText="" DataField="IdEVerificacion" ItemStyle-Width="30px" ItemStyle-ForeColor="#dbe0eb" />
                                                            <asp:BoundField HeaderText="Estado físico" DataField="DescEVerificacion" ItemStyle-Width="300px" />
                                                            <asp:TemplateField HeaderText="Bien">
                                                                <ItemTemplate>
                                                                    <asp:RadioButton ID="rdoBien" runat="server" CssClass="radioNecio" GroupName="grupoPartes" Checked='<%# Eval("bien") %>' OnCheckedChanged="habilitaDanio" AutoPostBack="true" />
                                                                </ItemTemplate>
                                                            </asp:TemplateField>
                                                            <asp:TemplateField HeaderText="Daño">
                                                                <ItemTemplate>
                                                                    <asp:RadioButton ID="rdoDanio" runat="server" CssClass="radioNecio" GroupName="grupoPartes" Checked='<%# Eval("danio") %>' OnCheckedChanged="habilitaDanio" AutoPostBack="true" />
                                                                </ItemTemplate>
                                                            </asp:TemplateField>
                                                            <asp:TemplateField HeaderText="Discrepancia">
                                                                <ItemTemplate>
                                                                    <asp:TextBox ID="txtDiscrepancia" runat="server" Width="40px" Height="25px" MaxLength="2" Text='<%# Eval("discrepancia") %>'></asp:TextBox>
                                                                </ItemTemplate>
                                                            </asp:TemplateField>
                                                            <asp:TemplateField HeaderText="Severidad">
                                                                <ItemTemplate>
                                                                    <asp:TextBox ID="txtSeveridad" runat="server" Width="40px" Height="25px" MaxLength="2" Text='<%# Eval("severidad") %>'></asp:TextBox>
                                                                </ItemTemplate>
                                                            </asp:TemplateField>
                                                        </Columns>
                                                    </asp:GridView>
                                            </asp:View>
                                            <%--... otras views ...--%>
                                            <%--... otras views ...--%>
                                            <%--... otras views ...--%>
                                        </asp:MultiView>
                                    </div>
                                </div>
                            </div>
                            <div id="botones">
                                <asp:Button ID="BtnGuardar" runat="server" Text="Guardar" OnClick="BtnGuardar_Click" />
                                <asp:Button ID="BtnCerrar" runat="server" Text="Cerrar" OnClick="BtnCerrar_Click" OnClientClick="$find('mpeHx').Hide(); return false;" />
                            </div>
                        </div>
                    </ContentTemplate>
                </asp:UpdatePanel>
    
    
            </asp:Panel>
    
        </div>
    

    He intentando con muchas cosas y no me queda: 

    Algunas de las cosas que he intentado son: (Este codigo JavaScript solo lo pongo como referencia de lo que he intentado)

    //Con esto porque esta en unpdate panel 
       <script type="text/javascript">
            var position = 0;
            $(document).ready(function () {
                $('#<%=dvScroll.ClientID %>').Scrollable({
                    ScrollHeight: 300,
                    IsInUpdatePanel: true
                });
            });
        </script>
    
    //Con botones ocultos
        <script type="text/javascript">
            window.onload = function () {
                var div = document.getElementById("dvScroll");
                var div_position = document.getElementById("div_position");
                var position = parseInt('<%=Request.Form["div_position"] %>');
                if (isNaN(position)) {
                    position = 0;
                }
                div.scrollTop = position;
                div.onscroll = function () {
                    div_position.value = div.scrollTop;
                };
            };
        </script>
    
    //Tratando de que ajustar el scroll de acuerdo a la vista
        $().ready(function() {
    
            //for storing scroll position of each view in respective hiddenfields
            $(window).scroll(function () {
              if ($("#hdnCurrentView").val() == "View1") {
                 $("#hdnMultiView1Top").val($(window).scrollTop());
              }
              else if ($("#hdnCurrentView").val() == "View2") {
                 $("#hdnMultiView2Top").val($(window).scrollTop());
              }
            });
    
            //for restoring scroll position on page load i.e., ready function in jQuery 
            if ($("#hdnCurrentView").val() == "View1") {
               $(window).scrollTop($("#hdnMultiView1Top").val());
            }
            else if ($("#hdnCurrentView").val() == "View2") {
               $(window).scrollTop($("#hdnMultiView2Top").val());
            }
    
        });

    Lo unico que necesito es mantener la posicion del scroll del div dvScroll. Alguna idea.

    Gracias. Saludos

    viernes, 17 de abril de 2015 17:37

Respuestas

  • Hola nasstreal.

    Intenta guardando la posición del scroll, creas un input tipo hidden  y ahí guardas el valor.

    <input type="hidden" id="divPosition" name="divPosition" />

    Cada que se ejecute un postback lees el valor del requestio, si es nulo lo pones en cero sino se lo asignas al div correspondiente.

    var div = document.getElementById("dvScroll"); var divPosition = document.getElementById("divPosition");

    var position = parseInt('<%=Request.Form["divPosition"] %>'); if (isNaN(position)) { position = 0; } div.scrollTop = position; div.onscroll = function () { divPosition.value = div.scrollTop; };


    Recuerda que cuando usamos un updatepanel debemos usar Sys.WebForms.getInstance() para asegurarnos de que los script se ejecuten después de un postback del updatepanel

     <script type="text/javascript">
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(FuncionQueEjecuteElScript);
     </script>

    Espero que te sirva la solución.

    Saludos


    • Editado Norberto Rojas viernes, 17 de abril de 2015 18:26 error en texto
    • Marcado como respuesta nasstreal viernes, 24 de abril de 2015 0:17
    viernes, 17 de abril de 2015 18:25
  • Ya lo probé sin usar el ModalPopUp Extender, mejor usé un Modal de Bootstrap. Aqui si funciona sin problemas así como me comentas. Quien sabe porque no funciona con el MPE de AjaxToolkit.

    Gracias!

    • Marcado como respuesta nasstreal sábado, 18 de abril de 2015 16:47
    sábado, 18 de abril de 2015 16:47

Todas las respuestas

  • Hola nasstreal.

    Intenta guardando la posición del scroll, creas un input tipo hidden  y ahí guardas el valor.

    <input type="hidden" id="divPosition" name="divPosition" />

    Cada que se ejecute un postback lees el valor del requestio, si es nulo lo pones en cero sino se lo asignas al div correspondiente.

    var div = document.getElementById("dvScroll"); var divPosition = document.getElementById("divPosition");

    var position = parseInt('<%=Request.Form["divPosition"] %>'); if (isNaN(position)) { position = 0; } div.scrollTop = position; div.onscroll = function () { divPosition.value = div.scrollTop; };


    Recuerda que cuando usamos un updatepanel debemos usar Sys.WebForms.getInstance() para asegurarnos de que los script se ejecuten después de un postback del updatepanel

     <script type="text/javascript">
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(FuncionQueEjecuteElScript);
     </script>

    Espero que te sirva la solución.

    Saludos


    • Editado Norberto Rojas viernes, 17 de abril de 2015 18:26 error en texto
    • Marcado como respuesta nasstreal viernes, 24 de abril de 2015 0:17
    viernes, 17 de abril de 2015 18:25
  • Hola muchas gracias por tu respuesta, me despejaste algunas dudas, he puesto el input hidden como me indicaste y el script tambien. Pero ahora no me sale el modalPopUpExtender, solo se queda cargando el update progress y no sale nada. No se si puse bien el script.

    Es así???:

    <script type="text/javascript">
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(mantenerScroll);
            function mantenerScroll(sender, args) {
                var div = document.getElementById("dvScroll");
                var divPosition = document.getElementById("divPosition");
                var position = parseInt('<%=Request.Form["divPosition"] %>');
                if (isNaN(position)) {
                    position = 0;
                }
                div.scrollTop = position;
                div.onscroll = function () {
                    divPosition.value = div.scrollTop;
                };
            };
        </script>

    Si entra en la función pero en la linea en amarillo se cae :(

    Saludos



    • Editado nasstreal viernes, 17 de abril de 2015 23:49 Agregué una imagen
    viernes, 17 de abril de 2015 23:23
  • Ya lo probé sin usar el ModalPopUp Extender, mejor usé un Modal de Bootstrap. Aqui si funciona sin problemas así como me comentas. Quien sabe porque no funciona con el MPE de AjaxToolkit.

    Gracias!

    • Marcado como respuesta nasstreal sábado, 18 de abril de 2015 16:47
    sábado, 18 de abril de 2015 16:47