Keyboard navigation for both kendo grid inside kendo tile layout

[ashutosh]

How can we achieve keyboard navigation for a tile layout which has a kendo grid inside one of the tile? 

to activate the widget the shortcut key is same i.e. alt+w.

the default example of tile layout has the grid inside tile.

https://demos.telerik.com/kendo-ui/tilelayout/index

 

 

[Mihaela]

Hello Ashutosh,

The keyboard navigation functionality could be enabled through the "navigatable" option of the Kendo UI Grid widget:

$("#conversions-grid").kendoGrid({
  ...
  navigatable: true,
  ...
});

In general, the TileLayout and the widgets inside it are not connected to each other and their attributes are set independently. For example, if the option "navigatable" is set to the grid(s) and not to the TileLayout, then only the grid(s) will be "navigatable". If it is set to both the TileLayout and the Grid, the keyboard navigation will be enabled for both widgets.

Here is a demo and a list with all available supported keys and actions for grid: 

https://demos.telerik.com/kendo-ui/grid/keyboard-navigation

Also, here is the default example of the TileLayout widget, where the keyboard navigation is enabled for the two grids inside it:

https://dojo.telerik.com/ArugaRAr/2

If you have any other questions, don't hesitate to let me know.

Regards, Mihaela Lukanova Progress Telerik

[ashutosh]

thank you for the response Mihaela,

although "navigatable:true"  works for both tile and grid control, the default key combination alt+w does not work as it can work only for one element at any given point of time.

the work-around seems to be, is shift the focus on the widget using tab keys and then use corresponding shortcuts to operate on the widget.

thanks.

[Mihaela]

Hello Ashutosh,

The key combination "Alt + W" is a custom one that is built in the keydown event attached to the body of the page. It is used across all of our live examples - for demo purposes:

$(document.body).keydown(function (e) {
    if (e.altKey && e.keyCode == 87) {
        $(".k-tilelayout-item.k-card:first").focus();
    }
})

Of course, you could go ahead and modify the logic above, and instead of focusing on the first item of the TileLayout, focus the grid.

Any custom key combinations could be implemented with this approach. It is also demonstrated in the demo below, where are listed all supported key combinations of the Kendo UI TileLayout widget:

https://demos.telerik.com/kendo-ui/tilelayout/keyboard-navigation

Let me know in case of any other queries.

 

Regards, Mihaela Lukanova Progress Telerik