New to Telerik UI for WinUI? Download free 30-day trial

Filtering Overview

The DataGrid provides a built-in filtering functionality that allows the user to easily filter data by one or more columns. Everything that can be achieved by the end user through the UI can also be done in code by using the API exposed by the component.

Filtering UI

The built-in filtering UI allows the user to easily filter data by column values. The filtering functionality will be enabled out-of-the-box for most .NET primitive types such as strings, numeric types, DateTimes, and so on.

DataGrid Filtering UI

As can be seen in the image above, the default filtering UI consists of two parts—a distinct filters list and two field filters.

If you want to hide the top part of this UI (the distinct values) for a particular column, you can set the ShowDistinctValuesFilter property of the respective column to False.

Hide the Distinct Values List

<grid:DataGridTextColumn PropertyName="City" ShowDistinctValuesFilter="False" /> 
You can also use the UserFilterMode property of the DataGrid to enable or disable the filtering UI as a whole.

Disable the Filtering Functionality

<grid:RadDataGrid UserFilterMode="Disabled" /> 
To enable or disable the filtering of a specific column, use the CanUserFilter property of that column.

Disable the Filtering Functionality of a Column

<grid:DataGridTextColumn PropertyName="City" CanUserFilter="False" /> 

Filtering Modes

The DataGrid supports the following filter modes that depend on the value of its ColumnDataOperationsMode property.

  • (Default) Inline Filter UI—The ColumnDataOperationsMode is set to Inline. The Filter UI is integrated in the column header and is represented by a filtering funnel which can be clicked to open the filtering popup.

    Inline ColumnDataOperationsMode

    Inline ColumnDataOperationsMode

  • Flyout Filter UI—The ColumnDataOperationsMode is set to Flyout. The Filter UI is displayed with slide animation from the top of the grid. To open it, click the header cell of the column.

    Column Data Operations Menu

    Flyout ColumnDataOperationsMode 1

    If you then click on the Filter button, you will be presented with the filtering flyout.

    Flyout ColumnDataOperationsMode

    Flyout ColumnDataOperationsMode 2

Set the ColumnDataOperationsMode

<grid:RadDataGrid ColumnDataOperationsMode="Flyout" /> 

Programmatic Filtering

The DataGrid also allows you to implement programmatic filtering by adding FilterDescriptors to its FilterDescriptors collection.

See Also

In this article
Not finding the help you need?