Dynamically Increase the Row Count in the Spreadsheet
Environment
Product | Progress® Kendo UI® Spreadsheet for jQuery |
Description
I want to insert a new row in the Spreadsheet. Currently, the Kendo UI Spreadsheet does not allow inserting a new row if there is content entered in the last row. How can I allow the user to insert a new row in the Spreadsheet and exceed the default maximum?
Solution
- Hide a part of the rows initially using the
hideRow
method. - Handle the
insertRow
event and check the count of the currently visible rows and the total count of rows. - Utilize the
fromJSON
andtoJSON
methods to accommodate all the records. - Use the
batch
method for better performance.
<div id="spreadsheet" style="width: 100%;"></div>
<script>
function hideRows(startIndex) {
let spr = $("#spreadsheet").data("kendoSpreadsheet");
let sheet = spr.activeSheet();
let totalRows = sheet._rows._count;
sheet.batch(function() {
for(let i = startIndex; i < totalRows; i++) {
sheet.hideRow(i);
}
});
}
$("#spreadsheet").kendoSpreadsheet({
rows: 10,
insertRow: function(e) {
let spreadsheet = e.sender;
let numberOfVisibleRows = spreadsheet.element.find(".k-spreadsheet-row-header>div").length;
let numberOfTotalRows = e.sheet._rows._count;
if (numberOfVisibleRows + 5 >= numberOfTotalRows) {
setTimeout(() => {
let workbook = spreadsheet.toJSON();
workbook.rows = spreadsheet._workbook.options.rows * 2;
spreadsheet.fromJSON(workbook);
hideRows(numberOfVisibleRows + 5);
}, 1000);
}
}
});
hideRows(5);
</script>