scroll to row

2 posts, 0 answers
  1. George Handlin
    George Handlin avatar
    6 posts
    Member since:
    Mar 2006

    Posted 12 Jan 2017 Link to this post

    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.
  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 16 Jan 2017 Link to this post

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