Kendo Grid scroll to selected row

Question

I want to be able to call a function that scrolls the Kendo grid to the selected row. I´ve already tried some methods but none of them worked,

for instance I tried this:

var grid = $("#Grid").data("kendoGrid"),
    content = $(".k-grid-content");
content.scrollTop(grid.select());

I´ve also tried this:

var gr = $("#Grid").data("kendoGrid");
var dataItem = gr.dataSource.view()[gr.select().closest("tr").index()];
var material = dataItem.id;
var row = grid.tbody.find(">tr:not(.k-grouping-row)").filter(function (i) {
    return (this.dataset.id == material);
});
content.scrollTop(row);

Can anyone point me in the right direction please? :)

--- EDITED ---

For other reasons I can not bind to the change event so I have to be able to call a function the scrolls the list to the selected row. This is what I tried with the answer @Antonis provided for me.

var grid = $("#Grid").data("kendoGrid")
grid.element.find(".k-grid-content").animate({  
    scrollTop: this.select().offset().top  
 }, 400);

When I tried this it scrolled somewhat down the list but not to the selected row. Am I use the grid object in a wrong way by calling scrollTop on it?

This too:

var grid = $("#ItemGrid").data("kendoGrid");
grid.scrollToSelectedRow = function () {
    var selectedRow = this.select();
    if (!selectedRow) {    
        return false;    
    }
    this.element.find(".k-grid-content").animate({
        scrollTop: selectedRow.offset().top  
    }, 400);
    return true;
    };

grid.scrollToSelectedRow();

Answer 1

So most of the answers here are making two mistakes, one just a matter of efficiency, the other an actual bug.

1. Using element.find(".k-grid-content"). This is just massively unnecessary. grid.content gives you the exact same thing much more easily (and more quickly).

2. Using .offset() to find the position of the row. This is incorrect: that will tell you the row's position relative to the document itself. If your page allows you to scroll the entire page (not just the grid), this number will be incorrect.

   Instead use .position() – this gives you the position relative to an offset parent. In order for .position() to give you the correct numbers, the table in your grid.content must have position: relative. This is best applied through a CSS style sheet:

   .k-grid-content table {
     position: relative;
   }

Anyway, assuming you already have a reference, which I'll call grid, to the grid itself, and you have your content pane set to relative position, all you have to do is this:

grid.content.scrollTop(grid.select().position().top);

Or, for animation,

grid.content.animate({ scrollTop: grid.select().position().top }, 400);

As already discussed, grid.content gets you the content pane, the part you want to actually scroll. It is a jQuery object.

jQuery objects have a .scrollTop method, so that part is pretty simple. The .animate method works similarly when you use its scrollTop property. Now we just need to know where to scroll to.

For that, grid.select() returns a jQuery object corresponding to the row that is selected. That's where you want to scroll to. To get its position, we use the jQuery .position() method. The return value is an object with top and left fields; we want to scroll to its vertical position, so we use top.

This is most easy to use in the change callback, of course; there grid is simply this (since the callback is called on the grid itself), and change is automatically called when the selection changes. But you can call this code any time you want to scroll to the selection; you can get grid by using:

grid = $('#theGridsId').data('kendoGrid');

Answer 2

You can do it automatically when a row is selected. Bind a function to the 'change' event, and in there, you can scroll to the selected row. ( assuming you can select only one row, which is given by the 'this.select()' )

JSFiddle example

the 'change' handler

//    bind to 'change' event
function onChangeSelection(e) {

    //    animate our scroll
    this.element.find(".k-grid-content").animate({  // use $('html, body') if you want to scroll the body and not the k-grid-content div
        scrollTop: this.select().offset().top  //  scroll to the selected row given by 'this.select()'
     }, 400);
}