Large Dataset

 
Task Assigned To Start Date Due Date Priority Progress
Prepare Financial Reports
Samantha Bright 4/7/2018 4/7/2018 Medium
Follow Up With East Coast Stores
James Anderson 10/13/2017 10/13/2017 High
Budget Reports
Arnie Schwartz 5/9/2017 1/30/2018 Low
Research And Improve Customer Satisfaction
Dallas Lou 8/13/2017 4/23/2018 Medium
Engineering Dept Budget Request Report
Mary Stern 1/28/2018 11/19/2017 High
Replace Old Artwork With New Artwork
Nat Maguiree 7/5/2017 9/29/2017 Low
Upgrade Apps to WPF or Stay With WinForms
Lincoln Bartlett 9/25/2017 1/17/2018 Medium
Update Revenue Projections
Sammy Hill 7/6/2017 2/20/2018 High
Review Customer Bug Reports/Prep Workarounds
Morgan Kennedy 9/26/2017 9/12/2017 Low
Approve Hiring Of John Jeffers
Clark Morgan 12/22/2017 3/1/2018 Medium
Lunch Potluck
Barb Banks 12/13/2017 11/20/2017 High
Support Team Evaluation Report
Karen Goodson 2/17/2018 4/21/2018 Low
Return Merchandise Report
Jim Packard 10/14/2017 9/10/2017 Medium
Prepare Year-End Support Summary Report
Brett Wade 2/12/2018 3/23/2018 High
Provide Feedback on Shippers
Amelia Harper 11/12/2017 8/5/2017 Low
Schedule Training Events
Terry Bradley 3/8/2018 12/11/2017 Medium
Finish Raising New Capital For Growth Needs
Arthur Miller 12/16/2017 2/4/2018 High
Rollout Of New Website and Marketing Brochures
Antony Remmen 6/9/2017 12/13/2017 Low
Business Cards
Billy Zimmer 7/14/2017 10/3/2017 Medium
Review Complaint Reports
Stu Pizaro 6/5/2017 4/16/2018 High
Data grid with 129 rows and 6 columns

You can use the GridDevExtremeDataSource<T> class to bind the DevExpress Blazor TreeList to a large IQueryable<T> data collection. This data source implementation is based on our DevExtreme.AspNet.Data library. When you use this data source, the TreeList delegates data filtering operations to an underlying query provider and loads node children when the node is expanded for the first time. This technique optimizes performance and reduces overall memory consumption.

To use this data source in your next Blazor project, follow the steps below:

  1. Create a GridDevExtremeDataSource<T> class instance and pass your IQueryable<T> data collection as the constructor parameter. Assign the result to the TreeList's Data property.
  2. Specify KeyFieldName and ParentKeyFieldName properties. The component uses them to build the tree.
  3. Specify the HasChildrenFieldName property. The component uses this property to determine which nodes require expand buttons.

To help illustrate the performance benefits of GridDevExtremeDataSource<T>, this demo is linked to a dataset with over 100,000 nodes. Expand or collapse nodes, sort data to evaluate performance/responsiveness.