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: