Skip to main content

Filter and Search

  • 13 minutes to read

When a filter is applied, the View displays only those records that meet the current filter criteria. You can filter data against one or multiple columns. If you filter against multiple columns, the grid applies the AND logical operator between column filters.

Most DevExpress data-aware components (Data Grid, Tree List, Vertical Grid, etc.) have a filter UI and API similar to those described in this topic.

Filter Drop-down Menus (Excel-style)

To invoke a filter drop-down menu for a column, click the filter icon within the column header. In the “Values” tab, users can select specific cell values from those that are displayed by the Data Grid.

Grid - Excel Filter Drop-down Menu Values

Note

Values entered by users are parsed according to Find Panel syntax rules.

The “Filters” tab gives users a wider pool of filter options. For example, when a user filters data by date, you can show only those records that correspond to the previous week.

Grid - Excel Filter Drop-down Menu

The content of a filter drop-down menu depends on the type of data displayed by the related grid column. For instance, the figure below illustrates what this menu looks like when data is filtered by a numeric column.

Grid - Excel Filter Drop-down Menu Numeric Data

This type of filter drop-down menu is called “Excel-style”, and is the default filter menu type in v17.1 and higher.

Related API

See the following topic to learn how to customize Excel-style menus dynamically: Advanced Filter and Search Concepts.

Classic Filter Drop-down Menus

The Data Grid can display classic filter menus instead of Excel-style drop-down menus. Classic filter menus include calendars for DateTime columns and regular drop-down menus for other types of columns.

Grid - Classic Filter Drop-down Menus

Related API:

You can also use checked list menus instead of regular drop-down menus.

FilterDropdown-Checked.png

Related API:

You can also replace calendar filter menus with checked lists. Additionally, you can select between three types of calendar-based menus: DateSmart (default menu type), DateAlt, and Date. The figure below illustrates the DateAlt menu.

CalendarFilterDropdown-DateAlt.png

All these menus contain the same calendar that chooses a specific date but with different sets of date intervals. The table below lists several of these intervals.

DateSmart

Date

DateAlt

Check boxes are visible only if there are Data Grid records that fall into corresponding intervals.

  • Beyond this year — Dates that follow the current year.
  • Later this year — Dates of the current year starting with the following month.
  • Later this month — Dates of the current month that occur after the following week.
  • Next week — Dates that occur in the following week.
  • Later this week — Dates of the current week starting with the day after tomorrow.
  • Earlier this week — Dates of the current week that are prior to yesterday.
  • Last week — Dates of the previous week.
  • Earlier this year — Dates of the current year that are prior to the current month.
  • Prior to this year — Dates that are prior to the current year.

Same time intervals as for the DateSmart type. All check boxes are available, even if there is no data that falls into the corresponding date range.

  • Beyond - Dates that belong to the 3rd month from the current month or beyond.
  • Earlier - Dates that belong to the 7th month from the current month or earlier.

Related API:

Automatic Filter Row

Watch Video

Another way to filter data at runtime is to utilize the Automatic Filter Row. This row is displayed above regular data rows and allows users to type in filter values (including ‘*’ and ‘%’ wildcards) and select filter operators (NotLike, Equals, Between, etc.).

Grid - Auto Filter Row Grid - Auto Filter Row Animation

Note that cell editors displayed in the Automatic Filter Row ignore their masks and allow users to enter any characters. The following code snippet demonstrates how to keep the numeric mask active for the Automatic Filter Row:

private void GridView1_ShownEditor(object sender, System.EventArgs e) {
    GridView view = sender as GridView;
    TextEdit edit = view.ActiveEditor as TextEdit;
    if (edit != null && view.IsFilterRow(view.FocusedRowHandle))
        edit.Properties.Mask.MaskType = DevExpress.XtraEditors.Mask.MaskType.Numeric;
}

Note that if an Auto Filter Row cell uses a RepositoryItemRichTextEdit in-place editor, users can select only the “Like” filter condition for this cell. Other conditions (“Starts with”, “Equals”, etc.) are not available for RTF values.

Related API:

Filter Panel

When you apply a filter, the View shows a filter panel. Users can utilize this panel to modify and remove current filters.

Grid - Filter Panel Layout

Related API:

Users can focus a grid column and start typing. The Data Grid focuses and highlights the first matching record. To find other records, press the Ctrl+Up and Ctrl+Down hotkeys.

Data Grid - Filtering - Incremental Search

Related API:

Filter Editor

The Filter Editor dialog allows users to build complex filter criteria, combined from multiple expressions. To invoke this dialog, users can do one of the following:

Grid - Filter Editor

You can modify the ColumnViewOptionsFilter.DefaultFilterEditorView property to enable the Filter Editor’s “Text” panel/tab in which users can type filter expressions manually.

New Filter Editor Control

In v18.1 and later, the legacy Filter Editor is replaced with its updated version that features the advanced “Text” panel. This panel now supports syntax highlighting and auto-complete to facilitate the input. To revert data-aware controls back to the legacy Filter Editor version, disable the static WindowsFormsSettings.UseAdvancedFilterEditorControl property.

Related API:

Show example

The following code snippet allows users to filter the “Price” column data using the SpinEdit and CalcEdit editors.

FilterControl - Custom Editor

private void GridView1_FilterEditorCreated(object sender, DevExpress.XtraGrid.Views.Base.FilterControlEventArgs e) {
    e.FilterControl.BeforeShowValueEditor += FilterControl_BeforeShowValueEditor;
}
RepositoryItemSpinEdit reSpinEdit = new RepositoryItemSpinEdit();
RepositoryItemCalcEdit reCalcEdit = new RepositoryItemCalcEdit();
private void FilterControl_BeforeShowValueEditor(object sender, DevExpress.XtraEditors.Filtering.ShowValueEditorEventArgs e) {
    if (e.CurrentNode.FirstOperand.PropertyName != "Price") return;
    RepositoryItemTextEdit item = null;
    if (e.FocusedElementIndex == 2)
        item = reSpinEdit;
    else
        item = reCalcEdit;
    item.Mask.MaskType = DevExpress.XtraEditors.Mask.MaskType.Numeric;
    item.Mask.EditMask = "c";
    e.CustomRepositoryItem = item;
}

Filter Criteria Display Style

The following list demonstrates the available display styles of filter criteria in controls.

  • Visual -

    Renders filter criteria in an easy-to-read format and uses skin-based colored highlights to differentiate between column names, functions, and values. In the Filter Panel, the ‘x’ button is displayed when you hover over a condition. This button allows users to remove individual conditions from the filter.

    image

  • Text -

    Renders filter criteria in a text-based format.

    image

Related API:

Find Panel

The Find Panel allows users to apply a temporary filter that filters data across all Data Grid columns at once. To invoke this panel, press “Ctrl+F” at runtime. Type the text you need to search for, then press Enter or click “Find”.

Grid - Find Panel

Note that the Find Panel does not highlight cells with HTML text.

Related API:

See the following topic to learn more: Find Panel.

Search in Column Headers

You can use the GridView.OptionsFilter.InHeaderSearchMode property to enable built-in search boxes within the View’s column headers. The search boxes are used to filter column data or to search in columns, depending on the mode you choose.

‘TextFilter’ Mode

Users can type text in the search boxes to filter against the columns.

Data Grid - In-header search box - Filter mode

‘TextSearch’ Mode

Users can type text in the search boxes to search for column data. The grid highlights cell text that matches the specified search string.

Data Grid - In-header search box - Search mode

Use the following shortcuts to navigate between search results:

  • Ctrl+Down Arrow or F3 — Navigates to the next search result.
  • Ctrl+Up Arrow or SHIFT+F3 — Navigates to the previous search result.

The GridColumn.OptionsFilter.AllowInHeaderSearch property allows you to disable search boxes in individual column headers.

Note

The Find Panel and In-Header Search are mutually exclusive options. They are not intended to be used together.

Search Syntax

The following list demonstrates sample search expressions supported in column header search boxes:

  • Spa — Finds records whose column values contain this string (in non-numeric columns).
  • 10 — Finds records whose column values are equal to “10” (in numeric columns).
  • =Spain or =22 — Finds records whose column values are equal to the specified value.
  • <>40 — Finds records whose column values are not equal to the specified value.

    Other supported comparison operators include: <, >, <=, >=, and != (equivalent to <>).

  • =USA,Spain,Germany or =USA;Spain;Germany — Finds records whose column values are equal to any of these listed values.
  • [10:20] or [10..20] — Finds records whose column values belong to the specified inclusive range.

Text search is case-insensitive.

See the following topic for more information: GridView.OptionsFilter.InHeaderSearchMode.

Cheat Sheets and Best Practices

DevExpress data-aware UI controls support a similar filter UI and API. Read the following quick-reference guides for detailed information:

Filter DevExpress Data-Aware Controls

See Also