Custom Auto-filtering Controls

Glossary Item Box

By default, when automatic filtering is enabled, a drop down that displays the associated column's distinct values, which can be retrieved through the DistinctValues property of a grid's DataGridContext, will be available in all column-manager cells. Through this drop down, which is represented  by the AutoFilterControl class, the auto-filter values that are used to automatically filter the data items can be modified by the end user.

The appearance of the auto-filter control and its values can be modified by providing a new style through each column's AutoFilterControlStyle property (see Example 1).

It is not possible to provide an implicit style targeting AutoFilterControl. 

External Auto-filtering Controls

When using an auto-filter control outside of a grid, a ListBox or Selector-based control identified as the PART_DistinctValuesHost template part should be specified in its template, the AutoFilterColumn property must set to the column in the grid whose values are to be filtered, and the AutoFilterContext property must set to the grid's data-grid context (see Example 2). It is not necessary to set the control's ItemsSource property.

The values that are selected in an auto-filter control can be retrieved through the AutoFilterValues property of a grid's data-grid context.

External auto-filtering controls can only be used to filter master data items. Data items located in details cannot be filtered by external auto-filter controls.
It is recommended to deactivate the column-manager cells' auto-filter drop downs 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 column or different selection modes.

Clearing Auto-filter Values

The auto-filter values that are used to automatically filter a column's values can be cleared by calling the Clear method of any AutoFilterValues collection, using the "Clear" button in the default auto-filter drop down, or by handling the auto-filter control's ClearAutoFilterValues command. 

The ClearAutoFilterValues command can be used to clear auto-filter values by assigning it to the Command property of the desired control (usually a Button) and setting the CommandTarget property to the target the auto-filter control whose values to clear (see Example 2). 

Examples

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

ShowExample 1: 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.

XAML Copy Code

<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>

ShowExample 2: Creating external auto-filtering 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.

XAML Copy Code

<Grid>
  <Grid.Resources>

    <xcdg:DataGridCollectionViewSource x:Key="cvs_orders"
                                       Source="{Binding Source={x:Static Application.Current},
                                                        Path=Orders}"
                                       AutoFilterMode="And"
                                       DefaultCalculateDistinctValues="False"
                                       AutoCreateItemProperties="False">

      <xcdg:DataGridCollectionViewSource.ItemProperties>

        <xcdg:DataGridItemProperty Name="ShipCountry"
                                   Title="Country"
                                   CalculateDistinctValues="True"/>

        <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"/>
        <xcdg:DataGridItemProperty Name="OrderDate"
                                   Title="Order Date"/>
        <xcdg:DataGridItemProperty Name="Freight"/>
      </xcdg:DataGridCollectionViewSource.ItemProperties>
    </xcdg:DataGridCollectionViewSource>

  </Grid.Resources>

  <DockPanel>
    <StackPanel Orientation="Horizontal"
                DockPanel.Dock="Top">

      <xcdg:AutoFilterControl x:Name="ShipCountryAutoFilterControl"
                              AutoFilterColumn="{Binding ElementName=OrdersGrid, Path=Columns[ShipCountry]}"
                              AutoFilterContext="{Binding ElementName=OrdersGrid, Path=DataGridContext}">
        <xcdg:AutoFilterControl.Template>
          <ControlTemplate TargetType="{x:Type xcdg:AutoFilterControl}">
            <ComboBox x:Name="PART_DistinctValuesHost"
                      Width="125" />
          </ControlTemplate>
        </xcdg:AutoFilterControl.Template>
      </xcdg:AutoFilterControl>

      <Button Content="Clear Filter"
              Command="xcdg:AutoFilterControl.ClearAutoFilterValues"
              CommandTarget="{Binding ElementName=ShipCountryAutoFilterControl}"/>       

    </StackPanel>

    <xcdg:DataGridControl x:Name="OrdersGrid"
                          ItemsSource="{Binding Source={StaticResource cvs_orders}}">
      <xcdg:DataGridControl.View>
        <xcdg:TableView UseDefaultHeadersFooters="False">
          <xcdg:TableView.FixedHeaders>
              <DataTemplate>
                <xcdg:GroupByControl />
              </DataTemplate>
              <DataTemplate>

                <xcdg:ColumnManagerRow AllowAutoFilter="False" />

              </DataTemplate>
            </xcdg:TableView.FixedHeaders>
          </xcdg:TableView>
        </xcdg:DataGridControl.View>
      </xcdg:DataGridControl>
    </DockPanel>
  </Grid>

See Also

DataGrid Fundamentals
Filtering Data

Advanced Concepts
Commands