Column Filter Menu

 
Task Assigned To Start Date Due Date Progress
Simplify & Clarify Product Messaging
John Heart 4/3/2018 4/14/2018
Create Action Plan to Improve Customer Engagement
Robert Reagan 8/8/2017 4/8/2018
Increase Average Subscription Price
Wally Hobbs 8/9/2017 9/13/2017
Reduce Churn to Less than 1% Monthly
Arnie Schwartz 2/12/2018 5/1/2018
Finalize the Content Strategy
Stu Pizaro 3/10/2018 4/11/2018
Grow Subscriber Base by 5% per Week
Sandra Johnson 7/24/2017 2/10/2018
Increase the CTR% to Above Industry Average 3.5%
Karen Goodson 7/11/2017 4/15/2018
Close the Final Budget
Hannah Brookly 6/5/2017 6/18/2017
Achieve Record Metrics in All Areas
Ed Holmes 4/24/2017 2/3/2018
Begin Content Review
Victor Norris 4/27/2017 2/25/2018
Produce Online Survey
Karen Goodson 10/14/2017 3/25/2018
Improve Our Content and Its Distribution
Arnie Schwartz 4/29/2017 11/9/2017
Update Old Content
Maggie Boxter 2/2/2018 4/2/2018
Map and Analyze Marketing Channels
Samantha Bright 7/5/2017 4/19/2018
Research and Improve Customer Satisfaction
Robin Cosworth 10/27/2017 4/30/2018
Present an Action Plan for Next Quarter
Arnie Schwartz 6/6/2017 5/11/2018
Achieve Record Revenues While Increasing Profitability
Samantha Piper 10/21/2017 2/28/2018
Hit Quarterly Revenue of Over $1000000
Clark Morgan 8/30/2017 1/7/2018
Start Sales in 2 New Countries
Brad Farkus 9/26/2017 10/4/2017
Increase Gross Profit Margin from 54% to 63%
Sandra Johnson 7/14/2017 10/25/2017
Data grid with 37 rows and 5 columns

The DevExpress Blazor TreeList allows you to include column filter menus (drop-down lists used to filter column values) within your DevExpress-powered Blazor app.

To display column filter menu buttons across all data columns, set the DxTreeList.FilterMenuButtonDisplayMode property to Always. You can also use the DxTreeListDataColumn.FilterMenuButtonDisplayMode property to set button visibility for a specific data column.

A size grip in the corner of a filter menu allows users to resize the menu.

You can use the following APIs to customize the filter menu as necessary:

  • CustomizeFilterMenu event: fires before the drop-down filter is displayed on-screen and allows you to customize filter items.
  • FilterMenuTemplate property: specifies the dropdown menu template used within your Blazor app. In this demo, the Progress column's filter menu leverages this property. If your control displays DateTime and DateTime? columns, you can switch between a pre-defined HierarchicalDateView and ListView (available view the template's context parameter).
  • The DataColumnFilterMenuTemplate property: specifies the template used for all TreeList dropdown filter menus.

Once you apply a filter to a column, all other TreeList column filter menus hide values that do not match the specified filter criteria. Hold down the Shift key and click a filter button to display all values.

Accessibility-related You can focus a column header and press the Alt+Down Arrow or Shift+Alt+Down Arrow to open the TreeList column filter menu.

For additional information, refer to the following help topic: Column Filter Menu.