Posted 16 January 2019, 7:43 am ESTWe have been using the Flexgrid (in React) and have been applying custom CSS based on the contents of cells utilizing the formatItems event. It works great on small datasets but over time as the data inside has gotten larger and larger the performance on modifying it by cell is becoming an issue. Currently we have ~3100 cells of data (241 rows x 13 columns) that are being rendered in the one grid and its taking approximately 3 seconds to get through the function. The function itself is pretty small its just obtaining the panel and modifying the cell based on the column and contents. Is there a different callback we could use so instead of it executing the callback 3100 times as the cells are created it could execute it based on the row that way we could modify the entire row at once instead of iterating over it by cell?
Flexgrid formatItem Rows instead of Cells
Posted by: bjordan on 16 January 2019, 7:43 am EST
Replied 16 January 2019, 3:46 pm ESTHi Branden,
The formatItem re-renders all the cell and it may take some time if the number of cells displayed on the screen is larger.
The performance difference between small and large data set is the because of the above reason. If you may reduce the FlexGrid size, it might be helpful in your case.
Also, it depends on how you are setting the cell styles or modifying the cell. The formatItem event gets triggered for the visible cells only.
Replied 17 January 2019, 1:48 pm ESTSo you think minimizing the amount of rows rendered (25 instead of all 241) by setting the height of the flex grid would help since it is only utilizing the callback for what is visible? I know when you go to load like 100k rows in a flexgrid the performance is insanely good as long as you set the height.
Is there another callback I might utilize to edit the cells or maybe a way to build the rows myself and pass them into a flexgrid? It doesn't seem like it would be that difficult in React to make a component that represents a row of my data and it can handle setting the properties there instead of trying to do it globally with the grid. Part of the issue is also that this data is fetched every 30 seconds and while the render is happening the FPS in the browser goes to 0 while the formatItems function is being executed and they cannot scroll which is what the users are complaining about.
Marked as Answer
Replied 17 January 2019, 3:53 pm ESTYes, reducing the number of visible cells will definitely result in better performance as compared to the grid with more number of visible cells.
We are sorry, but there isn't any way to format a whole row conditionally based on content without formatItem.
You may try to use a Custom CellFactory to format cell, it isn't as convenient as using formatItem event but surely provides better performance.
Please refer to the following sample to get started with the Custom CellFactory: https://demos.wijmo.com/5/SampleExplorer/SampleExplorer/Sample/CellFactory
Replied 25 March 2020, 8:15 pm ESTHello guys,
Could I do the same with CustomGridEditor or celltemplate?
If so, what about the performance?
Replied 26 March 2020, 7:04 pm ESTHi Ricardo,
Can you please explain the exact issue you are facing so that we can assist you further?
Replied 26 March 2020, 9:18 pm ESTHello,
Performance issues on IE, and I am studying grid's possibilities to solve it.
Today I have a CustomGridEditor, and we are using grid.itemFormatter to format cells.
Replied 29 March 2020, 7:20 pm ESTHi Ricardo,
As we said earlier, the performance depends on the number of cells that are shown on the DOM. If you will reduce the dimesions of the FlexGrid, the performance will be increased.
there may be some performance issues in IE due to its rendering engine.
Also, since, you are using formatItem event to format the FlexGrid, and if you have heavy formatting applied, this may also reduce the performance.
But, there are a couple of properties, which were added in the 5.20192.624 version that may be used in your case to improve the performance:
- lazyRender: https://www.grapecity.com/wijmo/api/classes/wijmo_grid.flexgrid.html#lazyrender
- refreshOnEdit: https://www.grapecity.com/wijmo/api/classes/wijmo_grid.flexgrid.html#refreshonedit
You may set the lazyRender property to true and refreshOnEdit to false and let us know whether the performance is increased.
Also, if you have some heavy formatting applied in the formatItem event, you may use the CellFactory class to format the cells which will increase the performance: