Skip to main content

Filter Elements

  • 3 minutes to read

Filter Elements allows you to filter the GridControl / TreeListControl‘s data. Filter Elements are separate controls within your application that automatically retrieve available values, format settings, and other information from the bound control.

Using Filter Elements, you can build your own UI to filter control data. As an example, here is a UI that uses Filter Elements for a filtering panel displayed next to the GridControl:

Run Demo: Filtering UI

Create a Filter Element

  1. Add a filter element (the FilterElement class descendants) to the markup.
  2. Set the attached FilterElement.Context property to associate the filter element with the GridControl‘s filter context.
  3. Specify the field name of the column you want to filter using the FilterElement.FieldName property.

The following code sample uses the CheckedListFilterElement to filter the GridControl‘s data by the City column values:

<dxg:GridControl x:Name="grid" ... />
<!-- ... -->
<dxfui:CheckedListFilterElement Context="{Binding FilteringContext, ElementName=grid}" FieldName="City"/>

The image below shows the result:

Filter Element Types

Run Demo: Filtering

Filter Element




Allows a user to filter by boolean values.

<dxfui:CheckBoxFilterElement FieldName="HasAttachment" />



Allows a user to select one filter value from a set.

<dxfui:RadioListFilterElement FieldName="Doors" />



Allows a user to select multiple filter values from a set.

<dxfui:CheckedListFilterElement FieldName="TrademarkID" />

Use the SelectAllWhenFilterIsNull property to specify whether to select all filter values when the filter is null.



Allows a user to filter by hierarchical values.

<dxfui:CheckedTreeListFilterElement FieldName="SalesDate" />



Allows a user to apply a column’s Predefined Filters. Use the ColumnBase.PredefinedFilters property to specify predefined filters.

<dxfui:PredefinedFiltersElement FieldName="MPGCity" />



Allows a user to apply a column’s Conditional Formatting Filters. Use the TableView.FormatConditions / TreeListView.FormatConditions property to define conditional formatting rules.

<dxfui:FormatConditionFilterElement FieldName="UnitPrice"/>



Allows a user to filter by numeric values.

<dxfui:RangeFilterElement FieldName="Price" />



Allows a user to specify a date interval.

<dxfui:DateRangeFilterElement FieldName="SalesDate" />



Allows a user to filter by date values.

<dxfui:CalendarFilterElement FieldName="SalesDate" />



Allows a user to apply predefined date filters.

<dxfui:DatePeriodsFilterElement FieldName="SalesDate" />



Allows a user to choose filter conditions.

<dxfui:MultiFilterElement FieldName="SalesDate" />



Consists of two tabs. The first tab allows a user to apply filter conditions. The second tab provides an Excel-style checklist.

<dxfui:ExcelStyleFilterElement FieldName="Employee" />