Programmatically scrolling to a specific row (by ID value)

[Compton]

If I have a grid with a primary key (ID) defined, how can I scroll to a specific row using a key value?  I have Googled this and tried various approaches, but none has worked.    This is on navigating in from another page, with a key value passed in.

[Georgi Denchev]

Hi, Compton,

In order to execute some code upon paging/filtering/sorting(or other data operation) you must use the dataBound event.

Inside the dataBound event you can retrieve the dataItem of the row by key(id) by using the dataSource.get() method. Then you can use the dataItem to locate the row(<tr> element) and scroll to it with javascript.

 

        dataBound: function(e) {
          let grid = e.sender,
              scrollContentOffset = this.element.find("tbody").offset().top, // Get the top tbody offset.
              dataItem = grid.dataSource.get(key), // Find the dataItem.
              uid = dataItem.uid, // Get the uid.
              row = grid.element.find("[data-uid='" + uid + "']"); // Find the row on the current page by using the uid.

          // If the row is found on the current page...
          if(row.length) {
            // Calculate the offset from the top of the table.
            let rowOffset = row.offset().top;
            let distance = rowOffset - scrollContentOffset;

            // Scroll to it with animation.
            this.element.find(".k-grid-content").animate({
              scrollTop: distance
            }, 400);
          }
        }

Dojo

https://dojo.telerik.com/@gdenchev/OniROYAD 

Best Regards,
Georgi Denchev
Progress Telerik