scroll to row

[George Handlin]

I am trying to figure out a way to scroll to a row when the user loads the page. When the user clicks an item in the grid, they are taken to an edit page. Upon coming back to the listing, I want to scroll the grid to the row containing the record they just edited.

[Konstantin Dikov]

Hi George,

You can store some identifying field value for that item in a HiddenField and use the following code to scroll to that item:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function pageLoad() {
            var grid = $find("<%=RadGrid1.ClientID%>");
            var master = grid.get_masterTableView();
            var activeItemID = document.getElementById("<%=ActiveItemID.ClientID%>").value;
            var items = master.get_dataItems();
            for (var i = 0; i < items.length; i++) {
                if (items[i].getDataKeyValue("ID") == activeItemID) {
                    var rowElement = items[i].get_element();
                    var offset = rowElement.offsetTop;
                    setScroll(grid, offset);
                }
            }
        }

        function setScroll(grid, scrollTop) {
            var dataDiv = $telerik.findElement(grid.get_element(), grid.get_id() + "_GridData");
            dataDiv.scrollTop = scrollTop;
        }
    </script>
</telerik:RadCodeBlock>

<asp:HiddenField runat="server" ID="ActiveItemID" Value="18"/>

<telerik:RadGrid runat="server" ID="RadGrid1" OnNeedDataSource="RadGrid1_NeedDataSource" MasterTableView-ClientDataKeyNames="ID">
    <MasterTableView TimeZoneID=""></MasterTableView>
    <ClientSettings>
        <Selecting AllowRowSelect="true" />
        <Scrolling AllowScroll="true" ScrollHeight="300px" UseStaticHeaders="true" />
    </ClientSettings>
</telerik:RadGrid>

Keep in mind that the identifying field should be included in the ClientDataKeyNames collection of the MasterTableView.

Hope this helps.


Regards,
Konstantin Dikov
Telerik by Progress