This is a migrated thread and some comments may be shown as answers.

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

2 Answers 326 Views
Window
This is a migrated thread and some comments may be shown as answers.
Bex
Top achievements
Rank 1
Bex asked on 13 Jul 2012, 08:32 AM
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 Answers, 1 is accepted

Sort by
0
Dobromir
Telerik team
answered on 16 Jul 2012, 11:15 AM
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.
0
Steve
Top achievements
Rank 1
answered on 16 Jul 2012, 11:43 AM
Thank you!
That works great! Just added a close bit of javascript to close the window and it works!
Tags
Window
Asked by
Bex
Top achievements
Rank 1
Answers by
Dobromir
Telerik team
Steve
Top achievements
Rank 1
Share this question
or