How to Filter WPF DataGrid with Excel Like UI filtering?

About the sample

This example illustrates how to filter the wpf datagrid like in Excel

WPF DataGrid (SfDataGrid) provides excel like filtering UI and also advanced filter UI to filter the data easily. UI filtering can be enabled by setting SfDataGrid.AllowFiltering property to true , where you can open filter UI by clicking the Filter icon in column header and filter the records.

<syncfusion:SfDataGrid x:Name="dataGrid"    
                       AutoGenerateColumns="False"
                       AllowFiltering="True"
                       ColumnSizer="Star"
                       AllowEditing="True"
                       ItemsSource="{Binding ProductInfo}">

You can enable/disable filtering for particular column by setting GridColumn.AllowFiltering property.

<syncfusion:GridTextColumn    HeaderText="Product" 
                              MappingName="Product"  
                              AllowFiltering="True"  />

Note:

1. GridColumn.AllowFiltering has higher priority than SfDataGrid.AllowFiltering property.
2. UI filtering is not supported when using on-demand paging by setting UseOnDemandPaging to true.

Built-in UI Views

DataGrid filter UI comprises of two different UIs.

• Checkbox Filter UI - Provides excel like filter interface with list of check boxes.
• Advanced Filter UI - Provides advanced filter options to filter the data.

By default, both Checkbox Filter and Advanced Filter are loaded while opening the filter pop-up. You can switch between AdvancedFilter and CheckboxFilter by using AdvancedFilter button in the UI View.

Checkbox Filter UI

In CheckBoxFilterControl a list with checkboxes in show FilterElement, you may need to filter out all data which the checkboxes are checked or filter out all data which the checkboxes are unchecked.

The following are the control parts of Checkbox Filtering.

Advanced Filter UI

Advanced filter UI provides multiple filter options to filter the data easily. Filter menu options are loaded based on Advanced filter type by automatically detecting the underlying date type.

Below are the built-in filter types supported.

• Text Filters – Loads various menu options to filter the display text effectively.

• Number Filters – Loads various menu options to filter the numeric data.

• Date Filters – Loads various menu options and DatePicker to filter DateTime type column.

Text Filters	Number Filters	Date Filters
When the string value is bounded to the GridColumn or the items source is dynamic ,then Text Filters are loaded in AdvancedFilterControl.	When integer, double, short, decimal, byte or long are bound to the GridColumn then Number Filters are loaded in AdvancedFilterControl.	When the DateTime type value is bound to the GridColumn , then Date Filters are loaded in AdvancedFilterControl.
Filter menu options 1. Equals 2. Does Not Equal 3. Begins With 4. Does Not Begin With 5. Ends With 6. Does Not End With 7. Contains 8. Does Not Contain 9. Empty 10. Not Empty 11. Null 12. Not Null	Filter menu options 1. Equals 2. Does Not Equal 3. Null 4. Not Null 5. Less Than 6. Less Than or Equal 7. Greater Than 8. Greater Than or Equal	Filter menu options 1. Equals 2. Does Not Equal 3. Before 4. Before Or Equal 5. After 6. After Or Equal 7. Null 8. Not Null

Note:

1. Null and Not Null options are available only when AllowBlankFilters is set to True.
2. If the column is GridUnboundColumn or GridMaskColumn, then Text Filters will be loaded.

Take a moment to peruse the WPF DataGrid - filtering, where you can find about Filtering, with code examples.

Requirements to run the demo

Visual Studio 2015 and above versions