Large Dataset

 
Task Assigned To Start Date Due Date Priority Progress
Prepare Financial Reports
Samantha Bright 4/7/2018 4/7/2018 Medium
Report On Tranistion to Touch-Based Apps
James Anderson 10/13/2017 10/13/2017 High
New Brochures
Arnie Schwartz 5/9/2017 1/30/2018 Low
Tradeshow Marketing Message
Dallas Lou 8/13/2017 4/23/2018 Medium
Collect Customer Reviews for Website
Mary Stern 1/28/2018 11/19/2017 High
Online Sales Report
Nat Maguiree 7/5/2017 9/29/2017 Low
Reschedule Sales Team Meeting
Lincoln Bartlett 9/25/2017 1/17/2018 Medium
Submit D&B Number to ISP for Credit Approval
Sammy Hill 7/6/2017 2/20/2018 High
Decide On Mobile Devices Used in the Field
Morgan Kennedy 9/26/2017 9/12/2017 Low
Follow Up with West Coast Stores
Clark Morgan 12/22/2017 3/1/2018 Medium
Brochure Design Review
Barb Banks 12/13/2017 11/20/2017 High
Improve Internal Document Management
Karen Goodson 2/17/2018 4/21/2018 Low
Create R&D Plans
Jim Packard 10/14/2017 9/10/2017 Medium
Review Articles
Brett Wade 2/12/2018 3/23/2018 High
Approve Vacation Request Form
Amelia Harper 11/12/2017 8/5/2017 Low
Approve Overtime Pay
Terry Bradley 3/8/2018 12/11/2017 Medium
Send Territory Sales Breakdown
Arthur Miller 12/16/2017 2/4/2018 High
Publish New Art on the Server
Antony Remmen 6/9/2017 12/13/2017 Low
Determine New Online Marketing Strategy
Billy Zimmer 7/14/2017 10/3/2017 Medium
Review Overtime Report
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 component performs the following actions to optimize performance and reduce overall memory consumption:

  • Loads child nodes when the node is expanded for the first time.
  • Delegates data filtering operations to an underlying query provider.
  • Switches FilterTreeMode to Nodes. In this mode, the TreeList ignores parent-child relationships and displays all nodes that meet the filter criteria at one level.

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. You can expand or collapse nodes, and filter or sort data to evaluate the performance/responsiveness.