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

[Bex]

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">

<html xmlns="http://www.w3.org/1999/xhtml">
<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

[Dobromir]

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

[Steve]

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