Telerik Forums / UI for ASP.NET AJAX Forum / Grid /

RadGrid - Reset Scroll Position

Telerik UI for ASP.NET AJAX
Resources Buy Try

18 posts, 1 answers

Daniel

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.
Konstantin Dikov
Admin

2466 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.
Daniel

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.
Konstantin Dikov
Admin

2466 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.
Daniel

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.
Konstantin Dikov
Admin

2466 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.
Daniel

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.
Konstantin Dikov
Admin

2466 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.
Daniel

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.
Konstantin Dikov
Admin

2466 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.
Daniel

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.
Konstantin Dikov
Admin

2466 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.
Daniel

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.
Answer
Konstantin Dikov
Admin

2466 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.
Daniel

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.
Daniel

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.
ruckmani

3 posts

Member since:
Nov 2016

Posted 31 Mar 2017 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
Konstantin Dikov
Admin

2466 posts
Posted 05 Apr 2017 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:

http://stackoverflow.com/questions/9236314/how-do-i-synchronize-the-scroll-position-of-two-divs

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.

RadGrid - Reset Scroll Position

Daniel

Konstantin Dikov

Daniel

Konstantin Dikov

Daniel

Konstantin Dikov

Daniel

Konstantin Dikov

Daniel

Konstantin Dikov

Daniel

Konstantin Dikov

Daniel

Konstantin Dikov

Daniel

Daniel

ruckmani

Konstantin Dikov