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.
-
Create an array to store selected cells.
-
Implement the onCellClick event handler to add a selected cell to the array when the Ctrl key is held. Otherwise, clear the array:
onCellClick: function (e) {
if (e.jQueryEvent.ctrlKey) {
editCells.push(e.rowIndex + ":" + e.columnIndex);
}
else if (editCells.length) {
editCells = [];
e.component.repaint();
}
},- Implement the onCellPrepared event handler to change the style of the selected row:
onCellPrepared: function (e) {
if (e.rowType === "data" && $.inArray(e.rowIndex + ":" + e.columnIndex, editCells) >= 0) {
e.cellElement.css("background-color", "lightblue");
}
},- Implement the onEditorPreparing event handler to specify a text value for all selected cells when a user edits the last cell:
onEditorPreparing: function (e) {
var grid = e.component;
if (e.parentType === "dataRow") {
var oldOnValueChanged = e.editorOptions.onValueChanged;
e.editorOptions.onValueChanged = function (e) {
oldOnValueChanged.apply(this, arguments);
for (var i = 0; i < editCells.length; i++) {
var rowIndex = Number(editCells[i].split(":")[0]);
var columnIndex = Number(editCells[i].split(":")[1]);
grid.cellValue(rowIndex, columnIndex, e.value);
}
}
}
},5.To reset the selection when the Save or Cancel buttons are clicked, use the onContentReady event handler:
onContentReady: function (e) {
e.element.find(".dx-datagrid-save-button").click(function (e) {
if (editCells.length)
editCells = [];
});
e.element.find(".dx-datagrid-cancel-button ").click(function (e) {
if (editCells.length)
editCells = [];
});
}