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 422 Views
Window
This is a migrated thread and some comments may be shown as answers.
Charlie
Top achievements
Rank 1
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

Sort by
0
Svetlina Anati
Telerik team
answered on 04 May 2011, 03:52 PM
Hello Charlie,

 In case your RadWindow is modal, the behavior is most probably caused by restoring the focus - here is a KB article along with javascript code to workaround the problem:


http://www.telerik.com/support/kb/aspnet-ajax/window/persist-radwindow-s-scroll-position.aspx

Greetings,
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.

0
Charlie
Top achievements
Rank 1
answered on 04 May 2011, 08:47 PM
Hello Svetlina,

The problem isn't restoring focus of the main page. The problem is focusing to the RadWindow upon opening.

Here's the process I'm doing:

I scroll to the bottom of the main window
I find a line item in my grid and click the Edit icon
The RadWindow opens (it is modal) <-- At this point the scroll-bar for the main window has scrolled back to the top and I have to scroll down to see my RadWindow
When I close the RadWindow and focus returns to the main window, the main window's scroll-bar stays where I just closed the window (which is what it should do).

Thanks again!
0
Svetlina Anati
Telerik team
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">
<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.

0
Charlie
Top achievements
Rank 1
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!
0
Marin Bratanov
Telerik team
answered on 10 May 2011, 03:22 PM
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

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.

0
Charlie
Top achievements
Rank 1
answered on 11 May 2011, 03:13 PM
Hello Marin,

I tinkered with the project you had attached and I also couldn't recreate the issue. I'm not sure what I am doing any differently. No PostBack is occuring when I open the RadWindow in my application but it still continues to scroll back to the top of the frame.

Because I cannot attach a fully runnable project, I have created a screencast that shows what is happening. I will keep looking for a solution.
http://www.screencast.com/t/QxwqoZ06jNl

Thanks!
0
Marin Bratanov
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

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.

0
Remigijus Kaunietis
Top achievements
Rank 2
answered on 01 Jun 2011, 11:35 PM
I had the same problem.
In my case the problem was in popup window setting focus:
Page.SetFocus(SetFocusControl);
When removed this line all works fine.

Remigijus
0
Arnstein
Top achievements
Rank 2
answered on 19 Dec 2011, 03:12 PM
Yes, setting focus to a control can cause this. Also setting the defaultbutton property of the form element can cause this behavior.

Arnstein
0
Muhammad
Top achievements
Rank 1
answered on 31 Jul 2012, 07:26 AM
I just removed the focus statement from my rad window page(opened in popup), and scroll up issue is resolved. try it.

In Popupwindow.aspx.cs => Page_Load event
i just commented the statement
//txtUserName.Focus();
0
Scott
Top achievements
Rank 2
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
0
Bruce Mendonza
Top achievements
Rank 1
answered on 05 Oct 2012, 07:39 AM
Well Telerik people - is there a solution to this problem?

I have 60 controls, of which 20 get the focus set to it depending on the user action. And I am using a defaultButton setting.

I very much need the radwindow to maintain its scroll position.

I will repeat again, this is only an issue in Firefox.
0
Marin Bratanov
Telerik team
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.
0
Waseem
Top achievements
Rank 1
answered on 14 Oct 2012, 02:05 AM
When you open your window, just use  this window.scrollTo(0, 0);  before opening radwindow.
It first take you to top of page and then open radwindow. no need of scrolling page to see your window.

<script language="javascript">
             function openRatingWin(url) {
                 window.scrollTo(0, 0);
                 var oWnd = radopen(url, "PrintWindow");
             }
</script>

Regards
Muhammad Waseem
0
Daniel Martin
Top achievements
Rank 1
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.
0
Jignesh
Top achievements
Rank 1
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




0
Marin Bratanov
Telerik team
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
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.
Tags
Window
Asked by
Charlie
Top achievements
Rank 1
Answers by
Svetlina Anati
Telerik team
Charlie
Top achievements
Rank 1
Marin Bratanov
Telerik team
Remigijus Kaunietis
Top achievements
Rank 2
Arnstein
Top achievements
Rank 2
Muhammad
Top achievements
Rank 1
Scott
Top achievements
Rank 2
Bruce Mendonza
Top achievements
Rank 1
Waseem
Top achievements
Rank 1
Daniel Martin
Top achievements
Rank 1
Jignesh
Top achievements
Rank 1
Share this question
or