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

scroll to row

1 Answer 65 Views
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
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;
<asp:HiddenField runat="server" ID="ActiveItemID" Value="18"/>
<telerik:RadGrid runat="server" ID="RadGrid1" OnNeedDataSource="RadGrid1_NeedDataSource" MasterTableView-ClientDataKeyNames="ID">
    <MasterTableView TimeZoneID=""></MasterTableView>
        <Selecting AllowRowSelect="true" />
        <Scrolling AllowScroll="true" ScrollHeight="300px" UseStaticHeaders="true" />

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

Hope this helps.

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.
Asked by
George Handlin
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Share this question