Disable Enter key to move cell when editing in batch mode

Question

I have created a grid view to view and edit data (see below code). And now I want to do the 2 things:disable 'Enter' key when the cell is editing because one column('description') need to be multi-line ﻿﻿save the changes made in 'description' column when pressing 'tab' key (currently it will only save when I double other cell)﻿﻿code:new ej.grids.Grid({            allowReordering: true,            allowFiltering: false,            allowSorting: false,            allowPaging: true,            allowTextWrap: true,            allowKeyboardNavigation: false,            pageSettings: {pageSize: 10},            selectionSettings: {mode: 'Row'},            toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],            editSettings: {                showDeleteConfirmDialog: true,                allowEditing: true,                allowAdding: true,                allowDeleting: true,                mode: 'Batch'            },            dataSource: new ej.data.DataManager({                headers: [{'X-CSRFToken': getCookie('csrftoken')}],                url: "some_url",                insertUrl: "

some_url

",                updateUrl: "

some_url

",                removeUrl: "

some_url

",                batchUrl: "

some_url

",                adaptor: new ej.data.WebMethodAdaptor,            }),            columns: [                {field: 'id', headerText: 'ID', isPrimaryKey: true, isIdentity: true, lockColumn: true, visible: false},                {field: 'item', headerText: 'Item', type: "String"},                {                    field: 'description',                    headerText: 'Description',                    type: "String",                    height: 100,                    edit: {                        create: function(){                            elem = document.createElement('textarea');                            elem.setAttribute("style", "height: 250px")                            return elem;                        },                        read: function() {                            return textarea_obj.value;                        },                        destroy: function() {                            textarea_obj.destroy();                        },                        write: function(args){                            textarea_obj = new ej.inputs.TextBox({                                value: args.rowData[args.column.field],                            });                            textarea_obj.appendTo(elem);                        }                    }                },                {                    field: 'amount',                    headerText: 'Amount',                    editType: 'numericedit',                    format: 'C2',                    edit: {params: {decimals: 2}}                },                {                    field: 'rate_a',                    headerText: 'Insured Rate',                    editType: 'numericedit',                    format: 'P2',                    edit: {params: {decimals: 2}}                },                {field: 'amount_a', headerText: 'Amount A', format: 'C2', allowEditing: false},                {                    field: 'rate_b',                    headerText: 'Insurer Rate',                    editType: 'numericedit',                    format: 'P2',                    edit: {params: {decimals: 2}}                },                {field: 'amount_b', headerText: 'Amount B', format: 'C2', allowEditing: false},            ],            aggregates: [{                columns: [{                    type: 'Sum',                    field: 'amount',                    format: 'C2',                    footerTemplate: 'Sum: ${Sum}'                },                    {                        type: 'Sum',                        field: 'amount_a',                        format: 'C2',                        footerTemplate: 'Sum: ${Sum}'                    },                    {                        type: 'Sum',                        field: 'amount_b',                        format: 'C2',                        footerTemplate: 'Sum: ${Sum}'                    }]            }],            actionComplete: function (args) {                if (args.requestType == "save") {                    this.refresh();                }                if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {                    let dialog = args.dialog;                    dialog.showCloseIcon = false;                    dialog.height = 500;                    // change the header of the dialog                    dialog.header = args.requestType === 'beginEdit' ? 'Edit Record' : 'New Record';                }            }        }, "#gvLine");

Balaji Sekar · Accepted Answer

Hi Yee Yat Sing, 

Thanks for contacting the Syncfusion support. 

Query: Disable Enter key to move cell when editing in batch mode 

Based on your requirement, you want to save the current edited cell and don’t want to edit the below cell while pressing Enter key on Batch edit. 

You can remove the default Enter key functionality on batch edit by using following code in the cellEdit event. In the cellSaved event, we restored the Enter key functionality again. 

cellEdit: https://ej2.syncfusion.com/angular/documentation/api/grid/#celledit 
cellSaved: https://ej2.syncfusion.com/angular/documentation/api/grid/#cellsaved 






  cellEdit(args) { 
    (this.grid as any).keyConfigs.enter = ''; // remove the ENTER Key functionality 
  } 
  cellSaved(args) { 
    (this.grid as any).keyConfigs.enter = 'enter'; // restore the ENTER Key functionality 
  } 


When you pressing Enter key in Grid, the keyPressed event will be triggered. In that event, you can prevent the focusout action and save the change while Tab key press. 

keyPressed: https://ej2.syncfusion.com/documentation/api/grid/#keypressed 





  keyPressed(args) { 
    if (args.key == 'Enter' && this.grid.isEdit) { 
      args.cancel = true; 
    } 
  } 
 if (args.key == 'Tab' && this.isEdit) { 
        args.cancel = true; 
      } 


Sample:  https://stackblitz.com/edit/jyzrtr?file=index.js 

Please get back to us if you need further assistance with this. 

Regards, 
Balaji Sekar.

Yee Yat Sing · Answer

Hi

Balaji Sekar,Thank you for you help!I found the 2nd method did solve my problem and below is the exact code I used, hope this code will help someone else.keyPressed(args) {                {#console.log(this)#}                if (args.key == 'Enter' && this.isEdit) {                    args.cancel = true;                }                if (args.key == 'Tab' && this.isEdit) {                    args.cancel = true;                }            }

Sujith Kumar Rajkumar · Answer

Hi Yee Yat Sing, 
 
Thanks for the update and sharing your code snippet here. We are glad to hear that your query has been resolved. 
 
Regards, 
Sujith R