Is the React Grid a pure React component?

[Nrupal Prattipati]

Hi Team,

I am currently evaluating Grid control from various control vendors and found the one provided by SyncFusion to be feature rich and easy to use. 

However, when trying to show/hide columns, I noticed that the grid takes a few seconds to update/re-render on the screen. The tests were done on IE.

I am wondering if there is an issue with performance around column show/hide or if the Grid component is not a strict React component which is re-rendering the entire component on any change.

Regards

Nrupal

[Thavasianand Sankaranarayanan]

Hi Nrupal, 

Thanks for contacting Syncfusion support. 

Query :  However, when trying to show/hide columns, I noticed that the grid takes a few seconds to update/re-render on the screen. The tests were done on IE. 

We have analyzed your query but we are unable to reproduce the reported issue at our end. If you have tested the component with more number of columns or data, the grid may vary in terms of the performance due to data loading duration. So please find the below sample and video demo for your reference, 

Sample: https://stackblitz.com/edit/react-zaoabo?file=index.js  

Video: http://www.syncfusion.com/downloads/support/directtrac/general/ze/showHideColumnsIE-432847281  

Please provide below information of details to look into this issue further, 

1. Please share your grid configuration/ full code example?
2. Please share your Internet Explorer version details?

 

Regards, 

Thavasianand S. 

[Nrupal Prattipati]

Hi Nrupal, 

Thanks for contacting Syncfusion support. 

Query :  However, when trying to show/hide columns, I noticed that the grid takes a few seconds to update/re-render on the screen. The tests were done on IE. 

We have analyzed your query but we are unable to reproduce the reported issue at our end. If you have tested the component with more number of columns or data, the grid may vary in terms of the performance due to data loading duration. So please find the below sample and video demo for your reference, 

Sample: https://stackblitz.com/edit/react-zaoabo?file=index.js  

Video: http://www.syncfusion.com/downloads/support/directtrac/general/ze/showHideColumnsIE-432847281  

Please provide below information of details to look into this issue further, 

1. Please share your grid configuration/ full code example?
2. Please share your Internet Explorer version details?

 

Regards, 

Thavasianand S. 

Hi Thavasianand,

I have attached the grid configuration we are using.

The grid has 53 columns with around 100 rows of data. we will not be using paging, so all the rows are rendered on load.

Columns are hidden by default and visibility toggled by calling "this.gridInstance.showColumns(columnNames, 'field');" or "this.gridInstance.hideColumns(columnNames, 'field');"

We are also calling this.gridInstance.autoFitColumns(); onDataBound. 

I have done some UI Responsiveness tests in IE 11 on Windows 7. It has been observed that it takes around 45seconds to get the responsiveness back after toggling 3 columns. Most time is used up in setting innerHTML and appendChild.

Details of IE:
IE 11 on Windows 7

Version: 11.0.9600.19180

Regards

Nrupal

Attachment: GridConfig_c7ca52e8.zip

[Mohammed Farook J]

Hi Nrupal, 

Thanks for contacting Syncfusion support. 

Query: I have done some UI Responsiveness tests in IE 11 on Windows 7. It has been observed that it takes around 45seconds to get the responsiveness back after toggling 3 columns 

 

We have analyzed your query and since you have used 53 columns with 100 rows of data in grid, we suggest to use the enableVirtualization and enableColumnVirtualization  properties of the grid. In the below sample, we have rendered the grid with same configuration and to avoid the delayed when columns are hidden or show dynamically. Because it can be optimized by the virtualization properties. Please refer to the below sample and documentation for your reference. 

Sample: https://stackblitz.com/edit/react-padkss-qsguak?file=index.js  

Documentation: https://ej2.syncfusion.com/documentation/api/grid/#enablecolumnvirtualization  

                                https://ej2.syncfusion.com/documentation/api/grid/#enablevirtualization  

Regards, 

J Mohammed Farook 

 

[Nrupal Prattipati]

Hi Mohammed Farook,

Hope you had a good holiday. Thanks for the sample. 

I can replicate the responsiveness in my solution when I do not use frozenColumns. Having frozenColumns in the grid makes the SyncFusion grid stand out from others we have been evaluating. 

Am I correct in saying frozenColumns and enableColumnVirtualization do not work together. Without virtualization the repsonsiveness takes a nose dive as expected.

Regards

Nrupal

[Pavithra Subramaniyam]

Hi Nrupal, 

Greetings from Syncfusion. 

 

Query:   Am I correct in saying frozenColumns and enableColumnVirtualization do not work together 

 

Yes, currently we do not have support for frozenRows and frozenColumns in the grid when virtualization is enabled. 

 

Please get back to us for further assistance. 

 

Regards, 

Pavithra S.