Introduction:
In this blog I am sharing my experiences on Kendo Spreadsheet. It will demonstrate how to delete rows from a kendo spreadsheet when it contains read only columns.
Prerequisite:
A user requires good knowledge of JavaScript and JQuery.
For creating Kendo Spreadsheet control refer my previous blog, link given below.
https://www.toshalinfotech.com/Blogs/ID/136/Kendo-Spreadsheet-In-Web-Form-with-Sorting-Columns-For-Multiple-Fields-Using-AngularJS
Write below code in Spreadsheet.js file:
1.Code to make column readonly:
var sheet = $("#spreadsheet").data("kendoSpreadsheet");
sheet = sheet.activeSheet();
sheet.range('A2:A7').enable(false);
It will make column A readonly in 6 rows starting from index 2 to index 7. A range () function represents one/more regions of cells in a given sheet.
Here it is used to select column Id from 6 rows.
2.Code to delete readonly rows:
$(".k-spreadsheet-row-header-context-menu.k-item:nth-child(5)").on('click', function (e) {
var selection = sheet.selection();
var rowsToBeDeleted = [];
var shouldManuallyDelete = false;
selection.forEachCell(function (row, col, cell) {
var enabled = cell.enable;
if (rowsToBeDeleted.indexOf(row) < 0) {
rowsToBeDeleted.push(row);
}
if (!shouldManuallyDelete && enabled === false) {
shouldManuallyDelete = true;
}
});
if (shouldManuallyDelete) {
selection.enable(true);
for (var i = rowsToBeDeleted.length; i > 0; i--) {
sheet.deleteRow(rowsToBeDeleted[i - 1]);
}
}
});
});
In above code "k-spreadsheet-row-header-context-menu" class is use to select context menu and "k-item:nth-child(5)" is use to select delete menu from context menu.
In this code while clicking on delete menu I have enabled the selected row first then I have performed delete operation on that row.
Output:
