RadGrid - Reset Scroll Position

18 posts, 1 answers
  1. Daniel
    Daniel avatar
    159 posts
    Member since:
    Feb 2014

    Posted 17 Sep 2014 Link to this post

    Hello,

    I am working on a project with a RadGrid.

    The project requires that when a user clicks on a button, the RadGrid resets the scroll position.

    My code: 
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
                <script type="text/javascript">
      
                    function ResetGridPosition() {
                        var grd = document.getElementById('RadGrid1');
                        var grd1 = $find("<%= RadGrid1.ClientID%>");
                          var master = grd1.get_masterTableView().get_element().parentNode;
                          master.scrollLeft = 0;
                          master.scrollTop = 0;
                      }
      
      
                </script>
            </telerik:RadCodeBlock>
     
      
     <telerik:RadAjaxManager runat="server">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="RadButton1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadGrid1" UpdatePanelCssClass="" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                    <telerik:AjaxSetting AjaxControlID="RadGrid1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
     
     <telerik:RadGrid ID="RadGrid1" runat="server" GridLines="Both" AllowSorting="true" AllowPaging="true" PageSize="30" Width="900px">
                            <ClientSettings>
                    <Scrolling AllowScroll="True" UseStaticHeaders="True" ></Scrolling>
                </ClientSettings>
                        </telerik:RadGrid>
     
     <telerik:RadButton ID="RadButton1" runat="server" Text="Reset Grid Position" OnClientClicked="ResetGridPosition">

    It seems this code really resets the scroll position, but after the postback the
    grid scroll position returns to the previous position. [See Video

    How do I solve this?

    Thanks,
    Daniel.
  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2048 posts

    Posted 22 Sep 2014 Link to this post

    Hi Daniel,

    The behavior that you are observing is due to the fact that RadGrid has an internal functionality for saving the scroll position and apply it after a postback occurs. Since you are manually changing the scroll position, without saving the client state, the grid will use its saved state and will load the scroll position after the postback.

    For achieving the desired result you have two options. The first one is to set the SaveScrollPosition property of the grid to false and the second one is to call the updateClientState method of the client-side object:
    function ResetGridPosition() {
        var grd = document.getElementById('RadGrid1');
        var grd1 = $find("<%= RadGrid1.ClientID%>");
        var master = grd1.get_masterTableView().get_element().parentNode;
        master.scrollLeft = 0;
        master.scrollTop = 0;
        grd1.updateClientState()
    }

    Hope this helps.


    Regards,
    Konstantin Dikov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. Daniel
    Daniel avatar
    159 posts
    Member since:
    Feb 2014

    Posted 23 Sep 2014 in reply to Konstantin Dikov Link to this post

    Hi Konstantin Dikov,

    Thank you for the solution you have proposed. It does work!

    When I have tried to implement it in my project, I didn't succeed. In my project,
    the function is called in the code behind and not in the button event handler.

    I am using the following code:
    Protected Sub RadButton1_Click(sender As Object, e As EventArgs) Handles RadButton1.Click
            ScriptManager.RegisterStartupScript(Me, Me.GetType, "reset", "ResetGridPosition();", True)
    End Sub

    Then, I get the following error:
    Uncaught TypeError: Cannot read property 'get_masterTableView' of null

     How can I solve this?

    Thank you,
    Daniel.
  4. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2048 posts

    Posted 25 Sep 2014 Link to this post

    Hi Daniel,

    The issue that you are facing is due to the fact that the client object does not exist at this point, because the script you are registering will be executed before the grid object is created.

    I could suggest that you register some script for setting a global flag variable and then on the pageLoad event of the page, get reference to the grid and the MasterTableView and reset the scroll position there.

    Let me know if the suggestion worked on your end.


    Regards,
    Konstantin Dikov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  5. Daniel
    Daniel avatar
    159 posts
    Member since:
    Feb 2014

    Posted 21 Oct 2014 in reply to Konstantin Dikov Link to this post

    Hi Konstantin Dikov,

    Thank you for your response.

    I had the opportunity to check your answer only recently.
    I have tried a different way to call the JS function.
    This method works only when the user scrolls down. It does not work when the user scrolls sideways.

    Can we fix this solution, so that it resets the position also when the user scrolled only sideways? 

    JS (with no changes): 
    function ResetGridPosition() {
        var grd1 = $find("<%= RadGrid1.ClientID%>");
        var master = grd1.get_masterTableView().get_element().parentNode;
        master.scrollLeft = 0;
        master.scrollTop = 0;
        grd1.updateClientState()
    }

    VB.Net:
    Protected Sub RadButton2_Click(sender As Object, e As EventArgs) Handles RadButton2.Click
            Dim script As String = (Convert.ToString("function f(){ResetGridPosition(")) + "); Sys.Application.remove_load(f);}Sys.Application.add_load(f);"
            ScriptManager.RegisterStartupScript(Page, Page.[GetType](), "key", script, True)
    End Sub

    I have attached a video that shows the problem.
    http://youtu.be/cH68gN9InYM


    Thank you,
    Daniel.
  6. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2048 posts

    Posted 23 Oct 2014 Link to this post

    Hello Daniel,

    I have made some further test with the scenario that you are describing and I was able to replicate the same issue.

    After inspecting the internal client-side logic for RadGrid, where it is loading the saved scrolled position I have noticed that there is a delay applied, before loading the saved state, which is causing the problem. Nevertheless, following is a modified approach that should reset the scroll position without problems:
    function ResetGridPosition() {
        var grd1 = $find("<%= RadGrid1.ClientID%>");
        var master = grd1.get_masterTableView().get_element().parentNode;
        grd1.ClientSettings.Scrolling.ScrollLeft = 0;
        grd1.ClientSettings.Scrolling.ScrollTop = 0;
    }

    Kind Regards,
    Konstantin Dikov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  7. Daniel
    Daniel avatar
    159 posts
    Member since:
    Feb 2014

    Posted 30 Oct 2014 in reply to Konstantin Dikov Link to this post

    Hi Konstantin Dikov,

    Thank you for your reply,

    Unfortunately, it does not work in my project.
    It seems that no changes are visible [see video]

    (it does set the
    grd1.ClientSettings.Scrolling.ScrollLeft and grd1.ClientSettings.Scrolling.ScrollTop
    values to zero, but that’s not visible in the grid)

    I will be happy to get a project demonstrating this, or an alternative solution.

    Thank you,
    Daniel.
  8. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2048 posts

    Posted 31 Oct 2014 Link to this post

    Hello Daniel,

    I have noticed that you have kept the line where the updateClientState method is called. Please remove that line and let me know if everything starts to work as expected with that change.

    I am looking forward to your reply.


    Regards,
    Konstantin Dikov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  9. Daniel
    Daniel avatar
    159 posts
    Member since:
    Feb 2014

    Posted 02 Nov 2014 in reply to Konstantin Dikov Link to this post

    Hi Konstantin Dikov,

    Thank you for your quick response!

    Even when I remove  the updateClientState  code,
    It does not work.

    Thank you,
    Daniel.
  10. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2048 posts

    Posted 04 Nov 2014 Link to this post

    Hi Daniel,

    Since the provided approach is working in all browsers without any issues on my end, in order for us to be able to assist you any further on this matter I would like to ask you to open a regular support ticket with a sample, runnable project replicating the problem, so we can examine your exact implementation and locate the root of the problem.

    If you can make a simplified version of your scenario with a dummy data you can also paste the code here.


    Regards,
    Konstantin Dikov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  11. Daniel
    Daniel avatar
    159 posts
    Member since:
    Feb 2014

    Posted 04 Nov 2014 in reply to Konstantin Dikov Link to this post

    Hi Konstantin Dikov,

    Here is a simplified version of my project with dummy data:
    https://app.box.com/s/r1a2mdtlrlfrkdc8gel7

    Please let me know how to fix the problem.

    Thanks,
    Daniel.
  12. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2048 posts

    Posted 06 Nov 2014 Link to this post

    Hi Daniel,

    Thank you for providing the sample project.

    After testing the project I was able to observe the issue in Chrome, although it is working as expected in Firefox. I am not sure why this was working in all browsers with the test page that I have previously tested.

    Nevertheless, here is a modification of the client-side logic, which seems to fix the issue in all browsers with your project:
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            var shouldResetScroll = false;
            function ResetGridPosition() {
                shouldResetScroll = true;
            }
     
            function pageLoad() {
                if (shouldResetScroll) {
                    var grid = $find("<%=RadGrid1.ClientID%>");
                    grid.ClientSettings.Scrolling.ScrollLeft = 0;
                    grid.ClientSettings.Scrolling.ScrollTop = 0;
                    var master = grid.get_masterTableView().get_element().parentNode;
                    master.scrollLeft = 0;
                    master.scrollTop = 0;
                    grid.updateClientState();
                }
            }
        </script>
    </telerik:RadCodeBlock>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="btn_reset">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" UpdatePanelCssClass="" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <div>
     
        <table cellpadding="0" cellspacing="0" class="auto-style1">
            <tr>
                <td class="auto-style2" style="vertical-align: top">
                    <telerik:RadButton ID="btn_reset" runat="server" Text="Reset">
                    </telerik:RadButton>
                </td>
                <td>
                    <telerik:RadGrid ID="RadGrid1" runat="server" GridLines="Both" AllowSorting="true" AllowPaging="true" PageSize="30" Width="900px">
                        <ClientSettings>
                            <Scrolling AllowScroll="True" UseStaticHeaders="True"></Scrolling>
                        </ClientSettings>
                    </telerik:RadGrid>
                </td>
            </tr>
        </table>
     
    </div>

    Please let me know if the above works on your end too.


    Regards,
    Konstantin Dikov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  13. Daniel
    Daniel avatar
    159 posts
    Member since:
    Feb 2014

    Posted 09 Nov 2014 in reply to Konstantin Dikov Link to this post

    Hi Konstantin Dikov,

    Thank you for your reply.

    Unfortunately, it still does not work.

    This method works only when the user scrolls down. It does not work when the user scrolls sideways. [See Video]

    I'll be happy to receive a solution,

    Thanks,
    Daniel.
  14. Answer
    Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2048 posts

    Posted 12 Nov 2014 Link to this post

    Hi Daniel,

    Can you please try the following modification:
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            var shouldResetScroll = false;
            function ResetGridPosition() {
                shouldResetScroll = true;
            }
     
            function pageLoad() {
                if (shouldResetScroll) {
                    var grid = $find("<%=RadGrid1.ClientID%>");
                    grid.ClientSettings.Scrolling.ScrollLeft = 0;
                    grid.ClientSettings.Scrolling.ScrollTop = 0;
                    setTimeout(function () {
                        var master = grid.get_masterTableView().get_element().parentNode;
                        master.scrollLeft = 0;
                        master.scrollTop = 0;
                        grid.updateClientState();
                    });
                }
            }
        </script>
    </telerik:RadCodeBlock>

    Please note that the previous code was working correctly in IE and Firefox and failed in Chrome only.


    Regards,
    Konstantin Dikov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  15. Daniel
    Daniel avatar
    159 posts
    Member since:
    Feb 2014

    Posted 13 Nov 2014 in reply to Konstantin Dikov Link to this post

    Hi Konstantin Dikov,

    Thank you for the solution you’ve provided!

    Works great!

    Thanks,
    Daniel.
  16. Daniel
    Daniel avatar
    159 posts
    Member since:
    Feb 2014

    Posted 13 Nov 2014 in reply to Daniel Link to this post

    Hi Konstantin Dikov,

    I changed the code a little bit, to fit an environment of multiple languages (RTL and LTR)

    I have posted it here so that it might help others:

    JS:
    var shouldResetScroll = false;
    function ResetGridPosition() {
        shouldResetScroll = true;
        if (shouldResetScroll) {
            var grid = $find("<%=RadGrid1.ClientID%>");
            grid.ClientSettings.Scrolling.ScrollLeft = 0;
            grid.ClientSettings.Scrolling.ScrollTop = 0;
     
            setTimeout(function () {
                var dataDiv = grid.get_masterTableView().get_element().parentNode;
                var maxScrollWidth = dataDiv.scrollWidth - dataDiv.clientWidth;
                if (grid.ClientSettings.Scrolling.FrozenColumnsCount) {
                    if ("<%=Session("RTL")%>" == "True")
                        $get(gridID + '_Frozen').scrollLeft = maxScrollWidth;
                    else
                        $get(gridID + '_Frozen').scrollLeft = 0;
                    $get(gridID + '_Frozen').scrollTop = 0;
                }
                else {
                    if ("<%=Session("RTL")%>" == "True")
                        dataDiv.scrollLeft = maxScrollWidth;
                    else
                        dataDiv.scrollLeft = 0;
                    dataDiv.scrollTop = 0;
                }
     
                grid.updateClientState();
            });
            shouldResetScroll = false;
        }
    }

    VB.NET:
    Dim script As String = (Convert.ToString("function f(){ResetGridPosition(")) + "); Sys.Application.remove_load(f);}Sys.Application.add_load(f);"
    ScriptManager.RegisterStartupScript(Page, Page.[GetType](), "key", script, True)


    Regards,
    Daniel.
  17. ruckmani
    ruckmani avatar
    3 posts
    Member since:
    Nov 2016

    Posted 31 Mar in reply to Konstantin Dikov Link to this post

    when horizontal scroll bar of radgrid1 is being moved horizontal scroll bar of radgrid2 should also move.is this possible?please help me
  18. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2048 posts

    Posted 05 Apr Link to this post

    Hello,

    You could attach handlers for the scroll event of the scrollable containers of the two RadGrid controls and sync them manually. The following forum thread could be used as a reference:

    Best Regards,
    Konstantin Dikov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top