[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Collapse]ASP.NET WebForms Controls
   Getting Started
  [Expand]Grid View
  [Collapse]Tree List
   [Expand]Product Information
   [Collapse]Concepts
    [Expand]Binding to Data
    [Expand]Data Representation Basics
    [Expand]Data Editing
    [Collapse]Data Shaping and Manipulation
     [Expand]Data Summaries
     [Expand]Sorting
     [Collapse]Filtering
       Filtering in Code
       Filter Row
       Filter Control
       Search Panel
       Header Filter
     Drag and Drop
    [Expand]Focus and Navigation
     Appearance Customization
     Save and Restore Layout
    [Expand]Templates
     Toolbars
   [Expand]Visual Elements
   [Expand]Examples
   [Expand]Member Tables
  [Expand]Card View
  [Expand]Reporting
  [Expand]Chart Control
  [Expand]Pivot Grid
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Scheduler
  [Expand]Site Navigation and Layout
  [Expand]HTML Editor
  [Expand]Gauges
  [Expand]Vertical Grid
  [Expand]Data Editors
  [Expand]Docking and Popups
  [Expand]File Management
  [Expand]Data and Image Navigation
  [Expand]Multi-Use Site Controls
  [Expand]Spell Checker
  [Expand]Query Builder
 [Expand]ASP.NET MVC Extensions
 [Expand]Localization
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Header Filter

This topic illustrates how to filter ASPxTreeList data nodes using a column's header filter.

Column headers can display filter buttons. Clicking a filter button invokes a filter dropdown, which lists unique values within a column, and enables you to apply filter criteria against this column. These buttons are hidden by default. To show filter buttons, set the TreeListSettings.ShowHeaderFilterButton property to true. You can control filter button visibility for individual columns using a column's TreeListDataColumn.AllowHeaderFilter property.

Note that if a filter is applied to a column, other column header filters display unique values of the sorted nodes. To show the full list of values (include values of rows hidden by sorting), hold down SHIFT and click a header filter button.

In accessibility mode (the control's ASPxTreeList.AccessibilityCompliant property is set to true), the Header Filter supports keyboard navigation as shown below.

Invoke a header filter.

  • Tab - focuses a column's header filter button.
  • Enter - invokes a header filter dropdown.

Navigate through the filter list.

  • Up/Down - navigates through the filter items list.
  • Tab - navigates the filter items list (in CheckedList mode).

Apply a filter criteria.

  • Enter - applies filter criteria and closes a header filter dropdown.
  • Esc - closes the dropdown without saving changes in the filter criteria.

Expanded Header Filter Modes

A Header filter can operate in the four modes listed below. To specify a specific filter mode for individual columns, use a column's GridDataColumnHeaderFilterSettings.Mode property.

The following two list modes are available for all tree list columns.

  • List. The header filter's filter items are displayed as a regular list. Clicking an item invokes a corresponding action and automatically closes the dropdown.

  • CheckedList. The header filter's filter items are displayed as a checked list. In this mode, an end-user can select multiple items simultaneously. When the drop-down window is closed by clicking the OK button, the grid will display those records that contain checked values.

The following two list modes are available for date columns only.

Expanded Custom Header Filter Items

The ASPxTreeList allows you to create custom filter values, define filter criteria for them and display these values within a column's filter dropdown using the ASPxTreeList.HeaderFilterFillItems event. Within the event, you can access the filter default values using the ASPxGridHeaderFilterEventArgs.Values event parameter, and clear them if you so require. To add a new filter item, use the ASPxGridHeaderFilterEventArgs.AddValue method. In List mode, use the ASPxGridHeaderFilterEventArgs.AddShowAll method to add a ShowAll button to the list.

The FilterValue.CreateShowAllValue, FilterValue.CreateShowBlanksValue, and FilterValue.CreateShowNonBlanksValue methods can be used to create the corresponding filter items.

This example shows how to create custom filter items and display them within the Units On Order column's filter dropdown.

The image below shows the result.

Expanded Using HTML tags in an item text

The ASPxTreeList header filter allows using HTML tags in an item text. This example demonstrates how to set numbers in bold by using HTML tags within an item's format pattern. The image below shows the result.

Online Demos

Refer to the following online demos to review how to filter Tree List data nodes using the Header Filter.

Expanded See Also

Is this topic helpful?​​​​​​​