[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Collapse]WPF Controls
 [Expand]What's Installed
 [Expand].NET Core 3 Support
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Expand]Controls and Libraries
 [Collapse]Scaffolding Wizard
   Getting Started
  [Expand]Data Access Layer
   UI Generation
   [Collapse]Building Outlook-Inspired and Hybrid UI Applications
     Lesson 1 - Automatically Generate Outlook-Inspired and Hybrid User Interfaces From Entity Framework
     Lesson 2 - Show Splash Screen on the Start of the Application
     Lesson 3 - Customize Layout of the Collection Views
     Lesson 4 - Show Sparkline Charts in Grid Cells
     Lesson 5 - Use Cards Layout in Collection Views
     Lesson 6 - Use Master-detail Data Representation in Collection Views
     Lesson 7 - Using Conditional Formatting in Grid
     Lesson 8 - Add Advanced End-user Filtering Functionality to Applications
     Lesson 9 - Show Windows 8-style Toast Notifications
     Lesson 10 - Add Windows 7-style Jump List to the Application
     Lesson 11 - Add Custom Actions to Application's Taskbar Thumbnail
   [Expand]Building Office-Inspired Applications
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Lesson 8 - Add Advanced End-user Filtering Functionality to Applications

Applications generated by the Scaffolding Wizard support client-side filtering out-of-the-box. This is achieved with the GridControl filtering capabilities. It is also posible to add basic server-side filtering capabilities.

In this lesson, you will learn how to implement the advanced filtering functionality that allows you to select one of the predefined filters and create complex filters at runtime and store them as a part of application settings.

Expanded Step 1 - Filtering Infrastructure Overview

In the How to: Create a Custom Filter tutorial, filters are represented by lambda expressions. This makes it easy to apply filters at runtime, but it is very difficult to serialize/deserialize them if it is necessary to allow an end-user to create custom application settings and store them between application launches.

In this lesson, you will use DevExpress criteria operators as they can be easily serialized/deserialized and converted to lambda expressions to perform filtered data queries. Although using Criteria Operators in view model code makes the View Model layer DevExpress-dependent, the use of Criteria Operators will be localized in several classes, so the View Model layer will mostly remain Criteria Operator-unaware.

The DevExpress.OutlookInpiredApp and DevExpress.HybridApp projects already contain all files of the filtering infrastructure (the Filtering folder).





Represent a view for the CustomFilterViewModel.


Used in a dialog for creating/editing a custom filter.


A serializable class that stores filter display names and their string representations. A collection of FilterInfo objects stores all filters for the specific module.


A view model that represents a filter in a UI.



Represent a predefined and a custom filter tree in UI in the DevExpress.OutlookInspiredApp project.


The main filtering view model that provides data for binding collections of predefined and custom filters in a UI and operations with them.


An interface that encapsulates filter storage for the specific application module. The interface is implemented in the FilterTreeModelPageSpecificSettings class that stores and saves filters within application settings.


An interface that allows you to apply a filter to a view model. This interface is implemented in a partial class for all collection view models. Since the CollectionViewModel class already contains the public FilterExpression property, the ISupportFiltering interface automatically gets an implicit implementation for it.



Represent a predefined filter list in UI in the DevExpress.HybridApp project.


The class provides a simple custom implementation of the SelectedItem property which is bindable in two-way mode. It is necessary for showing filters using the standard TreeView control that does not provide such a property.

Expanded Step 2 - Storing Filters in Application Settings

Both sample projects already contain sets of predefined and custom filters within Properties/Settings.settings. To modify them, open the file in the designer, select a cell in the Value column and click the ellipsis button. The FilterInfo collection editor will appear. This editor allows you to add, remove FilterInfo objects and edit their properties:

Expanded Step 3 - Adding Filtering Features to the OutlookInspiredApp

Add the FiltersSettings class which can be found in the .../Filtering/ViewModel folder of the result application. A link to the result application is at the end of the lesson. This class provides factory methods to create an initialized FilterTreeViewModel for each module.

Add the FilterTreeViewModel property to the DevAVDbModuleDescription.

Pass the FilterTreeViewModel object as a parameter to each module.

Update the filter tree view model when the active module is changed.

Bind the UI to the FilterTreeViewModel.

By default, Scaffolding Wizard generates a UI, displaying the collapsed NavigationPaneView in the NavBarControl within the main view (DevAVDbView.xaml) . We will use this navbar to display the filter tree.

Open the DevAVDbViewModel.cs file and add the following line to the DevAVDbViewModel constructor:

Change NavBarGroup content to FilterTreeView in the NavBarControl.ItemTemplate:

The filter editing form should be shown in a dialog window. Let's use the DialogService for this purpose. In the Document Outline window, select the root user control. Open its smart tag and select the MVVM Behaviors and Services tab. Click the Add Service link and choose DialogService from menu.

Select the added service and set its Name property to FilterDialogService. Customize the appearance of the dialog window by using the DialogStyle property:

Run the application:

The following commands are available from the context menu of the filter treeview:

  • Duplicate Filter for all predefined filters (Status group in the employees module)
  • New Custom Filter for Status and Custom Filters groups
  • Modify Custom Filter, Duplicate Custom Filter, Delete Custom Filter for all custom filters.

Modify the Custom Filter and New Custom Filter commands to invoke the custom filter editing dialog that contains FilterControl and allows you to build complex filter criteria:

Expanded Step 4 - Adding Filtering Features to the HybridApp

Add the FiltersSettings class which can be found in the .../Filtering/ViewModel folder of the result application. A link to the result application is at the end of the lesson. This class provides factory methods to create an initialized FilterTreeViewModel for each module.

Filtering implementation in the HybridApp is slightly different. In the OutlookInpiredApp, both the predefined and custom filters are displayed outside collection views in the main view (DevAVDbView).

In the HybridApp, predefined filters will be shown within some collection views to provide a smooth animated sliding transition between modules. So, you need to provide a way to assign the FilterTreeViewModel to the collection view. You also need a POCO Command that creates a new custom filter by sending the CreateCustomFilterMessage message that is handled by the main FilterTreeViewModel.

Add the FilterTreeViewModel property to the DevAVDbModuleDescription.

Change modules initialization as follows.

Update the filter tree view model when the active module is changed.

Place the StaticFiltersPanel to the left of the ListView or the GridControl in the following modules: EmployeeCollectionView.xaml, EmployeeTaskCollectionView.xaml, ProductCollectionView.xaml.

Run the application - the predefined filters list is shown on the left:

Custom filters will be available for 2 modules: ProductCollectionView and CustomerCollectionView.

To enable a custom filter chooser, add the following setters to the TileBar.ItemContainerStyle property:

Next, you will add the Create Custom Filter button to the ProductCollectionView module. Open the ProductCollectionView.xaml file and run the designer. Select the AppBar at the bottom of the view, invoke its smart tag and click the Add AppBarButton link.

Select the added button, open its smart tag and set the AppBarButton.Label property to Custom Filter, BarItem.AllowGlyphTheming to true, GlyphStretch to None, and HorizontalAlignment to Right. Bind the BarItem.Command property to CreateCustomFilterCommand.

To assign an image to the button, open DevExpress Image Gallery for the Glyph property and select the CustomFilter.png image that is already present in the project.

Add the same button to the CustomerCollectionView module.

Run the application to see how the new functionality works. Select a custom filter from the TileBar flyout.

The Custom Filter button invokes the Customer Filter Editor.

Applications that contain the result of this lesson are available here: DevExpress.OutlookInspiredApp and DevExpress.HybridApp.

Expanded See Also

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