Hi,
I need In-Cell editable grid but it must be able to switch between cells with a tab. Is to possible to reuse In-Cell editable grid https://www.telerik.com/kendo-react-ui/components/grid/editing/editing-in-cell/ or do I need to do it with custom cells?
2 Answers, 1 is accepted
Rank 1
Veteran
Hello, Matej,
I`m glad to hear that the desired result is achieved.
Also, thank you for sharing the example with the KendoReact community, it is highly appreaciated.
This is a link to our demo that showcases how to achieve the same:
https://www.telerik.com/kendo-react-ui/components/grid/accessibility/#toc-in-cell-editing-with-tab
Regards,
Stefan
Progress Telerik
Rank 1
Your keyboard navigation example does not demonstrate how to tab from cell to cell to edit.
Matej's example works well, but it's a bit of a hack
Indeed the example we had there was removed as we have built-in navigation how, but that works with the arrow keys.
The example shown by Matej, is the same as the one we had as a demo before.
We also have in our backlog to make a new example or extend the current keyboard navigation to have an option to move between the cells with tab.
Rank 1
The arrow keys move the focus as the user may do different actions with the keyboard not only editing.
For example, they can go to the expand cell and expand it, they can go to the filter cell and add a new filter, they can also use it for editing (Enter will go in the edit, Esc will leave editing).
The keyboard navigation is still a new feature and we are actively collecting feedback to improve it.
Rank 1
Iron
Iron
Hi,
Any plans on getting this example out? I would also need it with arrow keys.
My client wants to mimic excel file editing in grid, which I could do in Kendo for Jquery without any issues. We are rewriting his app to React.
Basically the scenario is to have a batch edit grid (which works with InCell editing), and do arrows moving between rows and fields:
- right arrow goes from one edited field to the right field near it in edit mode
- down arrow does the same thing only moves to the row below it and put the same field in that row to edit mode
- esc exits edit mode
- enter enters edit mode if it's not already in edit mode
Can you please tell me how to achieve this?
Hi Sanja,
There is still no official example with in-cell editing and arrow keys, but I have prepared one that you can test and see if it will meet your requirements:
Please note that the KendoReact Grid in-cell editing is nothing more than handling the events of the TD and TR elements and opening a cell for editing (all happening within the "renderers.jsx" file in the above example (and in our in-cell editing demo). The actual logic for opening and closing the editing can be change as per the exact requirements.
As for the arrow keys, I have enabled the "navigatable" property of the Grid and I have also changed the logic for going into edit mode from "click" to "pressing Enter key". The example also exits the edit mode with enter, but you can change it to "Esc" key instead.
Hope this helps.
Adding an updated version of the example to handle keyboadnavid values starting with numbers: