Kendo Grid: scroll focused cell into view

[John]

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.

When I use the mouse to scroll (mouse wheel or scroll bar), there's no issue. When I try to use the keyboard to navigate to the bottom rows, the rows do not scroll into view. Getting javascript to scroll the element into view is fairly straight-forward, but to make that happen automatically, you need hook into an event to trigger the scroll. My problem is that I can't seem to figure out how to hook into the focus event on the grid to automatically make it happen.

Using the browser console, I can force the grid to scroll using this code:

$grd.animate({
    scrollTop: $ele.offset().top - $grd.offset().top + $grd.scrollTop()
});

Here is a JSFiddle showing the issue: 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. Clearly, there must be a way since Kendo updating the cell css class to show the currently focused cell. So, I'm hoping there's a way for me to subscribe to that event as well.

I don't want to use the change event because I am not changing the selection of the row, just changing the focus by navigating between cells using the arrow keys (and using the navigatable option). Also, I do need virtual paging setup - I know that turning off virtual paging will make this problem go away, but turning off virtual paging is not an option.

Thanks,
John

[Dimo]

Hello John,

There is no special event fired during moving to a particular cell or row with the keyboard, but you can use the following approach:

$("#grid").on("keyup", function(e) {
   console.log($(".k-state-focused"));
});

Unfortunately, the desired scroll-into-view behavior is practically impossible to achieve and that's why it is not supported out-of-the box either (I mean when using virtual scrolling). In other words, there is no way to calculate the correct scroll offset of the data area, so that the focused cell is brought into view. This is why keyboard navigation is officially not supported with virtual scrolling. Sorry about that.

http://docs.telerik.com/kendo-ui/web/grid/appearance#virtual-scrolling

Regards,
Dimo
Telerik

[John]

Thanks Dimo,

I've done a bit to get it to work somewhat - still more to do, like updating the scrollbar. Is this (or a more robust version of this) a usable solution that might make it into the codebase?  It does scroll the cell into view if it is not visible within the scrollable element.

JSFiddle

John

[Dimo]

Hi John,

I recommend you to test with some more items, e.g.

http://dojo.telerik.com/edASO

In the above example you will see that when you reach the first or last table row on the current "page", no request will be made to fetch the previous or the next page, because rebinding depends on a scroll event of the virtual scrollbar (a div.k-scrollbar element). Even if you trigger the event manually, the scroll position of the virtual scrollbar will not be correct, so the wrong data will be fetched. Even if you try to move the scroll position of the virtual scrollbar, you can't calculate precisely enough where to move it. And this last thing is why keyboard navigation is not supported out-of-the-box.

Regards,
Dimo
Telerik

[John]

Hi Dimo,
If I use the Arrow keys to navigate within the current page and the Page Down/Up keys to navigate between pages seems to work and the IDs are correctly updating.
What does not update is the scrollbar, regardless of if I only use Page keys or Arrow keys. Is it a bug that the scrollbar does not update when using the Page keys?
Thanks,
John

[Dimo]

Hello John,

The scrollbar is not updated when using the keyboard, because the Grid relies on the virtual scrollbar's scroll event to do that, and not on keyboard events.

By design, virtual scrolling behaves like this:

- the Grid table moves as a result of scrolling
- the Grid rebinds as a result of scrolling and the new request (paging) parameters (skip, top) are submitted depending on the current scroll position

In other words, scrolling always comes first and is a prerequisite for moving the table and rebinding. Currently you are trying to achieve the opposite algorithm (i.e. scroll after the table has moved), which is unfortunately not possible, due to the mentioned inability to calculate the scroll offset, which corresponds to a particular table row. Theoretically, you can move the virtual scrollbar and trigger the scroll event manually like this:

$("#GridID .k-scrollbar").scrollTop(4000);

Regards,
Dimo
Telerik