TreeGird with Virtualization

Hi support team,

I got performance issues when expanding child (​please take a look at the bottom image) so I tried to improve the performance by applying Virtualization, but I got 4 issues during applying the virtualization for treegrid component to improve the performance. I attached my example code.

I would like to summary a bit what I did: I apply the virtualization for treegrid by enabling the setting EnableVirtualization and fixed Heigh. The treegrid also apply the pagination with custom "load more" button

Please help me clarify as well as provide the solution for each of issue:

  1. With all configurations on attached example code, it always displays scroll horizontal on the right of treegrid, and when I scroll it, it makes all the display items flick and display in wrong position (display at the middle of the tree). It should not have a scroll and all displayed items should always in top
  2. From what I see from the demo in syncfusion https://blazor.syncfusion.com/demos/tree-grid/virtual-scrolling?_ga=2.161887038.365228362.1627436268-544452080.1621238505 the grid is somehow has a delay around 500ms to load new data when I scroll to new position (makes me feel like the displayed items are jerky/flick). Is it the correct behavior? Is there any change to prevent it? Make it smoother?
  3. In my real implementation for my real project. With the same configuration for treegrid, I got the message " No records to display" when I set the PageSize is 0 or 10 or 12,.... It only display the data with PageSize = 2. Is there any configuration should I take a look/need adjustment?
  4. Even if I only use virtualization for treegrid without apply paging. The lagging/flick and some unexpected behavior (scroll down to bottom - empty items display) happen. And The IMPORTANT THING is the performance have not been improved, ​I got a delaying around 2-3 second when I try to expand/collapse the folder with the tree structure like below (my real tree have around 700 records which is used to build the tree structure like the image below)

Expected: I just want to improve the performance when I expand the folder as image above. is there any solution to improve it? (the scrolling behavior is very smooth, there is no issue there, the performance issue only happen I interact with child node - expand/collapse)

Best regards,
Tho


Attachment: SyncfusionBlazorApp1_ee300805.zip


9 Replies

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team July 29, 2021 03:42 PM UTC

Hi Tho, 

Thanks for your interest in Syncfusion Components. 

We have checked your reported Issues from your provided sample. The reported problem occurs due to PageSize of TreeGridPageSettings property. In your provided code you have used PageSize as 0,10 or 12. We have certain Limitations while using Virtualization.   

  1. The page size provided must be two times larger than the number of visible rows in the datagrid. If the page size is failed to meet this condition then the size will be determined by TreeGrid. So we suggest you to increase the PageSize while using Virtualization to improve the Performance.
 
  1. Also you have used AllowPaging property while using Virtualization. So remove Paging property in your application.
 
We have prepared sample using Virtualization with large number of records(Expanded or Collapsed events),and also with Template column which will take certain milliseconds only. We are unable to reproduce any performance issue when using increase in PageSize. Refer to the sample Link:- 

 
After increasing in Pagesize based on visible rows still faced issue share issue replicable sample/Video Demo to proceed further. 

Regards, 
Farveen sulthana T 





NT Nguyen Tran Phuoc Tho August 2, 2021 03:13 AM UTC

Hi support team,

I took a look and ran the proposal source core. It seems that the flicking after scroll to another position still happen (the tree  get delay around ~1s  then  change/update right after scroll stop)

Could we prevent that behavior?

Regards,

Tho



NT Nguyen Tran Phuoc Tho August 3, 2021 04:27 AM UTC

Hi support team,

I prepare the example source which has the same implementation, same Syncfusion version as my real project.

I still get a ton of issues regarding the Treegrid when I enable  EnableVirtualization

All parent nodes collapse by default and with the current configuration of treegird in example code, I got issues below:

  1. When I start the application, only 5 items are displayed. My expectation all the parent note should be display
  2. When I scroll down, nothing more displays until I scroll up, at that time, all the items are displayed, but again, when I scroll down, all items are disappear
  3. The scrollbar display incorrectly, it displays as we have a very long list in Tree, but in fact, all items are collapse 
  4. The parent-child relationship display incorrectly, ALL grand node display at the top, then ALL father node then ALL child node, it looks like the image below

Please help me take a look and correct those issue above. Again my current version on my real project is 10.1.0.69

Re

Attachment: Example_79280f0e.zip


FS Farveen Sulthana Thameeztheen Basha Syncfusion Team August 3, 2021 03:24 PM UTC

Hi Tho, 

We are able to replicate the reported problem at our end. We are working on your reported problems with high Priority and provide you further details by on or before 6th August 2021. 

Regards, 
Farveen sulthana T 



NT Nguyen Tran Phuoc Tho replied to Farveen Sulthana Thameeztheen Basha August 6, 2021 02:26 PM UTC

Hi,

Is there any an update for my problem?

Regards,

Tho



FS Farveen Sulthana Thameeztheen Basha Syncfusion Team August 6, 2021 04:07 PM UTC

Hi Tho, 

We appreciate your patience. 

Query#:-  It seems that the flicking after scroll to another position still happen (the tree  get delay around ~1s  then  change/update right after scroll stop) 
 
As we are facing difficulties on validating this reported issue, we will get back to you with further details by on or before 10th August 2021
 
Query#:- I still get a ton of issues regarding the Treegrid when I enable  EnableVirtualization:- 
 
Further validating, We have confirmed this as Bug and logged the defect report for the same “Issues in Virtualization with ExpandStateMapping”. Thank you for the taking the time to report the issue and helping us improve our product. At Syncfusion we are committed to fixing all the validated defect (subject to technological feasibility and Product Development Life Cycle) and including its fix in our subsequent release. The fix will be included in our upcoming weekly patch release scheduled on last week patch release of August(25th ) 

You can track the current status of your request, review the resolution timeline and contact us for any further inquiries through this link.    

Disclaimer:- You can view the Feedback link once it is moved to validated state.  
    
Note: To view the above feedback, kindly login into your account.   
 
 
Regards, 
Farveen sulthana T 



NT Nguyen Tran Phuoc Tho replied to Farveen Sulthana Thameeztheen Basha August 8, 2021 11:28 PM UTC

Hi Farveen,

I got "page not found" when trying to access the link  https://www.syncfusion.com/feedback/27709/virtualization-related-issues-in-treegrid-with-expandstatemapping even I already log in by my account.

Could you help me recheck it?



FS Farveen Sulthana Thameeztheen Basha Syncfusion Team August 9, 2021 02:23 PM UTC

Hi Tho, 

Sorry for the inconvenience caused. 

The provided feedback link is in review state. Once it is moved to validated state, you can view the feedback link which is also mentioned in previous update. Until then we appreciate your patience. 

Regards, 
Farveen sulthana T 



FS Farveen Sulthana Thameeztheen Basha Syncfusion Team August 10, 2021 06:15 PM UTC

Hi Tho,  

We appreciate your patience. 

Query#:- It seems that the flicking after scroll to another position still happen (the tree  get delay around ~1s  then  change/update right after scroll stop) 

By default, virtualization follows debouncing concept. When performing long scroll old data will be shown during scrolling and once the scroll is released the new set of rows will be shown in TreeGrid. This is the default behavior of Virtualization feature.  

Also the provided feedback Link has been moved into validated state, so that you can view the Feedback. Please revert back to us for further queries.  

Regards,  
Farveen sulthana T 


Loader.
Up arrow icon