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 (
):
Hi Ivaylo,
Thank you for clarifying that your app includes a DockManager along with an IgrGrid within its panes.
Your configuration sounds correct and in an effort to test this I created this sample in CodeSandbox, where the dock manager is rendered within a functional React component, and additionally an IgrGrid is placed in one of its panes contents. In this sample, all elements are rendered as expected.
This indicates that there is most likely something missing in your component. With the current information, I can suggest making sure all imports, as well as the styles are included. They are essential to the grid being displayed as expected. For example:
import "igniteui-react-grids/grids/combined"; import "igniteui-react-grids/grids/themes/light/bootstrap.css";
If you are still facing difficulties, please, provide additional details, ideally by modifying a fork of the isolated sample and reproducing the setup there. Thank you for your cooperation.
Best regards,Bozhidara Pachilova
Hi Bozhidara and thanx a lot, actually I supposed that there should be some styling issues, since the date is there, but...obviously luck of FT experience. All good now.