1
votes

I have a Kendo Grid that is setup with Virtual Paging and Navigatable (for keyboard navigation). Depending on the size of the content, sometimes I will not be able to see all the data in the current view and when I scroll using the mouse, there's no issue, but when I try to use the keyboard to navigate to the bottom rows, the rows do not scroll into view.

It's fairly straight-forward to scroll the element into view, assuming you hook into an event to trigger the scroll. I can't seem to figure out how to hook into the focus event on the grid to automatically make it happen.

JSFiddle

How can I hook into the focus event to scroll the currently focused cell into view. Note that the currently focused cell is different from the selected cell/row.

Scroll code:

$grd.animate({
    scrollTop: $ele.offset().top - $grd.offset().top + $grd.scrollTop()
});
1
You may be looking for the change event: I believe it will catch row/cell changes with both click or keyboard navigation. The following is untested code but it may work: this.element.find(".k-grid-content").animate({ scrollTop: this.select().position().top }, 500); - chiapa
@chiapa - the change event has to do with changing the selected row or cell, not with the change in focus. Typically, you can't see the change in focus unless the Navigatable option is set. Take a look at the JSFiddle to see what I am referring to. Here is the API Docs for change event (Fired when the user selects a table row or cell in the grid.): docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-change - Ed Sinek
Must you have the scrollable property as virtual? If not, remove the virtual and scrolling works as expected: fiddle here - chiapa
@chiapa, Yes, unfortunately, I do need virtual scrolling. We are doing server side paging, etc and do not want the paging buttons (per biz). - Ed Sinek

1 Answers

0
votes

See this question on Kendo forums which resolves my issue (as best as it can be resolved)

http://www.telerik.com/forums/kendo-grid-scroll-focused-cell-into-view