Edit this page

Scroll to Selected Row

Environment

Product Progress Kendo UI Grid
Progress Kendo UI 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>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy