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

1. Hide a part of the rows initially using the hideRow method.
2. Handle the insertRow event and check the count of the currently visible rows and the total count of rows.
3. Utilize the fromJSON and toJSON methods to accommodate all the records.
4. 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>