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

RadWindow opening and scrolling back to the top of the page

17 Answers 1160 Views

Window

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

Charlie asked on 03 May 2011, 02:58 PM

Hello,

I have several grids on a page. This page is wrapped with an iframe with a height of 593px. All of the content renders beyond the height of the iframe, giving me a scroll-bar to see all of the data. When I edit a line item in the grid that's at the very bottom of the frame and it shows the RadWindow, it immediately scrolls back to the very top of the frame and I have to scroll down just to see my window again.

My question is: is there some kind of setting I can apply when that window opens so that it doesn't move back to the top of the frame? My ASP.NET AJAX version is 2009.3.1314.35.

Thanks in advance!

*EDIT* Just for better reference, I am using a RadWindowManager to manage multiple windows. There are a total of 3 grids on the page, all of which extend beyond the 593px height of the iframe. I have looked into using InitialBehaviors="Pin" for each RadWindow, which is fine because the window stays pinned, but upon opening the RadWindow, the iframe still resets itself to be scrolled to the very top.

*EDIT 2* I am using Firefox 3.6.16. I cannot recreate this issue in IE8

17 Answers, 1 is accepted

answered on 06 May 2011, 02:01 PM

Hello Charlie,

Here is sample code I prepared and tested according to the provided details:

<%@ Page Language="C#" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>Untitled Page</title>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<telerik:RadWindow ID="win" runat="server" Modal="true">

</telerik:RadWindow>

<script type="text/javascript">

function OpenWin() {

$find("win").show();

}

</script>

<div style="width: 500px; height: 2000px;">

</div>

<asp:Button ID="btn" runat="server" OnClientClick="OpenWin(); return false;" Text="Open RadWindow" />

</form>

</body>

</html>

To test, I scroll down to the button and open the modal RadWindow but the page does not scroll to the top.

Would you please let me know if I am missing something here? If so, please modify the code and send it back and I will do my best to help. Include, also more detailed information about RadControls and browser versions.

Best wishes,
Svetlina
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

answered on 06 May 2011, 03:57 PM

Hello Svetlina,

Here, I will attach some code that shows you kind of what's going on.

protected void grdLabor_ItemCreated(object sender, GridItemEventArgs e)

{

if (e.Item is GridDataItem)

{

HyperLink editLink = e.Item.FindControl("EditLink") as HyperLink;

editLink.Attributes["href"] = "#";

editLink.Attributes["onclick"] = string.Format("return ShowEditCostForm('{0}','{1}','{2}');", e.Item.OwnerTableView.DataKeyValues[e.Item.ItemIndex]["fwor_pk"], "Labor", _currentPK);

}

The above code block is simply setting the Edit link attribute to call the ShowEditCostForm() javascript function, shown below:

function ShowEditCostForm(linepk, costtype, wopk) {

window.radopen('WorkorderPostCost.aspx?windowID=<%=Request.QueryString["windowID"] %>&linePK=' + linepk + '&costtype=' + costtype + '&pk=' + wopk + '&Posting=false', 'WorkorderPostCostDialog');

return false;

}

My RadWindowManager looks as follows for this particular window:

<telerik:RadWindowManager ID="PageAjaxWindowManager" runat="server">

<Windows>

<telerik:RadWindow ID="WorkorderPostCostDialog" runat="server" Title="Work Order Post Cost" Height="450px"

Width="700px" Modal="true" Skin="Vista"></telerik:RadWindow>

</Windows>

</telerik:RadWindowManager>

The skin shown is a part of my Custom Skin DLL file.

And finally, my Grid:

<telerik:RadGrid ID="grdLabor" runat="server" BorderWidth="0px" AutoGenerateColumns="False" GridLines="None" AllowPaging ="True" AllowSorting ="True"

OnNeedDataSource="grdLabor_NeedDataSource" OnItemCreated="grdLabor_ItemCreated" OnDeleteCommand="grdLabor_DeleteCommand"

PagerStyle-Wrap="false" PageSize="13" PagerStyle-Mode="NextPrevAndNumeric"

AllowMultiRowEdit="True" EnableTheming="True" PagerStyle-AlwaysVisible="true" OnItemDataBound="grdLabor_ItemDataBound" >

<ClientSettings AllowExpandCollapse="True" AllowColumnsReorder="True" ColumnsReorderMethod="Reorder">

<Selecting AllowRowSelect="True" EnableDragToSelectRows="False" />

<Resizing AllowColumnResize="True" EnableRealTimeResize="True" ResizeGridOnColumnResize="True" />

<Scrolling AllowScroll="True" ScrollHeight="260px" UseStaticHeaders="True"/>

</ClientSettings>

<MasterTableView DataKeyNames="fwor_pk" Name="Labor" AllowAutomaticInserts="True" EditMode="InPlace" TableLayout="Fixed">

<Columns>

<telerik:GridTemplateColumn UniqueName="TemplateEditColumn">

<HeaderStyle Width="16px" />

<ItemTemplate>

<asp:HyperLink ID="EditLink" runat="server" ImageUrl ="../RadControls/Grid/Skins/Office2007/Edit.gif"></asp:HyperLink>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridButtonColumn Visible="false" Resizable="false" Reorderable="false" UniqueName="Delete" CommandName="Delete" ButtonType="ImageButton" ImageUrl="../RadControls/Grid/Skins/Office2007/Delete.gif">

<HeaderStyle Width="20px"/>

<ItemStyle Width="20px" HorizontalAlign="Center" />

</telerik:GridButtonColumn>

<telerik:GridBoundColumn DataField="wk_name" UniqueName="wk_name" HeaderText="Technician" ReadOnly="True">

<HeaderStyle Width="100px" VerticalAlign="Bottom" />

<ItemStyle Width="100px"/>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="fo_description" UniqueName="fo_description" HeaderText="Task Description" ReadOnly="True">

<HeaderStyle Width="150px" VerticalAlign="Bottom" />

<ItemStyle Width="150px"/>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="ftr_description" UniqueName="ftr_description" HeaderText="Trade" ReadOnly="True">

<HeaderStyle Width="90px" VerticalAlign="Bottom" />

<ItemStyle Width="90px"/>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="ti_code" UniqueName="ti_code" HeaderText="Time Type" ReadOnly="True">

<HeaderStyle Width="120px" VerticalAlign="Bottom" />

<ItemStyle Width="120px"/>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="fwor_transDate_local" UniqueName="fwor_transDate_local" HeaderText="Date" ReadOnly="True">

<HeaderStyle Width="100px" VerticalAlign="Bottom" />

<ItemStyle Width="100px"/>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="fwor_hours" UniqueName="fwor_hours" HeaderText="Hours" DataFormatString="{0:0.00}" ReadOnly="True">

<HeaderStyle Width="75px" VerticalAlign="Bottom" />

<ItemStyle Width="75px" HorizontalAlign="Left" />

<FooterStyle Width="75px" HorizontalAlign="Right" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="fwor_extendedCost" UniqueName="fwor_extendedCost" DataFormatString="{0:0.00}" HeaderText="Cost" ReadOnly="True">

<HeaderStyle Width="75px" VerticalAlign="Bottom" />

<ItemStyle Width="75px" HorizontalAlign="Left" />

<FooterStyle Width="75px" HorizontalAlign="Right" />

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn DataField="fwor_laborComments" HeaderText="Comment" UniqueName="fwor_laborComments">

<ItemStyle HorizontalAlign="Left" Width="200px" />

<HeaderStyle HorizontalAlign="Left" Width="200px" />

<ItemTemplate>

<asp:TextBox ID="txtComment" runat="server" width="190px" TextMode="MultiLine" Rows="2" Columns="100" Text='<%# Bind("fwor_laborComments") %>' ReadOnly =true ></asp:TextBox>

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

<RowIndicatorColumn>

<HeaderStyle Width="20px" />

</RowIndicatorColumn>

<ExpandCollapseColumn>

<HeaderStyle Width="20px" />

</ExpandCollapseColumn>

<CommandItemTemplate>

<asp:Image ID="AddLabor" runat="server" ImageUrl="~/RadControls/Grid/Skins/Office2007/AddRecord.gif" AlternateText="Add Labor" />

<a href="#" onclick="return ShowAddCostForm('Labor');"><asp:label ID="lblAddLabor" runat ="server" Text="Add Labor"></asp:label></a>

</CommandItemTemplate>

</MasterTableView>

<PagerStyle AlwaysVisible="True" Mode="NextPrevAndNumeric" Wrap="False" />

</telerik:RadGrid>

To me, it doesn't look like there is anything out of place. Like I had mentioned earlier, this problem doesn't exist in Internet Explorer.

I am running ASP.NET AJAX 2009.3.1314.35 and this particular problem is happening in Firefox 3.6.16 in 32-bit Windows Vista Business.

The window that contains this information is shown as an iframe with a height of 593 pixels and a CSS class of html {overflow:auto;} (so that scrolling can take place since all of the information doesn't show at once). I can't change the height of the iframe nor can I take out the iframe due to the way this project works.

Thanks for your help!

answered on 10 May 2011, 03:22 PM

Window-ScrollingInFirefox.zip

Hello Charlie,

Based on the provided information I was not able to reproduce this behavior. Here is a video from my experiment: http://screencast.com/t/JpG9Is5T0b. Am I missing something? Can you reproduce the issue with my page? Is your setup different? You can find my test page attached - I have tried to conform to your specifications, but I have had to remove most of the Grid columns since I do not have your database structure and other methods. Yet I have maintained the link and its onclick handler. I also enlarged the page size to enable a scrollbar, since 13 items in 250 pixels scrollHeight witout the images are not sufficient to produce it.

What I can suggest at this point is to check whether a postback occurs after you show the RadWindow so that the page reloads and scrolls to top or if the RadWindow is being maximized and then restored as this is the only case when some scrolling occurs: http://screencast.com/t/UsRNNNh1704.

Also upgrading to the latest version of the RadControls might help, as many fixes and improvements have been made since Q3 2009.

If this does not help please open a support ticket and send us a fully runnable project that displays this behavior along with detailed reproduction steps and we will do our best to help.

Regards,
Marin
the Telerik team

answered on 13 May 2011, 05:14 PM

Hello Charlie,

I see the issue in the screencast you linked, but without having your actual project that displays this behavior there is very little we can do.

It is possible that some combination of settings in your project is causing this behavior, though. I would suggest that you try migrating it (basically copy-paste) into my test page in a newly created project. This will help you to either get rid of the issue, or define its origin by the method of exclusion. You may also find the following blog post helpful on isolating the issue: http://blogs.telerik.com/supportdept/posts/10-09-29/isolating_a_problem_in_a_sample_project.aspx so that you can debug on a smaller scale.

I hope you will manage to get your project running smoothly :)

All the best,
Marin
the Telerik team

answered on 31 Jul 2012, 07:56 PM

I had the exact same problem and caused by the same thing, setting focus to a control in the modal window. The way I solved it was to force the iFrame back into view after setting focus. Unfortunately, I couldn't do it immediately (it just didn't work consistently) so I had to delay it a few milliseconds after setting focus. Here is the code that worked for me (I substituted your control name for mine):

                    string script = String.Format(@"
                    <script type='text/javascript'>
                      setTimeout(function()
                        {{
                            $get('{0}').select();
                            $get('{0}').focus();

                            // Unfortunately due to a bug setting focus to an element causes the
                            // iFrame to scroll out of view in some browsers, so we need to scroll
                            // it back into view.
                            setTimeout(function()
                                {{
                                    self.frameElement.scrollIntoView();
                                }}, 50);
                        }}, 100);
                    </script>
                    ", txtUserName.ClientID);

I then inserted this script into the page immediately after the control that I was setting focus to:

leftPanel.Controls.Add(new LiteralControl(script));

In my case I am building the panel and controls dynamically, so you may not have to build the script dynamically as I am here, but those were my requirements. I hope this helps you.

Scott Gartner
Silverback Learning Solutions

answered on 08 Oct 2012, 10:15 AM

Hi Bruce,

This is a problem that stems from the way the server Focus() method and the MS AJAX framework integrate in this case - the former is executed as soon as its injected script is parsed, but the MS AJAX framework (and thus controls based on it like the RadWIndow) are loaded later. More details on the matter are available in the following thread: http://www.telerik.com/community/forums/aspnet-ajax/window/firefox-scroll-issue.aspx. You can extend the logic there further - create a JavaScript function that will take the ClientID of the desired element as a paramter and set the focus with a timeout. Then in the code-behind you can call this function and pass the desired ClientID. How to call a script from the code-behind is explained in more details in this help article: http://www.telerik.com/help/aspnet-ajax/window-troubleshooting-javascript-from-server-side.html. So far, I have found th ScriptManager.RegisterStartupScript() method to be the most reliable.

Regards,
Marin Bratanov
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.

answered on 29 Jan 2013, 04:55 PM

I have made a few discoveries with RadWindows. If you are opening the RadWindow via a postback (i.e. using the VisibleOnPageLoad property of the RadWindow), then the page directive MaintainScrollPositionOnPostback="true" will keep the scroll position as expected.

However, if you do not post back to open the RadWindow and use a link to show the RadWindow via javascript code or function, such as

<a onclick="javascript: openMyWin();" href="#">My Link</a>

then the described behavior happens (the page scrolls to the top). But if you add "return false;" in the link itself (this will not work by placing "return false;" at the end of your function) such as

<a onclick="javascript: openMyWin();return false;">My Link</a>

then the described behavior does not happen and the page does not scroll to the top.

This took me a while to figure out. I hope it helps others who have difficulty solving this issue.

answered on 05 Feb 2013, 07:14 PM

I am facing the similar issue where, when the RadWindow Popup opens, the ASPX page scrolls to the top and the user has to scroll down to view the Popup.This happens when the RadGrid is long(many rows) and only in IE 8 and 9 and not in Chrome or Firefox.

The solutions mentioned like removing focus or using the RadAjaxManager as mentioned in this article did not worked for me.
http://www.telerik.com/community/forums/aspnet-ajax/window/cannot-stop-window-scrolling-to-top-when-postback-occurs-in-modal-window.aspx

What worked for me is that on OnClientBeforeShow event I am persisting the Scroll co-ordinates of Page and in
OnClientPageLoad event I am again setting those co-ordinates.

RadWindow:

<telerik:RadWindow ID="RadWindow1" runat="server"

Width="800"

OnClientBeforeShow="fnRadWindowBeforeShow"

Height="600"

OnClientPageLoad="fnRadWindowPageLoad"

>

</telerik:RadWindow>

Javascript:
Using object to encapsulate variable.

function ModalPopUpScrollPosition(x, y) {

this._scrollLeft = x;

this._scrollTop = y;

}

function xCoordinate() {

return this._scrollLeft;

}

function yCoordinate() {

return this._scrollTop;

}

ModalPopUpScrollPosition.prototype.XCoordinate = xCoordinate;

ModalPopUpScrollPosition.prototype.YCoordinate = yCoordinate;

var modalPopUpScrollPositionObj = null;

function fnRadWindowBeforeShow() {

modalPopUpScrollPositionObj = new ModalPopUpScrollPosition(document.documentElement.scrollLeft, document.documentElement.scrollTop);

}

function fnShowIngredientLookupPopup(obj, rwId, url) {

var wnd = $find(rwId);

wnd.setUrl(url);

wnd.show();

}

function fnRadWindowPageLoad() {

if ($.browser.msie) {

if (modalPopUpScrollPositionObj != null)

window.scrollTo(modalPopUpScrollPositionObj.XCoordinate(), modalPopUpScrollPositionObj.YCoordinate());

}

Would like to know from Telerik whether it is a known issue or whether developers are implementing it in a wrong way.?
The only issue with this solution is that one need to update at all places where RadWindow is used.There is no generic solution.
Also this occurs when a URL is passed to RadWindow.If it is a stand alone RadWindows then it does not scroll.

Regards

answered on 07 Feb 2013, 03:09 PM

Hello Jignesh,

This behavior is observed primarily in two cases (assuming additional code is no affecting the scenario)
- the element that calls the function that opens the RadWindow is an anchor whose href points to a # - i.e. the top of the site. In this case the browser scrolls to the top and this is the expected and default browser behavior for anchors. Setting the href to javascript:void(0) solves this because it prevents the default browser action
- a server Focus() or a default focused element is present in the content page that is in the RadWIndow - the browser attempts to scroll this element into view which causes the problem, because the element is absolutely positioned in the RadWIndow, but its markup is in the beginning of the form, so the browser once again scrolls to the top. This is also treated here with a sample code.

Both cases are browser behaviors we are dependent on and we cannot void, so the developer must take measures to avoid them.

All the best,
Marin Bratanov
the Telerik team

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

RadWindow opening and scrolling back to the top of the page

17 Answers, 1 is accepted