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

Answer 1

Here is the updated code http://jsfiddle.net/27Phm/12/

//    bind to 'change' event
function onChangeSelection(e) {
    try {
        var $trSelect = this.select();
        var $kcontent = this.element.find(".k-grid-content");
        if ($trSelect && $trSelect.length == 1 && $kcontent) {
            var scrollContentOffset = this.element.find("tbody").offset().top;
            var selectContentOffset = $trSelect.offset().top;
            var IsMove = false;
            var distance = selectContentOffset - scrollContentOffset;
            distance += $kcontent.offset().top;
            if ($trSelect.prev().length == 1 && distance > $trSelect.prev().offset().top) {
                distance = (distance - $trSelect.prev().offset().top); //+ ($trSelect.height());
                //var toprows = $kcontent.scrollTop() / $trSelect.height(); //top rows above the scroll
                var selrowtotal = ($trSelect.offset().top - $kcontent.offset().top) + $trSelect.height();
                IsMove = selrowtotal > $kcontent.height() ? true : false;
                if (IsMove) $kcontent.scrollTop(distance);
            }
            if (!IsMove && $trSelect.offset().top < $kcontent.offset().top) {
                distance = selectContentOffset - scrollContentOffset;
                $kcontent.scrollTop(distance - 15);`enter code here`
            }
        }
    } catch (e) {

    }
}

Answer 2

I had problems with the offset so position works better for me:

grid.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().position().top  //  scroll to the selected row given by 'this.select()'
                 }, 400);    

Answer 3

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);
}

Answer 4

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 5

I found a function for this, in Kendo mobile MVVM

parent.set('onShow', function (e) {
   e.view.scroller.reset();
}

or

app.xxx = kendo.observable({
   onShow: function() { e.view.scroller.reset(); }
});