Skip to main content

Filtering Data Items

The following page provides a list of examples that demonstrate how to filter data items.

tip

All examples in this topic assume that the grid is bound to the Orders table of the Northwind database, unless stated otherwise.

Filtering data items (Filter Event)

The following example demonstrates how to filter the data items displayed in a grid using the Filter event. Only the data items whose ShipVia property value is "3" will be displayed in the grid.

  <Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">
<Grid.Resources>
<xcdg:DataGridCollectionViewSource x:Key="cvs_orders"
Source="{Binding Source={x:Static Application.Current},
Path=Orders}"
Filter="ShipViaFilter"/>
</Grid.Resources>
<xcdg:DataGridControl x:Name="OrdersGrid"
ItemsSource="{Binding Source={StaticResource cvs_orders}}"/>
</Grid>

The next example demonstrates how to filter data items using the Filter predicate delegate.

  DataGridCollectionView view = new DataGridCollectionView( Orders );
view.Filter = new Predicate<object>( ShipViaFilter );
dataGridControl.ItemsSource = view;

private bool ShipViaFilter( object item )
{
object value = ( ( System.Data.DataRow )item )[ "ShipVia" ];
if( ( value != null ) && ( value != DBNull.Value ) )
{
if( ( int )value == 3 )
return true;
}
return false;
}

Enabling automatic filtering

The following example demonstrates how to enable automatic filtering, disabling it for the columns that will not support it and filtering the distinct values of the ShipCity column.

  <Grid>
<Grid.Resources>
<xcdg:DataGridCollectionViewSource x:Key="cvs_orders"
Source="{Binding Source={x:Static Application.Current},
Path=Orders}"
AutoFilterMode="And"
DistinctValuesConstraint="Filtered"
AutoCreateItemProperties="False">
<xcdg:DataGridCollectionViewSource.ItemProperties>
<xcdg:DataGridItemProperty Name="ShipCountry"
Title="Country"/>
<xcdg:DataGridItemProperty Name="ShipCity"
Title="City"/>
<xcdg:DataGridItemProperty Name="ShipAddress"
Title="Address"/>
<xcdg:DataGridItemProperty Name="ShipPostalCode"
Title="Postal Code"/>
<xcdg:DataGridItemProperty Name="ShipName"
Title="Name"
CalculateDistinctValues="False"/>
<xcdg:DataGridItemProperty Name="OrderDate"
Title="Order Date"
CalculateDistinctValues="False"/>
<xcdg:DataGridItemProperty Name="Freight"
CalculateDistinctValues="False"/>
</xcdg:DataGridCollectionViewSource.ItemProperties>
</xcdg:DataGridCollectionViewSource>
</Grid.Resources>
<xcdg:DataGridControl x:Name="OrdersGrid"
ItemsSource="{Binding Source={StaticResource cvs_orders}}"/>
</Grid>

Providing a new auto-filter control style

The following example demonstrates how to provide the ShipCountry column with a new style for its associated AutoFilterControl that will only allow single selection.

<Grid>
<Grid.Resources>
<xcdg:DataGridCollectionViewSource x:Key="cvs_orders"
Source="{Binding Source={x:Static Application.Current},
Path=Orders}"
AutoFilterMode="And"
DistinctValuesConstraint="Filtered"
AutoCreateItemProperties="False">
<xcdg:DataGridCollectionViewSource.ItemProperties>
<xcdg:DataGridItemProperty Name="ShipCountry"
Title="Country"/>
<xcdg:DataGridItemProperty Name="ShipCity"
Title="City"/>
<xcdg:DataGridItemProperty Name="ShipAddress"
Title="Address"/>
<xcdg:DataGridItemProperty Name="ShipPostalCode"
Title="Postal Code"/>
<xcdg:DataGridItemProperty Name="ShipName"
Title="Name"
CalculateDistinctValues="False"/>
<xcdg:DataGridItemProperty Name="OrderDate"
Title="Order Date"
CalculateDistinctValues="False"/>
<xcdg:DataGridItemProperty Name="Freight"
CalculateDistinctValues="False"/>
</xcdg:DataGridCollectionViewSource.ItemProperties>
</xcdg:DataGridCollectionViewSource>
<Style x:Key="autoFilterControlStyle"
TargetType="{x:Type xcdg:AutoFilterControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<ListBox x:Name="PART_DistinctValuesHost"
SelectionMode="Single"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<xcdg:DataGridControl x:Name="OrdersGrid"
ItemsSource="{Binding Source={StaticResource cvs_orders}}">
<xcdg:DataGridControl.Columns>
<xcdg:Column FieldName="ShipCountry"
AutoFilterControlStyle="{StaticResource autoFilterControlStyle}"/>
</xcdg:DataGridControl.Columns>
</xcdg:DataGridControl>
</Grid>

Creating external auto-filter controls

The following example demonstrates how to use a ComboBox as an auto-filter control to automatically filter the content of the ShipCountry column. ComboBox controls do not support multiple selections; therefore, the values of the target column will only be filtered by 1 value.

Since, by default, the auto-filter control in the column-manager-cell drop downs support multiple selections, it is recommended to deactivate the drop down by setting the AllowAutoFilter property of the ColumnManagerRow to false to hide the column-manager cells' auto-filter controls and prevent unexpected synchronization behavior between the controls that have the same auto-filter target column or different selection modes.

  <Grid>
<Grid.Resources>
<xcdg:DataGridCollectionViewSource x:Key="cvsOrders"
Source="{Binding Source={x:Static Application.Current},Path=Orders}"
AutoFilterMode="And"
AutoCreateItemProperties="False"
DefaultCalculateDistinctValues="False"
DistinctValuesConstraint="Filtered"
DistinctValuesRefreshNeeded="cvsOrders_DistinctValuesRefreshNeeded">
<xcdg:DataGridCollectionViewSource.ItemProperties>
<xcdg:DataGridItemProperty Name="ShipCountry"
Title="Country"
CalculateDistinctValues="True" />
<xcdg:DataGridItemProperty Name="ShipCity"
Title="City"
CalculateDistinctValues="True" />
<xcdg:DataGridItemProperty Name="ShipAddress"
Title="Address" />
<xcdg:DataGridItemProperty Name="ShipPostalCode"
Title="Postal Code" />
<xcdg:DataGridItemProperty Name="ShipName"
Title="Name" />
<xcdg:DataGridItemProperty Name="OrderDate"
Title="Order Date" />
<xcdg:DataGridItemProperty Name="Freight" />
</xcdg:DataGridCollectionViewSource.ItemProperties>
</xcdg:DataGridCollectionViewSource>
</Grid.Resources>
<DockPanel>
<StackPanel Margin="20,0,0,0"
Orientation="Horizontal"
DockPanel.Dock="Top"
HorizontalAlignment="Left">
<xcdg:AutoFilterControl x:Name="ShipCountryAutoFilterControl"
AutoFilterColumn="{Binding ElementName=dataGrid, Path=Columns[ShipCountry]}"
AutoFilterContext="{Binding ElementName=dataGrid, Path=DataGridContext}">
<xcdg:AutoFilterControl.Template>
<ControlTemplate TargetType="{x:Type xcdg:AutoFilterControl}">
<StackPanel>
<Button Content="Clear Country filter"
Command="xcdg:AutoFilterControl.ClearAutoFilterValues"
CommandTarget="{Binding ElementName=ShipCountryAutoFilterControl}" />
<ComboBox x:Name="PART_DistinctValuesHost"
DropDownOpened="ShipCountryAutoFilterControl_DropDownOpened" />
</StackPanel>
</ControlTemplate>
</xcdg:AutoFilterControl.Template>
</xcdg:AutoFilterControl>
<xcdg:AutoFilterControl x:Name="ShipCityAutoFilterControl"
AutoFilterColumn="{Binding ElementName=dataGrid, Path=Columns[ShipCity]}"
AutoFilterContext="{Binding ElementName=dataGrid, Path=DataGridContext}">
<xcdg:AutoFilterControl.Template>
<ControlTemplate TargetType="{x:Type xcdg:AutoFilterControl}">
<StackPanel>
<Button Content="Clear City filter"
Command="xcdg:AutoFilterControl.ClearAutoFilterValues"
CommandTarget="{Binding ElementName=ShipCityAutoFilterControl}" />
<ComboBox x:Name="PART_DistinctValuesHost"
DropDownOpened="ShipCityAutoFilterControl_DropDownOpened" />
</StackPanel>
</ControlTemplate>
</xcdg:AutoFilterControl.Template>
</xcdg:AutoFilterControl>
</StackPanel>
<xcdg:DataGridControl x:Name="dataGrid"
ItemsSource="{Binding Source={StaticResource cvsOrders}}">
<xcdg:DataGridControl.View>
<xcdg:TableflowView UseDefaultHeadersFooters="False">
<xcdg:TableflowView.FixedHeaders>
<DataTemplate>
<xcdg:GroupByControl />
</DataTemplate>
<DataTemplate>
<xcdg:ColumnManagerRow AllowAutoFilter="False" />
</DataTemplate>
</xcdg:TableflowView.FixedHeaders>
</xcdg:TableflowView>
</xcdg:DataGridControl.View>
</xcdg:DataGridControl>
</DockPanel>
</Grid>

Providing custom distinct values

The following example demonstrates how to provide custom distinct values that will display the only the month in columns that display DateTime values and that will filter according to a value range for a decimal column.

  <Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">
<Grid.Resources>
<xcdg:DataGridCollectionViewSource x:Key="cvs_orders"
Source="{Binding Source={x:Static Application.Current}, Path=Orders}"
AutoFilterMode="And"
DefaultCalculateDistinctValues="False">
<xcdg:DataGridCollectionViewSource.ItemProperties>
<xcdg:DataGridItemProperty Name="OrderDate"
QueryDistinctValue="DataGridItemProperty_QueryDistinctValue_Date"
CalculateDistinctValues="True"/>
<xcdg:DataGridItemProperty Name="RequiredDate"
QueryDistinctValue="DataGridItemProperty_QueryDistinctValue_Date"
CalculateDistinctValues="True" />
<xcdg:DataGridItemProperty Name="ShippedDate"
QueryDistinctValue="DataGridItemProperty_QueryDistinctValue_Date"
CalculateDistinctValues="True" />
<xcdg:DataGridItemProperty Name="Freight"
QueryDistinctValue="DataGridItemProperty_QueryDistinctValue_Range"
CalculateDistinctValues="True" />
</xcdg:DataGridCollectionViewSource.ItemProperties>
</xcdg:DataGridCollectionViewSource>

</Grid.Resources>
<xcdg:DataGridControl x:Name="OrdersGrid"
ItemsSource="{Binding Source={StaticResource cvs_orders}}"/>
</Grid>

Using a filter row

The following example demonstrates how to add a FilterRow to the fixed headers of a grid's view that will allow the data items in the grid to be filtered according to the user-specified filter criteria.

<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">
<Grid.Resources>
<xcdg:DataGridCollectionViewSource x:Key="cvs_products"
Source="{Binding Source={x:Static Application.Current}, Path=Orders}" />
</Grid.Resources>
<xcdg:DataGridControl x:Name="OrdersGrid"
ItemsSource="{Binding Source={StaticResource cvs_products}}">
<xcdg:DataGridControl.View>
<xcdg:TableView>
<xcdg:TableView.FixedHeaders>
<DataTemplate>
<xcdg:FilterRow Background="Pink" />
</DataTemplate>
</xcdg:TableView.FixedHeaders>
</xcdg:TableView>
</xcdg:DataGridControl.View>
</xcdg:DataGridControl>
</Grid>

Providing default filter criteria

The following example demonstrates how to provide default filter criteria that will initially filter the data items in a grid through the FilterRow.

<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid"
xmlns:s="clr-namespace:System;assembly=mscorlib">
<Grid.Resources>
<xcdg:DataGridCollectionViewSource x:Key="cvs_orders"
Source="{Binding Source={x:Static Application.Current}, Path=Orders}">
<xcdg:DataGridCollectionViewSource.ItemProperties>

<xcdg:DataGridItemProperty Name="ShipCountry">
<xcdg:DataGridItemProperty.FilterCriterion>
<xcdg:EqualToFilterCriterion Value="Canada" />
</xcdg:DataGridItemProperty.FilterCriterion>
</xcdg:DataGridItemProperty>
<xcdg:DataGridItemProperty Name="EmployeeID">
<xcdg:DataGridItemProperty.FilterCriterion>
<xcdg:OrFilterCriterion>
<xcdg:OrFilterCriterion.FirstFilterCriterion>
<xcdg:EqualToFilterCriterion>
<s:Int32>2</s:Int32>
</xcdg:EqualToFilterCriterion>
</xcdg:OrFilterCriterion.FirstFilterCriterion>
<xcdg:OrFilterCriterion.SecondFilterCriterion>
<xcdg:EqualToFilterCriterion>
<s:Int32>3</s:Int32>
</xcdg:EqualToFilterCriterion>
</xcdg:OrFilterCriterion.SecondFilterCriterion>
</xcdg:OrFilterCriterion>
</xcdg:DataGridItemProperty.FilterCriterion>
</xcdg:DataGridItemProperty>
</xcdg:DataGridCollectionViewSource.ItemProperties>
</xcdg:DataGridCollectionViewSource>
</Grid.Resources>

<xcdg:DataGridControl x:Name="OrdersGrid"
ItemsSource="{Binding Source={StaticResource cvs_orders}}">
<xcdg:DataGridControl.View>
<xcdg:TableView>
<xcdg:TableView.FixedHeaders>
<DataTemplate>
<xcdg:FilterRow Background="Pink" />
</DataTemplate>
</xcdg:TableView.FixedHeaders>
</xcdg:TableView>
</xcdg:DataGridControl.View>
</xcdg:DataGridControl>
</Grid>

Enabling and disabling advanced filtering

The following example demonstrates how to set advanced filter mode to Always, and how to disable advanced filtering on at least one column.

<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">
<Grid.Resources>
<xcdg:DataGridCollectionViewSource x:Key="cvs_orders"
Source="{Binding Source={x:Static Application.Current}, Path=Orders}" />
</Grid.Resources>
<xcdg:DataGridControl x:Name="OrdersGrid"
ItemsSource="{Binding Source={StaticResource cvs_orders}}">
<xcdg:DataGridControl.Columns>
<xcdg:Column FieldName="ShipCountry"
AllowAdvancedFilter="False" />
</xcdg:DataGridControl.Columns>
<xcdg:DataGridControl.View>
<xcdg:TableflowView AdvancedFilterMode="Always" />
</xcdg:DataGridControl.View>
</xcdg:DataGridControl>
</Grid>

Localize the filter operators

The following example demonstrates how to set a style to localize the operators.

<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">
<Grid.Resources>
<ResourceDictionary>
<xcdg:DataGridCollectionViewSource x:Key="cvs_orders"
Source="{Binding Source={x:Static Application.Current}, Path=Orders}" />
<Style x:Key="filterExpressionEditorStyle"
TargetType="xcdg:FilterExpressionEditor">
<Setter Property="FilterOperatorsText">
<Setter.Value>
<col:Hashtable>
<s:String x:Key="{x:Type xcdg:GreaterThanFilterCriterion}">&gt;</s:String>
<s:String x:Key="{x:Type xcdg:GreaterThanOrEqualToFilterCriterion}">&gt;=</s:String>
<s:String x:Key="{x:Type xcdg:LessThanFilterCriterion}">&lt;</s:String>
<s:String x:Key="{x:Type xcdg:LessThanOrEqualToFilterCriterion}">&lt;=</s:String>
<s:String x:Key="{x:Type xcdg:EqualToFilterCriterion}">=</s:String>
<s:String x:Key="{x:Type xcdg:DifferentThanFilterCriterion}">&lt;&gt;</s:String>
</col:Hashtable>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</Grid.Resources>
<xcdg:DataGridControl x:Name="OrdersGrid"
ItemsSource="{Binding Source={StaticResource cvs_orders}}">
<xcdg:DataGridControl.Columns>
<xcdg:Column FieldName="ShipCountry"
FilterExpressionEditorStyle="{StaticResource filterExpressionEditorStyle}" />
</xcdg:DataGridControl.Columns>
</xcdg:DataGridControl>
</Grid>