Hello, I am currently working on a react project using Data Grids and I am getting the same error when I scroll down the page(not the data grid). I have 2 accordion displaying them and only happens when I open and scroll on the 2nd accordion. The error results to broken page if I continue scrolling. The error only happens if I open the 2nd accordion and then scroll.
I have searched solutions over the net and most of the answer is that it happens when a data returns a null value. The error only occurs when I scroll but the data is displayed correctly. I am using states to assign the data from my API and I am using that state as the data prop for my data grid. I don't think the state data is updated to null when I scroll since I am not using the prop onScroll in my data Grid.
1 Answer, 1 is accepted
Hi Roldan,
It will be difficult to determine what is the exact cause of the issue from the description alone, so could you please try to replicate the error in stackblitz for example, so we can debug it on our side? Here is a sample Grid that you can use as a starting point:
Additionally, you can inspect the browser`s console to see if you can find more information about the error and where exactly it is being throw. Also, for testing purposes only you can try to temporarily remove the Grid in the first accordion item and see if that will make any difference. Depending on the component that you are using for the accordion, you might need to ensure that each item`s content and logic is encapsulated (or go to the opposite direction and ensure that the content of all accordion items is rendered all the time).
As for why the error is observed only on scrolling, my assumption would be that something is forcing the re-mounting of the items content, but without additional information of the used component it will impossible to pinpoint any particular cause of the issue.
Regards,
Konstantin Dikov
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
Hi Konstantin,
Thank you for taking time to answer my questions. I tried recreating the scenario but was unable to replicate the error. The difference between that and the one I have implemented is that I am calling an API to be used as the data. I am also using redux states to assign the data. I commented out that part.
https://stackblitz.com/edit/react-qw1hmd-zpzrgw?file=app/MainFiles/main1.jsx
I have went through the example, but I have to say that I do not see anything in particular that could be causing the issue in question. One thing that I could suggest is that you try the approach demonstrated in the following example for loading the data dynamically:
You will notice that instead of handling skip, total, take, etc. properties of the Grid, you can use the DataState and DataResult. Note that the DataResult, which is bound to the Grid is an object with "data" and "total". With your current implementation, if for some reason you are setting an object to the "data" property of the Grid instead of an array with the items, the Grid will search for a "data" property within that object, which could lead to the error in question (but this is just a wild guess):
- https://www.telerik.com/kendo-react-ui/components/grid/api/GridProps/#toc-data
- https://www.telerik.com/kendo-react-ui/components/dataquery/api/DataResult/
Hope this helps.