Scroll to Selected Row

Environment

Product	Progress® Kendo UI® Grid for jQuery
Product Version	Created with the 2017.3.1026 version

Description

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

Solution

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>
<script>
    var dataSource = [];

    for (i = 0; i < 100; i++) {
        dataSource.push({
            name: i,
            age: i
        });
    }

    $("#grid").kendoGrid({
        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 = this.select().offset().top;
            var distance = selectContentOffset - scrollContentOffset;

            this.element.find(".k-grid-content").animate({
                scrollTop: distance
            }, 400);
        }
    });
    var grid = $("#grid").data("kendoGrid");
    grid.select("tr:eq(80)");
</script>