WPF - New Data Filtering Features (v18.2)

WPF Team Blog
12 November 2018

Data filtering is one of the most popular interactive features of our WPF UI Controls. In an effort to improve usability, we analyzed user interaction patterns for this functionality.

In v18.2, we added the following data filtering features to the Data Grid for WPF:

  • Filter Elements
  • New Data Filter Editor
  • New Date Operators
  • Record Count Display
  • Predefined Filters

In upcoming releases, we will support these features in other data-bound WPF controls, including WPF Charts and WPF Pivot Grid.

Filter Elements

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 Data Grid.

Filter Elements

This is an overview of the Filter Elements available in v18.2:

Radio ListRadio List
Checked ListChecked List
Checked Tree ListChecked Tree List
Predefined FiltersPredefined Filters

It is easy to connect Filter Elements to your control. Three steps are required:

  1. Add your Elements to a container (for instance the Accordion Control)
  2. Specify the field names of columns you want to filter, using the FieldName properties
  3. Set the attached property FilterElement.Context on the container to associate it with the filtering context of the data-bound control. The Filter Elements use this context to retrieve values, formatting settings and other details, and the context is configured with criteria from the Filter Elements in return.

Here is a XAML example:

  dxfui:FilterElement.Context="{Binding Path=FilteringContext, ElementName=grid}">
  <dxa:AccordionItem Header="Price ($)">
    <dxfui:RangeFilterElement FieldName="Price"/>
  <dxa:AccordionItem Header="Trademark">
    <dxfui:CheckedListFilterElement FieldName="TrademarkID"/>
  <dxa:AccordionItem Header="Transmission Type">
    <dxfui:RadioListFilterElement FieldName="TransmissionTypeID" />

<dxg:GridControl Name="grid"/>

You can see a sample setup in the Filtering UI demo. If you are reading this post on a machine that has the WPF demos installed, please follow this link to start the demo.

Documentation is available for Filter Elements.

New Data Filter Editor

We received many requests for enhancements to the Filter Editor. In order to deliver these without introducing breaking changes, we implemented a new Filter Editor. The old editor is still the default in v18.2. To enable the new editor, set the property DataViewBase.UseLegacyFilterEditor to false.

In the new editor you can now use a search box to quickly find a required field:

Filter Editor Search Box

You can select values from the data source to configure a filter. Each value in the list displays a record count.

Filter Editor showing Record Counts

You can apply predefined filters from the selection menu:

Filter Editor showing Predefined Filters

The Filter Editor demo shows this functionality in action. If you are reading this post on a machine that has the WPF demos installed, please follow this link to start the demo.

Here is the link to the feature documentation.

New Date Operators

In previous versions, if you applied a filter that included several dates…

Selecting several date values

… the Filter Panel displayed an expression similar to this:

Filter Panel showing old-style date expression

In v18.2 we added the Is Between Dates and Is On Dates operators to optimize the expression:

Filter Panel using now-style Is On Dates expression

You can also use these date operators in the new Filter Editor:

Filter Editor showing new date operators

Record Count Display

When you apply a filter, it can be useful to know how many records match the value you’re filtering for. The Excel-inspired Filter Drop-Down now displays record counts next to filter values:

Record Counts in Excel-inspired Drop-Down

You can enable this feature for a column using the property ColumnBase.FilterPopupMode, or for a view using DataViewBase.ColumnFilterPopupMode – set these properties to ExcelSmart. The new Filter Editor and the Filter Elements support this feature, too.

This link runs the demo Excel Style Filtering if it is installed on your machine.

Predefined Filters

Our Filtering UI allows end users to create complex filters, but you may want to save them time by providing predefined filters out of the box. You can now specify such filters using the property BaseColumn.PredefinedFilters:

<dxg:GridColumn FieldName="MPGCity">
      <dxfui:PredefinedFilterDescription Filter="?p>=25" Name="More than 25" />
        Filter="?p>15 AND ?p<25" Name="From 15 to 25" />
      <dxfui:PredefinedFilterDescription Filter="?p<15" Name="Less than 15" />

You can then show these filters in the PredefinedFiltersElement:


You can select predefined filters in the new Filter Editor as well as the Excel-inspired Filter Drop-Down.

What’s Next?

v18.2 supports the enhanced filtering functionality for the Data Grid, including the TreeListView. In future releases we will support the same feature set for Instant Feedback UI Mode and Virtual Sources, and we will make the functionality available in other data-bound DevExpress WPF controls. Additionally, we plan to introduce these features:

  • Conditional Format Filters
  • Grouped filter items in the Excel-inspired Filter Drop-down, with results displayed as a checked tree list
  • Enhancements to the Filter Editor API

Your Feedback Is Important To Us!

Many of the features described in this post are based on your feedback – thank you! Please feel free to make new suggestions in the comments below or by opening Support Center tickets.

Please take a moment to answer the following survey question:

Free DevExpress Products - Get Your Copy Today

The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We'll be happy to follow-up.
No Comments

Please login or register to post comments.