WPF Controls: Excel-Inspired Filtering

Our new Excel-Style Drop-Down Filter is designed to simplify usage and provides various data analysis enhancements for end users. This drop-down filter is also engineered to extend customization capabilities for developers.

With our most recent update (v19.2) this drop-down filter is used by default in the following controls:

• Data Grid
• TreeList
• Pivot Grid

The following summary details the capabilities of our Excel-Style Drop-Down Filter:

• Record Count Display
• Date Intervals
• Data Analysis Filters
• Conditional Formatting Filters
• Group Filters
• Predefined Filters
• Customization

Record Count Display

When you apply a filter, you may wish to know how many records match a given filter value. Our Excel-Style Drop-Down Filter displays a record count next to filter values.

Date Intervals

Our Excel-Style Drop-Down Filter allows you to combine different date intervals within it.

Data Analysis Filters

You can apply the following numerical filters within our Excel-Style Drop-Down Filter:

• Top / Bottom N
• Above / Below Average
• Unique / Duplicate

As you can see, these filters allow you to analyze information within the Data Grid without constructing complex filter conditions.

Documentation | Demo | Blog

Conditional Formatting Filters

The Data Grid and TreeList allow you to specify Conditional Formatting rules and apply filters based on these rules.

Documentation | Demo | Blog

Group Filters

In the Data Grid and TreeList, you can group filter values from two or more columns, and present results as a hierarchical checked list. This feature allows users to filter data against multiple columns.

To incorporate this feature, set the ColumnBase.FilterPopupGroupFields property to names of the fields against which filter values should be grouped. Separate names by a comma, a semicolon, or a space. The order of field names determines the hierarchy within the group.

<dxg:GridControl>
  <dxg:GridControl.Columns>
    <dxg:GridColumn FieldName="ID" />
    <dxg:GridColumn FieldName="Trademark" />
    <dxg:GridColumn FieldName="Model" FilterPopupGroupFields="Trademark;Model" />
  </dxg:GridControl.Columns>
  ...
</dxg:GridControl>

Documentation | Demo

Predefined Filters

Our Excel-style Drop-Down Filter allows you to ship predefined filters. Predefined Filters are displayed within the Filter Rules tab.

The Data Grid and TreeList allow you to specify such filters with the ColumnBase.PredefinedFilters property.

<dxg:GridColumn FieldName="UnitPrice">
    <dxg:GridColumn.PredefinedFilters>
        <dxfui:PredefinedFilterCollection>
            <dxfui:PredefinedFilter Name="Less than 10" Filter="?p ≤ 10" />
            <dxfui:PredefinedFilter Name="Between 10 and 50" 
            	Filter="?p > 10 and ?p ≤ 50" />
            <dxfui:PredefinedFilter Name="Between 50 and 100" 
            	Filter="?p > 50 and ?p ≤ 100" />
            <dxfui:PredefinedFilter Name="Greater than 100" Filter="?p > 100" />
        </dxfui:PredefinedFilterCollection>
    </dxg:GridColumn.PredefinedFilters>
</dxg:GridColumn> 

Documentation | Demo

Customization

Use the ColumnBase.CustomColumnFilterPopupTemplate property to specify a custom data template. In the template, define a filter element and specify its settings.

Customize Filter Popup Content

<dxg:GridControl x:Name="grid" ItemsSource="...">
    <dxg:GridControl.Columns>
        ...
        <dxg:GridColumn FieldName="Quantity">
            <dxg:GridColumn.CustomColumnFilterPopupTemplate>
                <DataTemplate>
                    <dxfui:RangeFilterElement x:Name="PART_FilterElement"/>
                </DataTemplate>
            </dxg:GridColumn.CustomColumnFilterPopupTemplate>
        </dxg:GridColumn>
        ...
    </dxg:GridControl.Columns>
</dxg:GridControl>

Documentation | Demo

Customize the Operator List

<dxg:GridColumn FieldName="OrderDate">
    <dxg:GridColumn.CustomColumnFilterPopupTemplate>
        <DataTemplate>
            <dxfui:ExcelStyleFilterElement x:Name="PART_FilterElement" 
            	QueryOperators="OnExcelStyleFilterQueryOperators"/>
        </DataTemplate>
    </dxg:GridColumn.CustomColumnFilterPopupTemplate>
</dxg:GridColumn>

void OnExcelStyleFilterQueryOperators(object sender, 
	ExcelStyleFilterElementQueryOperatorsEventArgs e) {
    
    if(e.FieldName == "OrderDate") {
        e.Operators.Clear();
        e.Operators.Add(new ExcelStyleFilterElementOperatorItem(
        	ExcelStyleFilterElementOperatorType.Equal));
        e.Operators.Add(new ExcelStyleFilterElementOperatorItem(
        	ExcelStyleFilterElementOperatorType.NotEqual));
    }
} 

Documentation | Demo

Create Custom Operators

<dxg:GridColumn FieldName="OrderDate">
    <dxg:GridColumn.CustomColumnFilterPopupTemplate>
        <DataTemplate>
            <dxfui:ExcelStyleFilterElement x:Name="PART_FilterElement" 
            	QueryOperators="OnExcelStyleFilterQueryOperators"/>
        </DataTemplate>
    </dxg:GridColumn.CustomColumnFilterPopupTemplate>
</dxg:GridColumn>

const string CustomFunctionName = "LastYears";
var currentYear = DateTime.Now.Year;

ICustomFunctionOperatorBrowsable customFunction = CustomFunctionFactory.Create(
	CustomFunctionName, (DateTime date, int threshold) => {
    	return currentYear >= date.Year && currentYear - date.Year <= threshold;
    }
);

void OnExcelStyleFilterQueryOperators(object sender, 
	ExcelStyleFilterElementQueryOperatorsEventArgs e) {
    
    if(e.FieldName == "OrderDate") {
        // ...
        var customFunctionEditSettings = new BaseEditSettings[] { 
            new TextEditSettings { MaskType = MaskType.Numeric, Mask = "D", 
            	MaskUseAsDisplayFormat = true } 
        };
        e.Operators.Add(new ExcelStyleFilterElementOperatorItem(CustomFunctionName, 
        	customFunctionEditSettings) { Caption = "Last Years" });
    }
} 

Documentation | Demo

Customize Operand Template

<UserControl.Resources>
    <DataTemplate x:Key="ternaryTemplate">
        <dxe:TrackBarEdit Minimum="0" Maximum="300" MinWidth="120" TickPlacement="None">
            <dxe:TrackBarEdit.EditValue>
                <MultiBinding Converter="{local:TrackBarEditRangeConverter}">
                    <Binding Path="LeftValueItem.Value"/>
                    <Binding Path="RightValueItem.Value"/>
                </MultiBinding>
            </dxe:TrackBarEdit.EditValue>
            <dxe:TrackBarEdit.StyleSettings>
                <dxe:TrackBarRangeStyleSettings />
            </dxe:TrackBarEdit.StyleSettings>
        </dxe:TrackBarEdit>
    </DataTemplate>
</UserControl.Resources>

...

<dxg:GridColumn FieldName="Quantity">
    <dxg:GridColumn.CustomColumnFilterPopupTemplate>
        <DataTemplate>
            <dxfui:ExcelStyleFilterElement x:Name="PART_FilterElement" 
				QueryOperators="OnExcelStyleFilterQueryOperators"/>
        </DataTemplate>
    </dxg:GridColumn.CustomColumnFilterPopupTemplate>
</dxg:GridColumn>

void OnExcelStyleFilterQueryOperators(object sender, 
	ExcelStyleFilterElementQueryOperatorsEventArgs e) {
    
    if(e.FieldName == "Quantity") {
        var template = (DataTemplate)FindResource("ternaryTemplate");
        e.Operators[ExcelStyleFilterElementOperatorType.Between].OperandTemplate = 
        	template;
        e.Operators[ExcelStyleFilterElementOperatorType.NotBetween].OperandTemplate = 
        	template;
    }
} 

Documentation | Demo

Useful Resources

• Filter Editor
• Filter Elements
• Filter Behavior

Your Feedback Matters

We’d love to know your thoughts on our Excel-Style Drop-Down Filter. If you’re using our Data Grid, TreeList, or Pivot Grid, feel free to comment below and share your usage experiences with the entire DevExpress community.