Can I use the Spreadsheet module to import and export xlsx files without the UI?

[Sergey]

I've been using the SheetJS CE library for importing and exporting XLSX files.

However the public library is having some issues (issue 1 and issue 2 [amongst others...]) and we want to move away from it.

I see that Kendo has a fairly new component called "Spreadsheet" which appears to be able to do what I need.
However I'm not sure the API features I'm interested in are public, or I'm having trouble finding them.

If this is already possible can someone point me to it? If not, then I'm asking the Kendo Angular team to add the feature (to the public API).

Here's what I need to do:

1. User uploads an xlsx file via a regular Kendo FileSelector
2. In the code I need to be able to see and manipulate the data as JSON, navigate sheets, rows and columns
3. Load it into a Kendo grid for viewing (this is more of an example, not really something I can't figure out what to do)

and

1. Given a "properly formed/typed" JSON object (e.g. Kendo Grid data that the user manipulated)
   
2. Be able to export (allow user to download) the data as an xlsx file
   

Thanks!

[Georgi]

Hi Sergey,

Thank you very much for the details provided.

Indeed, the Kendo UI for Angular Spreadsheet component could be used to achieve the desired implementation. The developer can upload the desired file in the Kendo Ui for Angular FileSelect component, handle its select event, and bind the desired file to the Spreadsheet (use the fromFile() method which is part of the Kendo UI for React API, but can be also used in our Spreadsheet component):

public onFileSelectEvent(ev: SelectEvent) {
    let file = ev.files[0].rawFile;
    this.spreadsheet.spreadsheetWidget.fromFile(file);

    setTimeout(() => {
      this.spreadsheet.excelImport.emit(
        this.spreadsheet.spreadsheetWidget.toJSON()
      );
    }, 1000);

    // setTimeout(() => {
    //   this.processData(
    //     this.spreadsheet.spreadsheetWidget.toJSON().sheets[0].rows
    //   );
    // }, 1000);
}

It is important to mention that in order to get the newly bound to the component file, the developer should either use a setTimeout or handle the second time the excelImport event of the Spreadsheet is triggered:

public onImport(ev) {
    console.log(ev, 'event');
    if (ev.sender) {
      console.log(2222);
    } else {
      this.processData(ev.sheets[0].rows);
    }
}

In order to hide the Spreadsheet from the implementation, I am afraid that the developer would need to use some custom CSS (set display property to none) since the component cannot be modified only from the .ts file. 

To better illustrate the suggested approach, I am sending you a StackBlitz demo that implements:

https://stackblitz.com/edit/angular-cnr8g3

Furthermore, the demo showcases a possible approach for visualizing the data inside a Kendo UI for Angular Grid and exporting it to Excel using the built-in feature of the component.

I hope the provided information helps. Please let me know if I am missing out on something.

Regards,
Georgi
Progress Telerik