Grouping for 10K plus record set

[Bhavesh Kachhadiya]

Team,

We are using grid component in our app where we are facing issue when we enable grouping in it. 

Usecase:

- 10K plus records (return from API within 1 sec)

- Enable "enableInfiniteScrolling" as we are using ng-template to bind our dynamic columns.

- If I move column which has 5K plus dataset in group by, it shows initial records but when I callops group record it goes on infinite loading icon and doesn't load another group.

What could be the reason for it? What could be the ideal process for grouping of more then 10K - 1 Million record in grid effectively?

Note: We can't use virtualization (which suggest by many post for effective data rendering) as we uses ng-template :( 

Version we are using -  27.2.2

[Rajapandi Ravi]

Hi Bhavesh,

Greetings from Syncfusion support

Based on your query, it appears that you are using Grouping with Infinite Scrolling and facing the problem while collapsing the grouped record. To investigate further, we have prepared a sample in the combination of Infinite Scrolling with Grouping and tried to reproduce the reported problem, but it loads the next set of records while collapsing the grouped record and worked as expected.

For your convenience, we have demonstrated the setup we used, please refer to the code example and sample below for more details.

App.component.html

 

<ejs-grid #grid [dataSource]='vData' [enableInfiniteScrolling]='true' allowGrouping="true" height='400' [groupSettings]='groupOptions' [pageSettings]='pageSettings'>

        <e-columns>

         .  .  .  .  .  .  .  .  .

         .  .  .  .  .  .  .  .  .

         .  .  .  .  .  .  .  .  .

        </e-columns>

    </ejs-grid>

 

 

Sample: https://stackblitz.com/edit/angular-atsrszpk-drtdpunp?file=src%2Fapp.component.html,package.json

If you still face the issue, please share the below details

1)      Share your complete Grid rendering code, we would like to check your Grid initialization settings and implemented features.

2)      Share the details about how many columns you are rendered in the Grid.

3)      Could you please confirm you have faced any script error in the console window while collapsing?

4)      If possible could you please share any issue reproducible sample or try to reproduce the issue with our shared sample that would be helpful for us to provide better solution.

Regards,

Rajapandi R

[Bhavesh Kachhadiya]

Thanks for the replay. Will check the demo and try to implement the same. Will update here.

[Rajapandi Ravi]

Bhavesh,

Thanks for the update. Sure, you can test and get back to us with the requested details for further assistance.

[Bhavesh Kachhadiya]

Rajapandi,

I have reviewed your demo, and it performs quite well with 100K records. However, our implementation differs in terms of how we render and bind grid columns. We use dynamic headers, and based on each header, we render cells using our own component. (In the demo, I have simplified it by using a <div> to display row cells.)

Demo URL: https://stackblitz.com/edit/angular-atsrszpk-25cimjgs?file=src%2Fapp.component.html

After updating the original repository to match our structure, I found that data loads correctly, and infinite scrolling works as expected. However, when grouping a column, the grid enters an infinite loading state, and the browser displays multiple warnings indicating that it has become unresponsive.

Please let me know if you need any further details.

Note: We are using the same versions of Syncfusion and Angular as in your demo.

[Bhavesh Kachhadiya]

Hi Rajapandi,

Just checking, Did you get a change to check updated demo that I have share in previous reply? if you need any further details then do let me know.

Awaiting on your response.

Thanks.

[Rajapandi Ravi]

Bhavesh,

We are also encountering the problem when Grouping a column displays multiple warnings indicating that it has become unresponsive. Please refer the below video demo for more information.

Video demo: Check the attachment.

We have already considered this as a feature request “Optimize the Sorting performance for Large Datasets in JavaScript Grid” at our end. This will be included in the upcoming 2025 Volume 1 Main Release, which is scheduled to roll out in end of March 2025. You can now track the current status of your request through the following feedback link.

Feedback: https://www.syncfusion.com/feedback/62797/optimize-the-sorting-performance-for-large-datasets-in-javascript-grid

Please get back to us if you need further assistance.

Attachment: 195964vd_c40cfb33.zip

[Bhavesh Kachhadiya]

Thank you for your response Rajapandi. 

Will keep track of Feedback link till it get's release so that I can pull it down in our project to resolve this issue.

Not sure, what we are going to do with this ticket now as it is already being moved for an improvement feature. Let me know if I have to do anything with it.

Thanks.

[Pavithra Subramaniyam]

Bhavesh,

Thank you for the update. We will notify you once the feature has been implemented. In the meantime, feel free to follow up for feedback.

[Rajapandi Ravi]

Bhavesh,

We are glad to announce that our Essential Studio 2025 Volume 1 main release v29.1.33 is rolled out and is available for download under the following link.

Essential Studio® 2025 Volume 1 Main Release v29.1.33 is available for download | Announcements Forums | Syncfusion®

In this release, we have included the fix for the issue titled "Optimize the Sorting performance for Large Datasets in JavaScript Grid" in our 29.1.33 release. So please upgrade to our latest version of the Syncfusion package to enhance the performance.

Root Cause: The performance delay occurs due to the use of merge sort for sorting the grid. Key factors contributing to the issue include:

1. Performance Limitations:
• Slower Execution: Custom implementations of merge sort are slower compared to optimized algorithms available in modern JavaScript engines.
• Non-Adaptive Nature: Merge sort processes the entire dataset, irrespective of its existing order, leading to inefficiencies with partially sorted data.

2. Memory Usage:
• High Space Complexity: Merge sort requires additional memory (O(n)) to store temporary arrays during merging, which becomes significant for large datasets, such as 130,000 records.

These limitations make merge sort suboptimal for handling large datasets in this context, resulting in the observed delay while sorting the Grid.

Solution: Resolved the performance delay by replacing the custom merge sort implementation with the built-in Array.sort() method.

Sample: https://stackblitz.com/edit/stackblitz-starters-sy2txzgy?file=src%2Freport%2Freport.component.html,src%2Freport%2Freport.component.ts

Feedback: Provide support for On-Demand Loading with Hierarchical Grid/ Details template support in JavaScript | Feedback Portal

Thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.

[Bhavesh Kachhadiya]

Ravi,
I’m glad to see that the latest release includes a fix for the reported issue. I attempted to upgrade to the same version locally to verify the fix; however, it doesn’t seem to work as expected on my end. Interestingly, it works fine when I check your demo URL.
To help troubleshoot, I’ve recreated the structure aligned with the new version in the following StackBlitz demo. You can verify that the grouping still causes the browser to become unresponsive — for instance, try dragging "field2" into the GroupBy section to observe the issue:


Demo:https://stackblitz.com/edit/stackblitz-starters-prhxlom3?file=src%2Fapp%2Ffield-selector%2Ffield-selector.component.css,src%2Fmain.ts,src%2Freport%2Freport.component.ts,src%2Fapp%2Ffield-selector%2Ffield-selector.component.html,src%2Freport%2Fdata.ts,src%2Freport%2Freport.component.html


Could you please let me know if I’m missing something or if there’s any additional configuration needed to achieve this feature using ng-template within the column or cell?


Thanks,
Bhavesh

[Rajapandi Ravi]

Bhavesh,

Based on your query, it appears that you are encountering a performance issue when performing grouping operations in the Grid. As noted in your update, the issue seems to occur during grouping. However, when we attempted to reproduce the issue by grouping the Field2 column, we were unable to observe the reported behavior. Please refer to the attached video demonstration for further details.

Video demo: Check the attachment.

However, we were able to reproduce a browser unresponsiveness issue when collapsing grouped records, which we are currently validating. To better understand and proceed with the reported scenario, we kindly request the following details:

1. Please confirm whether you are mentioning the issue in the video demo?
2. A step-by-step description of the issue replication procedure
   

3.  Share the issue scenario in video demonstration format.

Attachment: Groupingperformance_8427afa0.zip

[Bhavesh Kachhadiya]

Ravi,

Sorry for miss-understanding, Grouping works fine without any browser unresponsiveness but if you do Collapse/Expand row which does has 5K or more records then you will notice browser issue as it getting stuck and unresponsive at the same time. 

Let me know if you still need further details.

Thanks,
Bhavesh

[Rajapandi Ravi]

Bhavesh,

By default, in our EJ2 Grid, when you group the columns in the Grid and collapse the record the grouped records are not removed from the DOM — instead, they are simply hidden using CSS (display: none). This is the default behavior of our EJ2 Grid, and this behavior helps in maintaining fast toggling of grouped and ungrouped states without having to completely re-render the rows from scratch.

Since in your scenario, the grouped records count is 10k records and when you collapse the record the 10k records are maintained in the DOM which is causing the performance issue, and we would like to inform you that this was the default behavior of Grouping. To overcome your reported problem, we suggest you enable a Lazy load grouping in the Grid, and it allows you to load and display grouped data efficiently by fetching only the required data on demand. This feature is useful when dealing with large datasets were loading all the data at once might affect performance. The Grid will render only the initial level caption rows in the collapsed state at grouping. To enable this feature, need to set the groupSettings.enableLazyLoading property to true.

Please refer the below code example, documentation and sample demos for more information.

report.component.ts

 public groupOptions: object = {

    showGroupedColumn: true, enableLazyLoading: true

  };

 

report.component.html

 

<ejs-grid

    #grid

    [dataSource]="vData"

    [enableInfiniteScrolling]="true"

    allowGrouping="true"

    height="400"

    [groupSettings]="groupOptions"

    [pageSettings]="pageSettings"

  >

 

Sample: Syncfusion Grid - Infinite Scroll (forked) - StackBlitz

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/grouping/lazy-load-grouping

Sample Demos: https://ej2.syncfusion.com/angular/demos/#/tailwind3/grid/lazy-load-grouping-with-infinite-scrolling