RadGrid - Reset Scroll Position

[Daniel]

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]

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

 

 

[Daniel]

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]

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

 

 

[Daniel]

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]

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

 

 

[Daniel]

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]

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

 

 

[Daniel]

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]

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

 

 

[Daniel]

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]

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

 

 

[Daniel]

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.

[Konstantin Dikov]

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

 

 

[Daniel]

Hi Konstantin Dikov,

Thank you for the solution you’ve provided!

Works great!

Thanks,
Daniel.

[Daniel]

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]

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]

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