I am trying to use your react grid with data passed in as props with filtering and sorting. I am following this article as a guide - https://www.telerik.com/blogs/sorting-filtering-grouping-kendoreact-data-grid. My issue is that when I pass the data in via props, it does not initially appear. If I actually try filtering, the data will show up. My issue is here -
const [resultState, setResultState] = React.useState(
process(props.gridData, initialDataState)
);
This does not seem to work on the initial rendering of the component. Again, when I start filtering, everything shows up properly. I have read that using props to set an initial state is considered an anti-pattern. Thus, I know something is off here.
Almost all of your examples use data from a json file. However, I have retrieved my data from a rest endpoint and I'm passing it in to my grid component via props.
If I simply use the grid without filtering and sorting with the data passed in as props, everything works fine. However, I would like to use your filtering and sorting capabilities.
Please help
Thanks
2 Answers, 1 is accepted
Hi, Sunil,
This happens when the data in not fully loaded yet which first returns an empty array as props. Additionally, when the data is fully fetched from the API, the Grid is not updated with the Grid data.
As a solution in React, you can use the `useEffect` hook and set its dependency array to the `props`. This causes the `useEffect` hook to fire each time the data is updated in the props.
For convenience, I updated the example of the blog post to fetch data from the an API in `App.js` that is then passed to `KendoGrid`. In `KendoGrid`, in its `useEffect` hook, I am setting the `resultState` with the data coming from the props:
You can also show a loading indicator until the data is available - this is demonstrated in the following KB article:
I hope this helps, but please let me know if you have any further questions.
Regards,
Wissam
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
Iron
