WPF - New Data Filtering Features (v18.2)

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.

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

Checkbox
Radio List
Checked List
Checked Tree List
Predefined Filters
Range
Calendar

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:

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

<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:

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

You can apply predefined filters from the selection menu:

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…

… the Filter Panel displayed an expression similar to this:

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

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

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:

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">
  <dxg:GridColumn.PredefinedFilters>
    <dxfui:PrefefinedFilterDescriptionCollection>
      <dxfui:PredefinedFilterDescription Filter="?p>=25" Name="More than 25" />
      <dxfui:PredefinedFilterDescription
        Filter="?p>15 AND ?p<25" Name="From 15 to 25" />
      <dxfui:PredefinedFilterDescription Filter="?p<15" Name="Less than 15" />
    </dxfui:PredefinedFilterDescriptionCollection>
  </dxg:GridColumn.PredefinedFilters>
</dxg:GridColumn>

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