Grid Accessibility - CRUD operations only with keyboard

[Daniel]

Hey guys,

does there anywhere exist a working example for a kendo grid which has all the crud operations enabled and is fully accessable via keyboard? I know you have on your demo page a full example for keyboard navigation but there aren't existing crud operations -> https://demos.telerik.com/kendo-ui/grid/keyboard-navigation

Would be nice if there are already some informations how to implement a full keyboard support. If not, well then I have to figure everything out how to access userfriendly all the crud operations.

Thank you!
Daniel

[Aleksandar]

Hi Daniel,

The Demo linked aims to demonstrate the keyboard shortcuts for navigating the Grid. You can enable keyboard navigation for the Grid by setting the .Navigatable() configuration option. 

Here are two REPLs where I have enabled the keyboard navigation:

Grid Batch Editing Demo with keyboard navigation

Grid Inline Editing Demo with keyboard navigation

I am however not sure what you mean by full keyboard support. In the above examples I am able to use the keyboard to navigate the Grid, add, edit and remove items using the keyboard shortcuts documented in the Keyboard Navigation Demo. Consider elaborating further, if I am missing your point or you have a specific issue in mind.

I hope this helps.

Regards,
Aleksandar
Progress Telerik

[Daniel]

Hey Aleksandar,

in your example I'm not shure how you can add, edit or delete data. For example I'm not able to get to the toolbar section to trigger adding a new row or I don't know the keyboard shortcut if there any existing. 

Same for editing or deleting. If I'm at the cell for the both buttons, how can I trigger them?

[Aleksandar]

For example, in the InLine Editing demo I shared, you can use Tab and Shift+Tab to navigate to and from the header with Add record button to the Grid table containing the information on the dataItems. Use the arrows to navigate the cells. Pressing Enter on a cell of a command column will focus the cell and allow you to use Tab or Shift+Tab to navigate through commands. Use Enter to select a command. Pressing Esc will get you out of edit mode or selected command cell to the current row.

[Daniel]

Indeed, I can navigate through your table! 

I already found my problem and the error source was in a whole different location. Somehow I forgot to update my nuget package of the latest kendo release in VS. But in the same time I did use the latest kendo css files! So VS/razor always rendered old kendo widgets (R2 2021) with the latest kendo css (R1 2022). Therefore some html or css structures prevent me to navigate through the table.

Now it is working like in your example. Damn..