Is it possible to import Excel data from a file and display it in the Spreadsheet component? I've looked at the existing examples, but they seem to focus on importing and exporting from JSON or exporting to Excel. I don't see any examples that import from Excel. And I don't see how to convert from an Excel file to that JSON format.
Also, what format is the JSON format displayed in the examples? I tried using a couple of other tools I found, and they use different formats for JSON when converting data from Excel.
Thank you.
1 Answer, 1 is accepted
Hi, Brad,
Thanks a lot for the shared feedback. You can load an Excel file in the Spreadsheet by using its fromFile method that expects a `Blob` or a `File` object. In the example below, you can see how to load a file Dropped over a drag-and-drop-upload zone directly in the Spreadsheet.
The same approach can be used to upload a file programatically by importing the file from the remote server and then adding it to the `fromFile` method:
spreadsheet.current.fromFile(file);
I hope this helps, but please let me know if you have any further questions on this matter.
Regards,
Vessy
Progress Telerik
Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!
Rank 1
Great, that's very helpful. Are snippets like these collected anywhere so I can just look through some examples?
The next thing I'm trying to do is see the list of sheets. I'm able to correctly load the spreadsheet and display it. But if I try to look at spreadsheetRef.current.sheets(), it's an empty array, even though I have three sheets. I'm wondering if I need to wait for some kind of event or refresh to occur first? I don't see any event that triggers on file import. I see an example that works on button click, but I want to make a change to the spreadsheet right after loading a file.
Thanks,
Brad Larsen
Thanks a lot for the update, Brad. All available samples can be found in our documentation, I have logged an item for adding this one as well (we constantly try to cover more useful scenarios).
As for the accessing of the sheets, can you elaborate on the exact moment in which you are referring them? I tested the same code both on the `onAdd` event handler and on a custom button click (check the console) but in both scenarios the correct sheets are returned at my end. You can test it here:
Rank 1
Interesting. You're saying the log in the OnAdd is working? When I try your link, that shows the problem. Only thing I changed was the log statements to get a count and add a label. https://stackblitz.com/edit/react-8jwcbr-qebawl?file=app%2Fmain.jsx%3AL23
onAdd: 0:
getSheets: 3: [object Object],[object Object],[object Object]
My goal is to make everything readonly after I load the excel file. It works fine if I wait and do it on button click, but I want to do it immediately after the excel file is imported.
You are right, Brad. The OnAdd event of the Upload component is triggered when the file is chosen from the file system, but it is still not loaded in the Spreadsheet. The earliest moment when you can access the sheets count in this scenario seems to be the ExcelImport event:
https://stackblitz.com/edit/react-8jwcbr-edynbq?file=app%2Fmain.jsx