Kendo Grid In-Cell editing with a tab

[Matej]

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?

[Matej]

Nevermind, I found the answer. Here is an example https://stackblitz.com/edit/react-vm75k4

[Stefan]

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

[Michael]

Hi Stephan

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

[Stefan]

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.

[Michael]

Thanks. The only real-world use case in my experience where keyboard navigation would be (very) important is tabbing from cell to cell to edit. I'm not sure what the value is using arrow keys to merely highlight cells..... Tabbing from cell to cell to edit should be built in. Every modern app has it... And the edit cell should achieve focus on it's own. This is particularly an issue where I had fixed columns and scrolling - I had to write convoluted code when tabbing from cell to cell and getting the column to focus properly... Kendo UI (jQuery) has this all built in....

[Stefan]

Yes, we agree that using a tab for incell editing is an important feature.

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.

[Sanja Tolo]

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?

[Konstantin Dikov]

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:

• https://stackblitz.com/edit/react-xs8qg3?file=app%2Fmain.jsx,app%2Frenderers.jsx

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.

 

 

[Konstantin Dikov]

Adding an updated version of the example to handle keyboadnavid values starting with numbers:

• https://stackblitz.com/edit/react-xs8qg3-tvpukq?file=app%2Fmain.jsx,app%2Frenderers.jsx

[Sanja Tolo]

Is there an example of how we would do this with the new cells and rows property and incell editing? So something like a kitchen sink example with text editor, numeric with currency, numeric with percentage, date picker, boolean editor. TAB navigation between cells with instant enter edit mode, and exit. Escape key for leaving the cell edit. 

Really not liking the bare bones, entry examples provided with the new documentation...

https://www.telerik.com/kendo-react-ui/components/grid/editing/editing-in-cell

Have not been able to migrate renderers completely to the new type of doing stuff on grid.

[Filip]

Hello, Sanja,

While there isn’t an official demo in the documentation for this specific scenario, I’ve adapted the example previously shared by my colleague to incorporate the new `cells` and `rows` props:

https://stackblitz.com/edit/react-fqqw4c3j-qqtmapyl?file=app%2Fapp.jsx

Please give this approach a try and let me know in case this is still not exactly what you are looking for and I will gladly adjust the sample to better fit your needs.

Regards,
Filip

[Sanja Tolo]

Hello Filip,

I have created a CodeSandbox with the old approach and with all of the bells and whistles that we would like to translate to the new approach but we are not able to. 

InCell Editing Grid

So with TAB going to other editable field. Date pickers initial state focus so when we are changing day part it remains selected on that part. Numeric editor with the ability to have currency or percentage format. Boolean editor. We also have dropdown and combobox editors with remote data and debounce. Escape key for exiting field. Enter for entering edit of the field. Arrow keys for going left or right. Save and cancel buttons with immedieate feedback when you change the value. Also values from db have id of number and locally added values have tempId: string.

How can we keep the same functionality and logic while updating to the new versions (12.2) and new approach syntax?

Example you have provided has buggy editing experience, multiple fields in edit mode, not entering edit mode even if the cell is clicked etc...

Hope to hear from you soon with full updated example.

Best regards

[Filip]

Hi, Sanja,

Thank you for the provided example. 

I modified it in order to use the cells and rows props while maintaining the same functionality:

https://codesandbox.io/p/sandbox/festive-feather-kt753k?file=%2Fsrc%2Fnumeric-editor.tsx%3A1%2C1-37%2C1

Please give this approach a try and let me know in case further assistance is needed.

Regards,
Filip

 

[Sanja Tolo]

Hi Filip,

The example you have provided still uses old version of packages instead of the new ones (12.2, 13.0). There is no editMode or editField on grid props on 12.2 or 13.0 package versions. Editing cell does not exitEdit when clicking outside that cell. Also in your example multiple fields are possible to be opened for edit (when clicking add new record from edited field - probably because it does not blur field (exitField) on outside click).

Regards,
Sanja

[Filip]

Hello, Sanja,

Thank you for the clarification. It appears I mistakenly forked the incorrect CodeSandbox environment. My apologies for the error, this is the example I originally intended to share earlier:

https://codesandbox.io/p/devbox/keen-shape-4z49ns?workspaceId=ws_SJefxLfb3wg63G5PEuZirH

Please let me know in case further questions arise or the example above still does not meet your needs and I will gladly assist further.

Regards,
Filip

[Sanja Tolo]

Hi Filip,

Thanks for sharing the link! Unfortunately, I’m not able to access the shared solution. CodeSandbox shows an error saying that Devbox was not found. Could you please share the correct working link here?

Thank you!

[Filip]

Hello, Sanja,

There seems to be an issue with CodeSandbox and the privacy setting, please accept my apologies once again for the faced issue. Here is the same example in Stackblitz which should open now:

https://stackblitz.com/edit/react-wmgwyaco-ewbogowb?file=app%2Fapp.tsx

Please let me know if further issues arise.

Regards,
Filip

[Sanja Tolo]

Hi Filip,

Thanks for moving the example to StackBlitz, as I can open it now. I tested the demo and I’m still seeing several functional regressions compared to the working example I provided (the features worked correctly up until v9.3). Please take your time to investigate, since I spent time preparing the reproducible example and would appreciate a corrected solution.

Problems I see in the StackBlitz example and when applying provided solution to the code:

• Tab navigation: TAB does not move focus field to field as expected.

• Numeric editor: cannot reliably type values, any value (it remains single digit, e.g. 1000 or 50). The value/formatting doesn’t remain consistent (currency / percentage formatting is lost or behaves incorrectly while typing).

• Date editor: when moving between date parts (day / month) and using the arrow keys (ArrowUp/ArrowDown), the editor selects the whole part and does not keep focus on the specific part you were editing. Also, date editor were not even visible until I explicitly assigned width to those grid columns (not a great testable experience).

These behaviors worked correctly in the previous package version (v9.3 and below), so I believe something in the newer package versions in the StackBlitz example is causing regressions.

Could you please share a revised example that addresses the above? No rush, please take the time you need to confirm the fix.

Hope to hear from you soon,

Sanja

[Filip]

Hi, Sanja,

You are correct about the described problems and please accept my apologies. After further inspection it seems that more custom logic is needed in order to handle the described scenarios since this is a rather complex implementation. As for the unreliable value typings, that was due to the way the value was being handled. Here is the modified example with all fixes:

https://stackblitz.com/edit/react-afy37mvf-ejzpt4rg?file=app%2Fapp.tsx

When the date editor is focused and up and down arrows are pressed, only the selected segment is now affected. I also compared the original example you shared with our implementation to verify whether there were any issues with Tab navigation, but I wasn’t able to reproduce the problem. I’ve attached a video showing my testing process. If possible, could you provide more the reproduction steps so I can investigate and resolve the issue further?

Regards,
Filip