RadWindow opening and scrolling back to the top of the page

18 posts, 0 answers
  1. Charlie
    Charlie avatar
    7 posts
    Member since:
    Jul 2010

    Posted 03 May 2011 Link to this post

    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
  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 04 May 2011 Link to this post

    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.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Charlie
    Charlie avatar
    7 posts
    Member since:
    Jul 2010

    Posted 04 May 2011 Link to this post

    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!
  5. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 06 May 2011 Link to this post

    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.

  6. Charlie
    Charlie avatar
    7 posts
    Member since:
    Jul 2010

    Posted 06 May 2011 Link to this post

    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!
  7. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 10 May 2011 Link to this post

    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.

  8. Charlie
    Charlie avatar
    7 posts
    Member since:
    Jul 2010

    Posted 11 May 2011 Link to this post

    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!
  9. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 13 May 2011 Link to this post

    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.

  10. Remigijus Kaunietis
    Remigijus Kaunietis avatar
    3 posts
    Member since:
    Feb 2009

    Posted 01 Jun 2011 Link to this post

    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
  11. Arnstein
    Arnstein avatar
    12 posts
    Member since:
    Mar 2008

    Posted 19 Dec 2011 Link to this post

    Yes, setting focus to a control can cause this. Also setting the defaultbutton property of the form element can cause this behavior.

    Arnstein
  12. Muhammad
    Muhammad avatar
    2 posts
    Member since:
    Jul 2012

    Posted 31 Jul 2012 Link to this post

    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();
  13. Scott
    Scott avatar
    9 posts
    Member since:
    Jul 2012

    Posted 31 Jul 2012 Link to this post

    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
  14. Bruce Mendonza
    Bruce Mendonza avatar
    10 posts
    Member since:
    Dec 2009

    Posted 05 Oct 2012 Link to this post

    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.
  15. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 08 Oct 2012 Link to this post

    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.
  16. <span>w</span>
    <span>w</span> avatar
    84 posts
    Member since:
    Jun 2012

    Posted 13 Oct 2012 Link to this post

    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
  17. Daniel Martin
    Daniel Martin avatar
    2 posts
    Member since:
    Nov 2009

    Posted 29 Jan 2013 Link to this post

    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.
  18. Jignesh
    Jignesh avatar
    18 posts
    Member since:
    Dec 2011

    Posted 05 Feb 2013 Link to this post

    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




  19. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 07 Feb 2013 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017