New to Kendo UI for jQuery? Download free 30-day trial

Scroll to Selected Row


Product Progress Kendo UI Grid
Progress Kendo UI version Created with the 2017.3.1026 version


How can I scroll the Kendo UI Grid when a row is selected?


To programmatically scroll the Grid:

  1. Handle the change event.
  2. Calculate the distance.
  3. In an animate effect, use the scrollTop of the .k-grid-content element.
<div id="grid"></div>
    var dataSource = [];

    for (i = 0; i < 100; i++) {
            name: i,
            age: i

        columns: [{
                field: "name"
                field: "age"
        dataSource: dataSource,
        selectable: "row",
        scrollable: true,
        height: 500,
        change: function(e) {
            var scrollContentOffset = this.element.find("tbody").offset().top;
            var selectContentOffset =;
            var distance = selectContentOffset - scrollContentOffset;

                scrollTop: distance
            }, 400);
    var grid = $("#grid").data("kendoGrid");"tr:eq(80)");
In this article
Not finding the help you need? Improve this article