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
   [Collapse]Getting Started
    [Collapse]Walkthroughs
     [Expand]Appearance and Conditional Formatting
     [Expand]Data Editing
     [Expand]Hit Information
     [Expand]Data Binding and Working with Columns
     [Expand]Grid View - Columns, Rows and Cells
     [Expand]Banded Views
     [Expand]WinExplorer View
     [Expand]Tile View
     [Expand]Grouping
     [Collapse]Filter and Search
       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
       Tutorial: Incremental Search
       Tutorial: Search/Find Panel
     [Expand]Sorting
     [Expand]Summaries
     [Expand]Split Presentation
     [Expand]Row Preview Sections
     Data Grid and Views
   [Expand]Data Binding
   [Expand]Views
   [Expand]Data Editing and Validation
   [Expand]Grouping
   [Expand]Sorting
   [Expand]Filter and Search
   [Expand]Summaries
   [Expand]Focus and Selection Handling
    Formatting Cell Values
   [Expand]Master-Detail Relationships
   [Expand]Asynchronous Image Load
   [Expand]Export and Printing
   [Expand]Appearance and Conditional Formatting
    Split Presentation
    Row Preview Sections
    Scrolling
   [Expand]Batch Modifications
   [Expand]Hit Information
    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]ASP.NET Core 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]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Tutorial: Column Filter Dropdowns

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

The tutorial will show you the Microsoft Excel and Microsoft Windows Explorer inspired data filtering features available in the DevExpress WinForms grid, including:

  • Filter dropdown lists
  • Custom Filter Dialogs
  • Most Recently used filter values
  • Filter dropdowns for date-time values
  • Checked lists in filter dropdowns

You will learn what's available by default, how to disable or customize these data filtering UI elements.

Expanded Regular Filter Dropdown Lists

Excel-style filter dropdowns are available using the buttons that appear when you hover column headers. For all column types, except date-time, the filter dropdown displays a simple list where you can select one item at a time.

When you select an item, the grid automatically closes the dropdown and filters the grid's data to display records that have the selected value in the corresponding column.

Dropdown lists also provide the (Custom) item, which invokes the Custom Filter Editor. Much like in Microsoft Excel, this dialog allows end-users to specify up to two filter conditions. Display records whose owner is Mike Roller or Carl Lucas.

You can filter the grid's data against multiple columns. If you click another column's filter button, you'll only see values from the records that meet the previously applied filter criteria. If you need to see values fetched from all records, click the filter button while holding the SHIFT key pressed. If a filter condition is applied to a column, this column's filter dropdown shows all values.

To clear filtering by a specific column, click the (All) item in the corresponding dropdown list.

After that, you can click a column's filter button again to find the most recently used items at the top of the list. They are separated from the rest of the items by a double line.

Now close the application and expand the View's ColumnView.OptionsFilter property. To disable the recently used filter items display, turn off the ColumnViewOptionsFilter.AllowColumnMRUFilterList option. Change the dropdown height by setting the ColumnViewOptionsFilter.ColumnFilterPopupMaxRecordsCount property to 10.

Run the application. Now column header dropdowns display 10 or less items and a vertical scrollbar, if required. Filter dropdowns no longer display the most recently used items.

Expanded Calendar Filter Dropdowns

Click the filter button in a date-time column. You'll see a dropdown that has an embedded calendar in it. After selecting the desired date or interval, the grid immediately filters its data.

You can also use check boxes below the calendar to select common date intervals such as "Earlier this month", "Earlier this year", and so on. To clear the current filter, select the Show all check box. To hide the dropdown, click the close button.

Expanded Checked Filter Dropdown Lists

You can also use check list dropdowns, much like in newer versions of Microsoft Excel or Windows File Explorer. To enable this mode, select a column, expand its GridColumn.OptionsFilter property and set the OptionsColumnFilter.FilterPopupMode option to FilterPopupMode.CheckedList.

Run the application and click the column's filter button. Now you can select multiple items simultaneously. Select three values and click OK.

The grid now displays records that have any of those values selected in the dropdown.

To clear filtering against this column, invoke the dropdown, click Select All, and then OK.

Expanded Filtering Empty and Null Values

Filter dropdowns provide special items to handle empty or null values. If you select the (Blanks) item in the dropdown, the grid will display records whose values are empty.

In the same manner, you can select (Non Blanks) to filter out those empty values. Similarly, checked dropdown lists provide the (Blanks) item.

Dropdowns for date-time columns don't include such items by default.

Close the application. To hide the (Blanks) and (Non Blanks) items from dropdowns, set the OptionsColumnFilter.ShowBlanksFilterItems property to False. Select the Fixed Date column and set its OptionsColumnFilter.ShowEmptyDateFilter option to True. This adds a checkbox for null values into date-time filter dropdowns.

Run the application to see the result. Invoke the Priority column dropdown and see that it doesn't contain (Blanks) and (Non Blanks) items. Then, click the filter button within the Fixed Date column header. Now this column dropdown displays the additional Show Empty check box.

Expanded Customizing Filter Dropdown Lists

The grid also allows you to manually customize filter dropdown lists.

  • Customizing Regular Dropdown Lists

    You can add new or delete existing items. Switch to design time to see how this can be done.

    Regular dropdown lists can be customized with the View's ColumnView.ShowFilterPopupListBox event, which fires before the filter dropdown is displayed. Write a handler for this event to add a new custom item to the Priority column's dropdown. The event's Column parameter specifies the column whose dropdown is about to be displayed. First, find the index of the first value item to insert a custom item before it. To do this, iterate through items displayed by the current dropdown using the RepositoryItemComboBox.Items property of the event's FilterPopupListBoxEventArgs.ComboBox parameter. To skip a double line that separates MRU items from predefined items, check whether the current item is represented by the FilterItem object. Then, use the current item's Value property. If it's of the FilterItem or ColumnFilterInfo type, then the current item is not a value item. Once a value item is detected, the search process should be stopped.

    After that, create a filter criterion to select records with High and Medium priorities. Specify the desired filter condition and text to display within the filter panel, and create a new ColumnFilterInfo object with these settings. Insert the new filter item with the "Important" caption into the located position within the filter dropdown.

    Run the application to see the result. Click the Priority column's filter button to find the Important item displayed within the dropdown. When you select this item, the grid displays records with the priority set to High or Medium.

  • Customizing Checked Dropdown Lists

    Now close the application and customize the checked dropdown list in the Name column. Select the View and handle its ColumnView.ShowFilterPopupCheckedListBox event. The event's Column parameter identifies the column whose dropdown is about to be displayed. The FilterPopupCheckedListBoxEventArgs.CheckedComboBox parameter provides the item collection of the dropdown list. The event handler disables items starting with 'Data' and removes items starting with 'Help'.

    Run the application again and click the filter button in the Name column. The checked dropdown list that appears doesn't contain items starting with 'Help' and has three disabled items whose text starts with 'Data'.

Expanded See Also

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