How to prevent enter key event on command column input of Grid component inside Dialog component in React Grid

Question

Hi,I have an GridComponent inside DialogComponent. I use command column edit mode to update row data. But if I hit Enter key when the input element of row is focused, it redirect the page to another page.I attached an example application so you can reproduce it. Reproduce steps:- npm install- npm start- Click "Toggle Dialog" button.- Click edit icon of any row of Grid.- When the name field is focused, press Enter key- The route will be changed to http://localhost:3000/?name=Group1&show=trueAttachment: ej2test_7d87c7c6.zip

Sujith Kumar Rajkumar · Accepted Answer

Hi Roman, 

Greetings from Syncfusion support. 

We checked the reported problem in the sample that you have provided and the problem was occurring because of not specifying a primary key column in the Grid. The Editing feature requires a primary key column for the CRUD operations. To define primary key, set columns.isPrimaryKey to true in particular column. More details on this can be checked in the below help documentation link, 
 
Documentation: https://ej2.syncfusion.com/react/documentation/grid/edit/  

When the Grid is rendered inside a Dialog, the enter key will not save the Grid record while in edit mode as the key is configured in the Dialog control so if you wish to save the records on enter key press then you can achieve it by calling the Grid’s endEdit method in the keypress event bound to the Grid. This is demonstrated in the below code snippet, 





// Grid’s load event handler 
public onLoad() { 
        this.gridInstance.element.addEventListener('keypress', this.onKeyPress.bind(this)); 
} 
     
// Keypress event handler 
public onKeyPress(args: any) { 
         // Check the key and if grid is in edit state 
        if (args.key === "Enter" && this.gridInstance.isEdit) { 
            this.gridInstance.endEdit(); 
        } 
} 

We have modified the sample provided based on this for your reference. You can download it from the following link, 

Sample: https://www.syncfusion.com/downloads/support/forum/156066/ze/ej2-test-modified-1311981037  

API links: https://ej2.syncfusion.com/react/documentation/api/grid/#endedit 
                https://ej2.syncfusion.com/react/documentation/api/grid/#load 

Let us know if you have any concerns. 

Regards, 
Sujith R