Search code examples
reactjsdatagriddevextreme

How to add save data in local on Data Grid DevExtreme by keyboard Enter?


I want when creating row for the first time. Enter data and when you press Enter it will save the data local on the data grid. Then create new row

I handle the event enter event. But then it didn't save my previously entered data.


Solution

  • There is a timing problem. The text editor inside the data grid cell does not save the input to the data source if the saveEditData method is called inside the onKeyDown event. The method addRow() should be called after text editor saved the input to the data source.

    I would prefer using the onSaved event to add a new row after using the enter key.

    Example:

    class MyComponent {
    
        requestNewRow = false;
    
        handleOnEnterKey(e) {
            if (e.event.originalEvent.key === 'Enter') {
                this.requestNewRow = true;
            }
        }
    
        handleOnSaved(e) {
            if (this.requestNewRow) {
                this.requestNewRow = false;
                e.component.addRow();
            }
        }
    }