jquery - Kendo Grid scroll to selected row -

i want able call function scrolls kendo grid selected row. i´ve tried methods none of them worked,

for instance tried this:

var grid = $("#grid").data("kendogrid"),     content = $(".k-grid-content"); content.scrolltop(grid.select()); 

i´ve 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 point me in right direction please? :)

--- edited ---

for other reasons can not bind change event have able call function scrolls list selected row. tried answer @antonis provided me.

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

when tried scrolled down list not selected row. use grid object in wrong way 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(); 

you can automatically when row selected. bind function 'change' event, , in there, can scroll selected row. ( assuming can select 1 row, given 'this.select()' )

jsfiddle example

the 'change' handler

//    bind 'change' event function onchangeselection(e) {      //    animate our scroll     this.element.find(".k-grid-content").animate({  // use $('html, body') if want scroll body , not k-grid-content div         scrolltop: this.select().offset().top  //  scroll selected row given 'this.select()'      }, 400); }