WPF - New Data Filtering Features (v18.2)

Data filtering is one of the most popular interactive features of our WPF 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:

  • 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 Charts and 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:

CheckboxCheckbox
Radio ListRadio List
Checked ListChecked List
Checked Tree ListChecked Tree List
Predefined FiltersPredefined Filters
RangeRange
CalendarCalendar

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:

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

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:

2 comment(s)
Cyber Sinh

"New Data Filter Editor" is tagged as "CTP" in www.devexpress.com/.../New-2018-2.xml. This new feature is it ready for prime time? Thanks.

13 November, 2018
Alex Chuev (DevExpress Support)

Cyber,

The new Filter Editor control is marked as CTP because we plan to extend and improve it in 2019. Some of the features that we are currently looking at:

- The hierarchy for bands or nested properties in the field selector

- Advanced customization API

- Support for other data-bound controls (Pivot Grid, Reports)

- Support for Aggregate operations (e.g., "Accounts.Sum(Amount) < 100")

We may also change certain parts of the Filter Editor's appearance.

Thanks,

Alex

13 November, 2018

Please login or register to post comments.