This is a migrated thread and some comments may be shown as answers.

scroll to row

1 Answer 65 Views
Grid
This is a migrated thread and some comments may be shown as answers.
George Handlin
Top achievements
Rank 1
George Handlin asked on 12 Jan 2017, 12:33 PM
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.

1 Answer, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 16 Jan 2017, 02:12 PM
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.
Tags
Grid
Asked by
George Handlin
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Share this question
or