Scrolling to a Specific Item
You can programmatically scroll the Grid component to a specific item by using the built-in scrollToItem() method.
Using the scrollToItem() method requires you to configure the dataSource.Schema.model.id.
Scrolling to an Item by Passing the Id of the Item
To scroll to a specific data item, pass the id of the item to the scrollToItem() method.
const grid = $("#grid").data("kendoGrid"); // Get an instance of the Grid.
grid.scrollToItem(27); // Pass the id of the item to the method.
Scroll to an Item in Virtual Scrolling Grid
You can scroll to an item that is not loaded yet in a Virtual Scrolling Grid by passing the id of the data item and a callback to the scrollToItem() method.
The callback is an optional parameter, a function to be executed when virtual scrolling is enabled and the item to scroll is not loaded yet. The callback function must return the index of the item in the dataset.
const grid = $("#grid").data("kendoGrid"); // Get an instance of the Grid.
grid.scrollToItem(10403, function (options) { // Pass the id and a callback returning the index of the item.
options.success(155);
});
Known Limitations
- Scrolling to an item does not combine with the Grid's
Group Pagingfunctionality. - Scrolling to an item does not work together with the Grid's
Endless Scrollingfunctionality. - When the sum of the specified item's height and the height of all items afterward is less than the Grid's height the item to be scrolled to the top will not appear at the top. In non-virtualized Grids, the Grid will be scrolled to its bottom but the specified item will not appear at the top. In Grids with virtual scrolling, the Grid will be scrolled to the bottom of the current data set but the scroller will not be positioned at the bottom and the item will not be positioned at the top.