Unreponsive when loading large dataset with grouping enabled

Question

We have been experiencing unresponsiveness when large dataset ( > 450000 records) is loaded in Grid control with grouping is enabled (allowGrouping to true) and are wondering if we are missing something in the configuration of the control. We don't have any issues loading the similar number of data when grouping is not enabled. Please refer to the following for our grid configuration.

<GridComponent
    ref={g => grid = g}
    dataSource={dataSource}
    height='350'
    toolbar={toolbarOptions}
    allowReordering={true}
    enableVirtualization={true}
    allowGrouping={true}
    groupSettings={groupSettings}
    actionComplete={onActionComplete}
>
    <ColumnsDirective>
        {columns.map(column => <ColumnDirective {...column}></ColumnDirective>)}
    </ColumnsDirective>
    <Inject services={[Toolbar, Group, Reorder, Page, ColumnChooser, VirtualScroll, Sort]} />
</GridComponent>

Jumpei Yamauchi · Answer

Adding to the previous message - please disregard 'actionComplete' in the above configuration. Removing it did not change the unresponsive behavior.

Dineshnarasimman Muthu · Answer

Hi Jumpei,Greetings from Syncfusion support.By reviewing the code which you have shared we understand
that you are facing issue while performing grouping while using large number of
data. We suggest you to use lazy load grouping concept. This method collapse
the data and this will group the data only when expanded. The documentation for
lazy load grouping is attached where it is explained in detail about lazy load
grouping and its limitations.Documentation:  https://helpej2.syncfusion.com/react/documentation/grid/grouping/lazy-load-grouping#lazy-load-grouping-with-infinite-scrollingIf you still face issue while performing grouping, can
you please share the following information which will be very helpful to us.
 A
     runnable sample that replicates the issue: Having a sample that reproduces
     the problem will greatly assist us in identifying and resolving the issue
     effectively.
 Grid
     Package version: Please provide us with the version of the Grid Package
     you are currently using. This information will help us ensure compatibility
     and provide the most relevant guidance.
 Type
     of Datasource you are using, whether you are using remote datasource or
     local datasource.
Regards,Dineshnarasimman

Jumpei Yamauchi · Answer

Thank you for your reply.Could you please refer to the sample below:- https://stackblitz.com/edit/react-kez8vz?file=index.js In the component configuration:- lazy loading is enabled (enableLazyLoading is true in groupSettings)- virtualization is enabled (enableVirtualization is true)- mock data of 500000 rows created by data functionWhen a column is dragged and dropped for grouping, the UI becomes unresponsive. The same behavior has been observed when paging is used in place of virtualization.With less data (e.g 50000), the grouping works as expected. Is anything obvious missing from the configuration?

Jumpei Yamauchi · Answer

Any updates on this?

Vikram Sundararajan · Answer

Hi Jumpei, We have thoroughly
validated your query about grid rendering takes time while grouping is
performed with large set of data. It's important to note that when grouping is
applied, the grid records are organized into a hierarchical structure to
facilitate easier expansion and collapse of records. However, by default with
500,000 records in your grid, the process of organizing and displaying all the
data on the page can understandably take some time due to the huge amount of
data. Regards,Vikram S