DataGrid for DevExtreme - How to implement selecting multiple cells with a keyboard for batch editing

This example illustrates the use of the CTRL key to edit multiple cell values simultaneously. When a user changes editor text in one location, modifications are applied to all selected cells.

Implementation Details

1. Create an array to store selected cells.

2. Implement the onCellClick event handler to add a selected cell to the array when the Ctrl key is held. Otherwise, clear the array:

onCellClick(e) {
  if (e.event.ctrlKey) {
    editCells.push(`${e.rowIndex}:${e.columnIndex}`);
  } else if (editCells.length) {
    editCells = [];
    e.component.repaint();
  }
},

3. Implement the onCellPrepared event handler to change the style of the selected cells:

onCellPrepared(e) {
  if (e.rowType === 'data' && editCells.includes(`${e.rowIndex}:${e.columnIndex}`)) {
    e.cellElement.css('background-color', 'lightblue');
  }
},

4. Implement the onEditorPreparing event handler to specify a value for all selected cells when a user edits one of them:

onEditorPreparing(e) {
  const grid = e.component;
  if (e.parentType === 'dataRow') {
    const oldOnValueChanged = e.editorOptions.onValueChanged;
    e.editorOptions.onValueChanged = function onValueChanged(args) {
      oldOnValueChanged.apply(this, [args]);
      editCells.forEach((cell) => {
        const [rowIndex, columnIndex] = cell.split(':').map(Number);
        grid.cellValue(rowIndex, columnIndex, args.value);
      });
    };
  }
},

5. To reset the selection when changes are saved or canceled, handle the onSaving and onEditCanceled events:

onSaving() {
  editCells = [];
},
onEditCanceled() {
  editCells = [];
},

Files to Review

• jQuery
  • index.js
• Angular
  • app.component.html
  • app.component.ts
• Vue
  • HomeContent.vue
• React
  • App.tsx
• ASP.NET Core
  • Index.cshtml

Documentation

• Getting Started with DataGrid

• DataGrid - API Reference

More Examples

• DataGrid for DevExtreme - Display tooltip for data cells
• DataGrid for DevExtreme - How to allow users select multiple cells

Does This Example Address Your Development Requirements/Objectives?

(you will be redirected to DevExpress.com to submit your response)