BoldSign®Effortlessly integrate e-signatures into your app with the BoldSign® API. Create a sandbox account!
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
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
Thanks for the replay. Will check the demo and try to implement the same. Will update here.
Bhavesh,
Thanks for the update. Sure, you can test and get back to us with the requested details for further assistance.
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.
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.
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.
Please get back to us if you need further assistance.
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.
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.
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.
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:
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.
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.
