Prevent quiting edit mode from DevExtreme js datagrid

Question

For data grid, I used DevExtreme datagrid and the content text is put on textarea like:

$("#test").dxDataGrid( {
  columns: [
    {
       ...
       customizeText: function(cellInfo) {
         return cellInfo.value.replace(/(?:\r\n|\r|\n)/g, "<br/>");
       },
       editCellTemplate: function(cellElement, cellInfo) {
                  var $input;
                  var numberOfCariage = cellInfo.value.split('\n').length;

                  // if is textarea (by seeing if contains cariage return
                  if (/(?:\r\n|\r|\n)/g.test(cellInfo.value)) {
                     $input = $('<textarea rows="' + numberOfCariage + '" class="dx-texteditor-input" />');
                  } else {
                     $input = $('<input autocomplete="off" class="dx-texteditor-input" spellcheck="false" tabindex="0" name="" role="textbox" style="text-align: left;" type="text" />');
                  }

                  $input.val(cellInfo.value);
                  $(cellElement).append($input);
                  cellInfo.setValue(function () {
                     return $input.val();
                  });
       }
    }
  ],

  editing: {
        mode: "row",
        allowUpdating: true
  }
});

The problem is if I edit a cell which is textarea, if I press ENTER to add new line in that textarea, I was exited from edit mode.

How to prevent this ?

Answer 1

The stopPropagation method will be helpful in your case.

Just add the keydown event handler for your textarea:

$input.on('keydown', function(e) {
    // Check if pressed key is 'Enter'
    if(e.keyCode === 13) {
        e.stopPropagation();
    }
});

To see the result in action try to edit the 'Position' in this demo.