防止从 DevExtreme js 数据网格退出编辑模式

Question

对于数据网格，我使用了 DevExtreme 数据网格，内容文本放在 textarea 上，如：

$("#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
  }
});

问题是如果我编辑一个文本区域单元格，如果我按 ENTER 键在该文本区域中添加新行，我将退出编辑模式。

如何防止这种情况？

Answer 1

stopPropagation 方法将对您有所帮助。

只需为您的文本区域添加 keydown 事件处理程序：

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

要查看操作结果，请尝试编辑此 demo 中的 'Position'。

防止从 DevExtreme js 数据网格退出编辑模式

Prevent quiting edit mode from DevExtreme js datagrid

javascript

c#

devextreme