Hi,
We have an editable grid with multiple different editable field types outside of the basic TextInput including date fields, Combobox and multiselect. One requirement is to have the Enter key add a new row to the grid from the field in the last column - no mouse involvement, only keyboard navigation. With a field type of Text Input we can successfully implement with the onKeypress event. How can this event be implemented on the other field types that may be present as the editable field in the last column?
Example stackblitz here: https://stackblitz.com/edit/react-cw51ay-yswpbg?file=app%2Fmain.jsx
1 Answer, 1 is accepted
Hi Erin,
Getting reference to the input element of the editor or its wrapping element and handling the "keypress" or "keydown" event is the correct way for achieving the desired result. However, retrieving the reference for the editors might not be the most clean solution and I would suggest that you wrap the editor in a SPAN or DIV element and handle the key event for that wrapping element instead:
<div onKeyDown={this.keyDown}>
<YourEditor/>
</div.Hope this helps.
Regards,
Konstantin Dikov
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.