Cannot stop window scrolling to top when postback occurs in modal window

3 posts, 0 answers
  1. Bex
    Bex avatar
    53 posts
    Member since:
    Jul 2011

    Posted 13 Jul 2012 Link to this post

    Hi

    I have a very large rad grid and when a user clicks edit on the grid I make a radwindow pop up from the code behind (the reason I do it from the code behind is because I need to do some serverside stuff to populate the radwindow).
    This works fine, but when a button is clicked in the radwindow the page posts back, the window closes and the pages scrolls back to the top. I don't mind the window closing, but I need it to stay at the same scroll position.
    I have tried to add the javascript on this page: http://www.telerik.com/support/kb/aspnet-ajax/window/persist-radwindow-s-scroll-position.aspx but it doesn't work.
    I have wrapped the whole page in an ajax panel and I have just tried added an ajax panel in the rad window, none of which work.

    The radgrid and radwindow are in a user control.
    I'm not sure what else to try?
    Can anyone help?

    I have isolated this into a very basic page and here is my code:

    Webusercontrol1:
    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControl1.ascx.cs"
        Inherits="TestRadWindow.WebUserControl1" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <telerik:RadScriptManager runat="server">
    </telerik:RadScriptManager>
    <script type="text/javascript">
        var body = document.body;
        var docElem = document.documentElement;
        var bodyScrollTop = 0;
        var bodyScrollLeft = 0;
        var docElemScrollTop = 0;
        var docElemScrollLeft = 0;
        function OnClientBeforeClose(sender, args) {
            bodyScrollTop = body.scrollTop;
            bodyScrollLeft = body.scrollLeft;
            docElemScrollTop = docElem.scrollTop;
            docElemScrollLeft = docElem.scrollLeft;
        }
        function OnClientClose() {
            setTimeout(function () {
                body.scrollTop = bodyScrollTop;
                body.scrollLeft = bodyScrollLeft;
                docElem.scrollTop = docElemScrollTop;
                docElem.scrollLeft = docElemScrollLeft;
            }, 30);
        }
        function OpenWnd() {
            $find("wnd").show();
        }
    </script>
    <telerik:RadAjaxPanel runat="server">
        <telerik:RadWindowManager runat="Server" ID="RadWindowManager1" EnableViewState="false">
            <Windows>
                <telerik:RadWindow runat="server" ID="winEdit" Width="300px" Height="450px" ReloadOnShow="true"
                    ShowContentDuringLoad="false" Modal="True" Behaviors="Close, Move" VisibleTitlebar="true"
                    VisibleStatusbar="false" AutoSize="True" KeepInScreenBounds="True" OnClientBeforeClose="OnClientBeforeClose"
                    OnClientClose="OnClientClose">
                    <ContentTemplate>
                        <asp:Button runat="server" ID="btnSave" Text="button" />
                    </ContentTemplate>
                </telerik:RadWindow>
            </Windows>
        </telerik:RadWindowManager>
        <telerik:RadGrid runat="server" ID="grdTest" AutoGenerateColumns="False" EnableLinqExpressions="False"
            OnNeedDataSource="grdTest_NeedDataSource" Width="200px" CellSpacing="0" GridLines="None">
            <MasterTableView>
                <Columns>
                    <telerik:GridBoundColumn runat="server" DataField="Id" />
                    <telerik:GridTemplateColumn>
                        <ItemTemplate>
                            <asp:LinkButton runat="server" ID="lnkEdit" OnClick="lnkEdit_Click" Text="Edit" />
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                </Columns>
            </MasterTableView>
        </telerik:RadGrid></telerik:RadAjaxPanel>

    My user control code behind:
    protected void Page_Load(object sender, EventArgs e)
           {
     
           }
     
           protected void grdTest_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
           {
               List<TestBind> binding = new List<TestBind>();
              for(int i=0;i<=500; i++)
              {
                  TestBind t = new TestBind();
                  t.Id = i;
                  binding.Add(t);
              }
     
               grdTest.DataSource = binding;
           }
     
           protected void lnkEdit_Click(object sender, EventArgs e)
           {
               string script = "function f(){var win=$find(\"" + winEdit.ClientID + "\"); " +
                             " win.show(); Sys.Application.remove_load(f);}Sys.Application.add_load(f);";
               winEdit.VisibleOnPageLoad = true;
               ScriptManager.RegisterStartupScript(Page, Page.GetType(), "key", script, true);
           }
     
           class TestBind
           {
               public int Id { get; set; }
           }
       }

    My webform:
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="TestRadWindow.WebForm1" %>
     
    <%@ Register src="WebUserControl1.ascx" tagname="WebUserControl1" tagprefix="uc1" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
         
            <uc1:WebUserControl1 ID="WebUserControl11" runat="server" />
         
        </div>
        </form>
    </body>
    </html>


    Any help  would be appreciated as I have spent hours on this now.

    Bex
  2. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 16 Jul 2012 Link to this post

    Hi Bex,

    I have already answered your support ticket on the subject. For convenience I will paste my answer here as well.

    The postback that is triggered by the button placed inside RadWindow is due to the fact that RadWindow is a floating element on the page and is direct child of the <form>, thus it is not child of the RadAjaxPanel and it is not a trigger for AsyncPostBack.

    For the described scenario I would suggest you to use RadAjaxManager and add settings for the button to update the grid and the windowmanager and the grid to update itself, e.g.:

    <telerik:RadAjaxManager ID="RadAjaxMaanger1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="btnSave">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="grdTest" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="grdTest">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="grdTest" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    By default, RadAjaxManager preserve the page scroll position and you will not need the extra JavaScript. For your convenience I have attached a sample page demonstrating the usage of RadAjaxManager.


    All the best,
    Dobromir
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. Steve
    Steve avatar
    3 posts
    Member since:
    Feb 2007

    Posted 16 Jul 2012 Link to this post

    Thank you!
    That works great! Just added a close bit of javascript to close the window and it works!
Back to Top