Large Dataset

 
TaskAssigned ToStart DateDue DatePriorityProgress
Prepare Financial Reports
Samantha Bright4/7/20184/7/2018Medium
Report On Tranistion to Touch-Based Apps
James Anderson10/13/201710/13/2017High
New Brochures
Arnie Schwartz5/9/20171/30/2018Low
Tradeshow Marketing Message
Dallas Lou8/13/20174/23/2018Medium
Collect Customer Reviews for Website
Mary Stern1/28/201811/19/2017High
Online Sales Report
Nat Maguiree7/5/20179/29/2017Low
Reschedule Sales Team Meeting
Lincoln Bartlett9/25/20171/17/2018Medium
Submit D&B Number to ISP for Credit Approval
Sammy Hill7/6/20172/20/2018High
Decide On Mobile Devices Used in the Field
Morgan Kennedy9/26/20179/12/2017Low
Follow Up with West Coast Stores
Clark Morgan12/22/20173/1/2018Medium
Brochure Design Review
Barb Banks12/13/201711/20/2017High
Improve Internal Document Management
Karen Goodson2/17/20184/21/2018Low
Create R&D Plans
Jim Packard10/14/20179/10/2017Medium
Review Articles
Brett Wade2/12/20183/23/2018High
Approve Vacation Request Form
Amelia Harper11/12/20178/5/2017Low
Approve Overtime Pay
Terry Bradley3/8/201812/11/2017Medium
Send Territory Sales Breakdown
Arthur Miller12/16/20172/4/2018High
Publish New Art on the Server
Antony Remmen6/9/201712/13/2017Low
Determine New Online Marketing Strategy
Billy Zimmer7/14/201710/3/2017Medium
Review Overtime Report
Stu Pizaro6/5/20174/16/2018High
Data grid with 129 rows and 6 columns
0 rows are selected

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.