Hi,
I have problems showing the grid results using functional components. There are no problems with grid when the component is implement with class component. Is there any specific thing which have to take care with IgrGrid when it is implemented with functional components.
The data is loaded into the Grid component and it is in the correct format. But it is not rendering at all.
Also the logic in the functional component version seems to be equal to the one in class component version.
Thanks you,
Tihomir
Hi Tihomir,
There are a few demos in our documentation, where functional components are used and the IgrGrid is rendering as expected. The React Grid Context Menu is one for example. Please, check it out, open it in CodeSandbox and compare any discrepancies between it and your own app that may be preventing the grid from rendering properly.
Additionally, I am wondering if there are any errors in the console when running the app?
Finally, if you are still having difficulties getting started with the IgrGrid in a functional React component, please, provide additional details on your configuraiton, such as specific React and Ignite UI for React versions, what grid features are used, etc. Ideally, you could try and reproduce the behavior in an isolated sample, containing only the minimum required code, so that we can further look into it.
Please, keep me posted on your progress.
Best regards,Bozhidara PachilovaSoftware Developer
Hi Bozhidara, I am a colleague of Tihomir. Actually, the function component has some problem in visualizing the grid inside a pane (We are using split panes) . The set-up is same as for a class component, where the grid is visualized.
I was looking in that example: React Dock Manager | Layout Controls | Infragistics
There are no errors.
All modules are imported and
We use useEffect() to mount the panes and data is passed correctly and referred to the grid, but not visualized. That's how we nested the grid (instead of dots we have more grid columns) exactly the same return is used for the class component, where it visualize the grid:
That is what we see:
And here you can see the console, where Fetched data: is to show that we've got the data successfully, Grid reference set: shows that the data is referenced correctly (
):