This example illustrates how to allow end used to select more than one cell for editing by holding the CTRL key. Then, when the user changes the editor text, the same text will be entered to all selected cells.
It is possible to implement this scenario by performing the following steps:
Create an array to store selected cells:
[JavaScript]
var editCells = [];
Then, handle the onCellClick event to add the selected cell to the array when the Ctrl key is held or clear the array if it is not:
[JavaScript]
onCellClick: function(e){if(e.jQueryEvent.ctrlKey){
editCells.push(e.rowIndex + ":" + e.columnIndex);}elseif(editCells.length){
editCells = [];
e.component.repaint();}},
The onCellPrepared event is handled to change the style of the selected row:
[JavaScript]
onCellPrepared: function(e){if(e.rowType === "data"&& $.inArray(e.rowIndex + ":" + e.columnIndex, editCells)>= 0){
e.cellElement.css("background-color", "lightblue");}},
After that, handle the onEditorPreparing event to set the text value for all selected cells when a user edits the last cell:
[JavaScript]
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);}}}},
To reset the selection when the Save or Cancel button is clicked, use the onContentReady event:
[JavaScript]
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 = [];});}