Hi,
I have several problems with spreadseet control in REACT.
1) Control has trouble working in other cultures. I bypassed this problem by using default (en-US) culture.
<IntlProvider locale={"en-US"}>
<Spreadsheet
ref={spreadsheet}
style={{
width: "100%"
}}
/>
</IntlProvider>
2) After loading xlsx i revive error:
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'suspendChanges')
at loadSheets (index-esm.js:25621:1)
at readWorkbook (index-esm.js:25609:1)
3) No matter how I use the control I always get errors when scrolling
index-esm.js:23212 Uncaught TypeError: Cannot read properties of null (reading 'render')
at View.render (index-esm.js:23212:1)
at Controller.onScroll (index-esm.js:10985:1)
Summary:
As far as point 1 is not important to me. While 2 and 3 make it impossible to use the control. The strangest thing is that the Excel file loads and displays correctly....
I use:
- "@progress/kendo-react-spreadsheet": "^6.0.2",
- typescript
I would ask for any hint as to what could be wrong
Ernest
1 Answer, 1 is accepted
Hello Ernest,
We already have logged issue for problems related with the IntlProvider and the Spreadsheet:
I have included this ticket number as well in the issue, because it seems to be related with the IntlProvider.
As a side note, could you please elaborate if you are observing those errors with all "xlsx" files and if you are able to observe them without using IntlProvider? If the errors are reproduced with a specific file, if possible, please attached it, so we can test it locally.
Looking forward to your reply.
Regards,
Konstantin Dikov
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
Unfortunately, this is not associated with IntlProvider. I tested without it and the render error still appears (Problem #3). Let me just add that I don't need to load the file at all. It is enough that I use scroll on a clean sheet.
<Spreadsheet
ref={spreadsheet}
style={{
width: "100%"
}}
/>Such Code without anything also causes an error when scrolling.
From what I have tested, problem #2 occurs to me when i load data from blob. Example:
fetch(`data:${contentType};base64,${fileContent}`).then(resp => { return resp.blob(); }).then(blob => {
spreadsheet.current!.fromFile(blob);
});I emphasize that despite these errors I can see the file content correctly :)
Hi Ernest,
We have tested the following example and it works as expected without any errors:
Could you please try updating to version 6.1.0 and see if the errors will be resolved.
If the issue persists, please try to modify the stackblitz example to better match your configuration and reproduce the errors, so we can test and debug it locally.
Looking forward to your reply.
Rank 1
Ok, I managed to find a solution to the problem/cause of these errors. Application running locally in Strict mode :
This:
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<React.StrictMode>
<Provider store={store}>
<RouterProvider router={router} />
</Provider>
</React.StrictMode>
);I changed into this:
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<Provider store={store}>
<RouterProvider router={router} />
</Provider>
);
Hi Ernest,
Thank you for the additional information.
After adding the StrictMode I was able to observe the issues in question.
Since we aim to support StrictMode, I have logged an issue for both problems in our public repository where you can follow its progress: