Cendo Grid scrolls the selected row

Question

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

For example, I tried this:

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

I 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 someone point me in the right direction, please? :)

--- EDITED ---

For other reasons, I cannot bind to the change event, so I should be able to call a function that scrolls the list to the selected row. This is what I tried with @Antonis answer 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 through the list, but not to the selected line. Am I using a mesh object incorrectly by calling scrollTop on it?

It is 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

You can do this automatically when a row is selected. Bind the function to the "change" event, and there you can go to the selected line. (assuming that you can only select one line, which is set by the parameter "this.select ()")

JSFiddle example

'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 2

Thus, most of the answers here make two mistakes: one is just a matter of efficiency, the other is a real bug.

• Using element.find(".k-grid-content") . It is just massively unnecessary. grid.content gives you the same much easier (and faster).

• Using .offset() , find the position of the string. This is wrong: which will tell you the position of the line relative to the document itself. If your page allows you to scroll the entire page (and not just the grid), this number will be incorrect.

  Use .position() - this gives you the position relative to the offset parent. For .position() give you the correct numbers, the table in your grid.content must have position: relative . . This is best applied in a CSS stylesheet:

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

In any case, if you already have a link, which I will call grid , to the grid itself, and you have the content panel set to relative , all you need 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 the content pane, the part you want to scroll through. This is a jQuery object.

JQuery objects have a .scrollTop method, so this 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 do this, grid.select() returns a jQuery object corresponding to the selected row. This is where you want to scroll. To get our position, we use the jQuery .position() method. The return value is an object with the fields top and left ; we want to scroll to its vertical position, so we use top .

This is most easily used in the change callback, of course; there grid just this (since the callback is called on the grid itself), and change automatically called when the selection changes. But you can call this code anytime you want to move on to the selection; you can get grid using:

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

Answer 3

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 4

I had problems with the bias, so the situation improved 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 5

I found a feature for this, in Kendo Mobile MVVM for Mobile

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

or

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