Filter Row

 
Task Assigned To Start Date Due Date Priority Progress
 
Simplify & Clarify Product Messaging
John Heart 4/3/2018 4/14/2018 Low In progress
Reduce Churn to Less than 1% Monthly
Arnie Schwartz 2/12/2018 5/1/2018 Low In progress
 
 
Prepare Product Recall Report
Hannah Brookly 2/20/2018 4/24/2018 Low In progress
 
 
Review Product Recall Report with Engineering Team
Harv Mudd 2/27/2018 4/21/2018 Low In progress
Increase the CTR% to Above Industry Average 3.5%
Karen Goodson 7/11/2017 4/15/2018 Low In progress
 
 
Create New Product Pages
Violet Bailey 11/8/2017 1/26/2018 Low In progress
 
 
Review New Product Pages
Ken Samuelson 10/5/2017 4/1/2018 High In progress
Begin Content Review
Victor Norris 4/27/2017 2/25/2018 Medium In progress
 
 
Discuss Product Giveaways with Management
Kelly Rodriguez 5/23/2017 1/25/2018 Low In progress
Produce Online Survey
Karen Goodson 10/14/2017 3/25/2018 Low In progress
 
 
Staff Productivity Report
Sandy Bright 12/20/2017 1/20/2018 Low In progress
Research and Improve Customer Satisfaction
Robin Cosworth 10/27/2017 4/30/2018 Medium In progress
 
 
Email Test Report on New Products
Brad Jameson 1/11/2018 4/10/2018 Low In progress
Implement New Product Planning Process
Samantha Bright 1/17/2018 4/28/2018 Low In progress
 
 
Prepare Product Recall Report
Arthur Miller 1/17/2018 2/21/2018 High In progress
 
 
Review Product Recall Report by Engineering Team
Robert Reagan 2/19/2018 2/28/2018 High In progress
Support Marketing and Sales with Design Deliverables
Arnie Schwartz 10/14/2017 11/4/2017 Low In progress
 
 
Create New Product Pages
Jim Packard 10/18/2017 10/21/2017 Low In progress
 
 
Review New Product Pages
Hannah Brookly 10/15/2017 10/23/2017 Low Completed
Finish Raising New Capital for Growth Needs
Wally Hobbs 10/28/2017 4/24/2018 Low In progress
Data grid with 25 rows and 6 columns

The DevExpress Blazor TreeList allows users to filter data as their needs dictate. The FilterTreeMode property specifies how the TreeList component displays filtered nodes:

  • EntireBranch — The component displays a node that meets the filter criteria and all its parent and child nodes, even if they do not meet the criteria.
  • Nodes — The component ignores parent-child relationships and displays all nodes that meet the filter criteria at one level.
  • ParentBranch — The component displays a node that meets the filter criteria and all its parent nodes, even if they do not meet the criteria.
  • Auto (default) — The filter tree mode depends on the bound data source. When bound to a GridDevExtremeDataSource<T>, the TreeList component switches to the Nodes mode to improve performance. In other data binding scenarios, the TreeList operates in ParentBranch mode.

Enable the ShowFilterRow property to activate the integrated DevExpress TreeList Filter Row (displays in-place editors for all data columns). When a user enters a value into an editor, the TreeList creates a filter condition based on the value and applies this condition to the corresponding column.

You can use the following column properties to customize filter row behavior:

  • FilterRowOperatorType — Specifies an operator used to create a filter condition based on the filter row value. If you do not define this option, our Blazor TreeList chooses the operator type automatically: Contains for columns bound to string data types; Equal for all others.
  • FilterRowValue — Specifies the initial value in the filter row editor. If you define this property, you should also specify the FilterRowOperatorType property.
  • FilterRowEditorVisible — Specifies whether to display the filter row editor.

The TreeList allows you to customize filter row editors in the following manner:

In this demo, settings for the Assigned To and Priority columns are modified to display values from external collections for the filter row/data rows. The FilterRowCellTemplate property implements the filter editor for the Progress column.