Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Collapse]WinForms Controls
  Prerequisites
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications and Dialogs
  [Expand]Editors and Simple Controls
  [Expand]Ribbon, Bars and Menu
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Collapse]Data Grid
   [Expand]Getting Started
   [Expand]Binding to Data
   [Expand]Grid View
   [Expand]View Technology
   [Expand]Grouping
   [Expand]Sorting
   [Expand]Summaries
   [Expand]Data Editing
   [Collapse]Filtering and Locating Rows
    [Collapse]Filtering
     [Expand]Filter Dropdowns
     [Collapse]Tutorials
       Tutorial: Column Filter Dropdowns
       Tutorial: Data Filtering Basics and Filter Panel Settings
       Tutorial: Excel-Style Custom Filter Dialog
       Tutorial: Filter Editor
       Tutorial: Filter Row
       Tutorial: Filtering and Locating Rows API
      Filtering Overview
      Filter Settings
      MRU Filters
      Automatic Filtering Row
      Filter Editor
      Custom Filter Dialog
      Filtering in Code
     Locating Rows in Code
     Incremental Search
     Searching via Find Panel
     Tutorial: Incremental Search
     Tutorial: Search/Find Panel
   [Expand]Focus and Selection Handling
   [Expand]Processing Rows
   [Expand]Formatting Cell Values
   [Expand]Master-Detail Relationships
   [Expand]Asynchronous Image Load
   [Expand]Export and Printing
   [Expand]Appearance and Conditional Formatting
   [Expand]Batch Modifications
   [Expand]Hit Information
   [Expand]Hints
   [Expand]Popup Menus
   [Expand]Saving and Restoring Layouts
   [Expand]Visual Elements
   [Expand]Design-Time Features
   [Expand]Examples
   [Expand]End-User Capabilities
    Included Components
  [Expand]Vertical Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Chart Control
  [Expand]Diagrams
  [Expand]Gauges
  [Expand]Map Control
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]Printing-Exporting
  [Expand]PDF Viewer
   Reporting
  [Expand]Snap
  [Expand]TreeMap Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Tutorial: Filter Editor

This walkthrough is a transcript of the Filter Editor video available on the DevExpress YouTube Channel.

The grid control ships with a built-in Filter Editor dialog that allows end-users to build filter criteria of any complexity using either the tree-like filter builder interface or a text editor with hints much like Visual Studio IntelliSense. In this tutorial, you will learn how end-users can invoke this dialog, what options affect its availability and how you can invoke it from code and customize it before it's displayed.

Expanded Invoking the Filter Editor and Creating Simple Filter Criteria

To invoke the Filter Editor, right-click any column header and select Filter Editor… in the context menu.

By default, the Filter Editor displays filter criteria as a tree where individual nodes represent simple filter conditions. The root node is the logical operator combining all conditions. Any filter condition consists of three parts: a column name, criteria operator and operand value. If the grid's data is not filtered, the editor contains one incomplete filter condition for the clicked column.

Click the value box and select Medium in the dropdown list.

Click OK to close the editor and apply changes. As a result, the grid displays only records with a priority set to Medium. Now you can invoke the Filter Editor using the Edit Filter button within the Filter Panel.

To add a new filter condition, click the plus button () next to the root node. This can also be done by clicking the logical operator and selecting Add Condition.

Select Name in the list of available columns. Then, use the Contains comparison operator and enter the 'vendor' string in the value box. Click Apply to filter data without closing the editor.

The grid now displays records with medium priority and names containing 'vendor' in them.

Expanded Deleting Filter Conditions

Now delete all filter conditions by clicking their buttons or by selecting Clear All in the logical operator's menu.

Expanded Constructing Complex Filter Criteria

You can now create a more complex filter criteria. To create a new condition group, click the root logical operator and select Add Group.

Change the created logical operator to OR.

Create two new conditions within this group. These conditions will select records that have a High priority or a status set to New. In the same manner, create one more OR condition group with two conditions. These conditions will select records with Created Date between January 1 and today or those where Fixed Date Is greater than April 1.

Click OK to filter data using the created criterion. You'll see the entire filter condition displayed in the filter panel.

Expanded Changing the Filter Editor Style

Now try a different filter condition editor UI. At design time, access the View's settings, expand ColumnView.OptionsFilter and set the ColumnViewOptionsFilter.DefaultFilterEditorView property to FilterEditorViewMode.Text.

Run the application and invoke the Filter Editor. Now you can type a filter string directly into the embedded Rich Text Editor. Dropdown lists of operators and field names are automatically invoked when typing a filter, much like the Visual Studio IntelliSense feature.

Locate the same property and set the editing mode to FilterEditorViewMode.VisualAndText. The Filter Editor will display both the Visual and Text editors in their own tabs.

Expanded Preventing End-Users from Invoking the Filter Editor

If you don't want end-users to invoke the dialog from the column header menu, set the ColumnViewOptionsFilter.AllowFilterEditor property to false.

Note that the filter panel's Edit Filter button has also become invisible.

Expanded Invoking and Customizing the Filter Editor in Code

Return to design-time and see how the Filter Editor can be invoked and customized in code.

In the Click event handler for the Show Filter Editor button, call the View's ColumnView.ShowFilterEditor method to invoke the Filter Editor in visual style.

Additionally, handle the View's ColumnView.FilterEditorCreated event, which is raised when the Filter Editor is about to be displayed. In the event handler, customize the value color using the FilterControl.AppearanceValueColor property of the event's FilterControlEventArgs.FilterControl parameter. Enable the FilterControl.ShowOperandTypeIcon option to allow values of one column to be compared to values in other columns or to predefined constants.

Run the application and click the Show Filter Editor button. In the invoked editor, add a new condition and then click the operand type icon that's now displayed on the left of the remove button.

Click the value box, select Date and time constants and choose This year.

Change the comparison operator to Is less than. Add another condition that selects records where Priority is Medium. Note that the value is painted using the red color as specified in the event handler.

Expanded See Also

How would you rate this topic?​​​​​​​