Right-clicking a spreadsheet column, it is possible to Hide the column.

However, how can the column be unhidden?

Using scroll tabs arrows causes page reload on spreadsheet. This is the two arrows at the bottom right on the spreadsheet control when tabs go off the screen.

This only seems to happen when the spreadsheet is between <form></form> elements. Take these out and it works as expected.

See this dojo: https://dojo.telerik.com/HXscWjdD/2

Did a setting change? This did not happen in earlier versions.

I have a kendospreadsheet with a column filter on every column.

After the user has set filters, I want only to get visible rows.

How is this possible?

Found resources:

https://docs.telerik.com/kendo-ui/knowledge-base/spreadsheet-hidden-rows-count-on-filtering

Using KendoUI latest version, the exportToExcel function in Spreadsheet seems broken.

• Using version 2024.4.1112
• Dojo to reproduce: https://dojo.telerik.com/BMBegbqh (Dojo was linked in docs at https://docs.telerik.com/kendo-ui/api/javascript/ui/spreadsheet/methods/saveasexcel)

Console shows error:

Hi, complicated question regarding the dynamic sizing of JSON data blocks into dataSources inserted into a spreadsheet.

I was getting large dataSources (blocks of data in JSON format) from our responses from API requests, so I bumped up the global row and column sizes for the spreadsheet component:


Problem solved!!! However, I found that this change significantly decreases the performance of imports into the spreadsheet control:

$("#spreadsheet").kendoSpreadsheet({
  rows: 300,
  columns: 20000
});

A little research confirmed this problem with importing an excel spreadsheet into the Kendo spreadsheet component:

Memory Usage:
Initializing with a large dataset consumes a lot of memory. When you import an Excel file, the spreadsheet control needs additional memory to process and render the imported data. This can lead to memory exhaustion and slow performance.


Rendering Overhead:
The spreadsheet control has to render all the rows and columns, even if they are empty. This increases the rendering overhead, making the control less responsive when importing data.


Data Processing:
Importing an Excel file involves:

(1) parsing the file,

(2) converting it to the spreadsheet's internal format

(3) And then rendering it.

With a large number of pre-initialized rows and columns, this process becomes more complex and time-consuming.

Garbage Collection:
The large initial dataset can lead to frequent garbage collection cycles, which can further slowdown the import process. Garbage collection is triggered more often to manage the high memory usage, impacting overall performance. (this is where I noticed frequent garbage collection calls in the browser's Dev Tool Performance page) ...there is probably other stuff hampering the import also as mentioned above.

$("#spreadsheet").kendoSpreadsheet({
 //No explicit settings for rows or columns. Default at 200 rows, and 50 columns.
});

Another workaround found on CoPilot suggested doing this on declaration and initialization of the spreadsheet component:

  // Initialize with a smaller dataset
$("#spreadsheet").kendoSpreadsheet({
  sheets: [{
      name: "Sheet1",
      rows: 100,
      columns: 50
  }]
});

But here is what happens when I do that:

I have better results with this:
SIZE INIT. KENDO SPREADSHEET | Kendo UI Dojo

But there is space below the rows for some reason....that's ok but I know somebody won't like it. :)

So no to the latter approach, and even with an additional resize the grid does not render; the rows and columns do not appear, and the creator and user is stuck with that little blue line.

My workaround was to use the default size of 200 rows and 50 columns.... which significantly improves the loading time of the Excel spreadsheet. This also allows the excel importer topreserve the size of the spreadsheet even if it exceeds the global rows and columns configuration options.

However, when I try to receive an API response message and put it into a kendo dataSource then insert that dataSource into a sheet within the sheet's settings/configurations option:

spreadsheet.fromJSON({
   sheets: [{ name: data.reportName, rows: 19000, column: 65, dataSource: { data: data.MyJsonData, schema: { model: reportModel } } }] //initialize the sheet property with the first report sheet.
            });

The global rows and columns size will override the dataSource size and cut it off at a maximum of 200 rows and 50 columns. hmmm.

(Q) The question is ... how to handle the dynamic sizing of incoming JSON blocks correctly so that the:
 (1)  Initialized first empty grid renders properly (not a problem if you don't initialize an initial sheet with rows and columns).
 (2) The default global values for row and columns are overridden when you insert the sheet coming from the API.

(?)

QUESTION: What is the recommended way of handling this? I have no control or say whether the user can exceed the limit of the default rows and columns configuration options.

Use Case:

I have n row and m columns.

columns m is sum of 1 to (m-1) columns

row n is sum of 1 to (n-1) row 

basically m column and nth row is created with formulas

Issue:

After spreadsheet load when I'm trying to update even one cell it takes ~5-10sec to trigger change event depending on size of data

Sample:

Attaching a fiddler link. Here after spreadsheet is loaded , edit one cell and click out.

https://jsfiddle.net/u2kz7cjb/

Hi,

Having issues when attempting to parse the incoming date durring the onImport event in a Kendo Spreadsheet control. We wanted to rename the reports to the expected names if the user imports a spreadsheet with different names.

So, I came up with a function to do this, however it seems like the first sheet, when comprised of Excel references chokes. The below works fine if there are no references to other cells on other sheets.

function resetToOrigSheetNames() {
    var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");

    var data = spreadsheet.toJSON();
    var json = JSON.stringify(data, null, 2);//<--[OOF] Uncaught RangeError: Invalid string length! Chokes on a sheet with references.
    var ssData = JSON.parse(json);
    
    var importData = "";
    var sheetcount = ssData.sheets.length;
    var sheets = spreadsheet.sheets();

    let listData = [];
    listData = _view.get("currentLayoutDataList"); //We will use this later for sheet names etc...


    //First load the Sheet types:
    let i = 0;
    $.each(listData, function (index, value) {

        if (i < sheetcount && (value.itemType === "REPORT" || value.itemType === "CUSTOM")) {

            spreadsheet.renameSheet(spreadsheet.sheets()[i], defineName(value));
            console.log("NAME", spreadsheet.sheets()[i]._name );
            i++;
        }

       
    });
    spreadsheet.refresh();
}

I have the above being called in the   excelImport event handler.

 It's throwing an exception on the JSON.stringify():

Which according to JavaScript documentation means the string being created… is too big. I use the below code all over the application for different things:

    var data = spreadsheet.toJSON();

    var json = JSON.stringify(data, null, 2);

    var ssData = JSON.parse(json);

Was wondering if there was a way to import the actual values of the referenced cells and not the references?

Thanks!
George

Just to clarify is it still the case that graphs and charts are not embeddable into the spreadsheet control:

Spreadsheet with a chart? in Kendo UI for jQuery | Telerik Forums

This was 2016, I couldn't find anything in the documentation that it was added. So assuming this is still the case.

Is it still the case the charts and graphs have to be part of a separate control? like a Kendo UI Chart?

Thanks,

George