Intersoft ClientUI Documentation
Filtering Data with UXGridView
Intersoft ClientUI 8 > ClientUI Controls > Control Library > Data Controls Overview > UXGridView > Filtering Data with UXGridView

This topic provides an overview of the data filtering feature in UXGridView, discusses the data operation types, and explains the data filtering behaviors in depth. For information about UXGridView and its features in general, see UXGridView Overview.

Enable Data Filtering

UXGridView provides built-in column filtering which comes with rich user interface, allowing users to quickly perform data filtering. To enable data filtering in UXGridView, you simply set the CanUserFilterColumns property to true at UXGridView level, or CanUserSort property at column level to enable the feature only in certain columns. For the column filtering to work properly, you also need to specify the FilterItemsBinding, FilterMemberPath and FilterValuePath properties to each column that supports data filtering.

The following code shows how to enable data filtering in UXGridView.

XAML
Copy Code 
<Intersoft:UXPage.Resources>
    <ViewModels:FilteringViewModel x:Key="FilteringViewModel"/>        
</Intersoft:UXPage.Resources>
<Grid x:Name="LayoutRoot" DataContext="{StaticResource FilteringViewModel}">
    <Intersoft:DockPanel FillChildMode="Custom" MaxWidth="700" Margin="12">
        <Intersoft:UXGridView AutoGenerateColumns="False" ItemsSource="{Binding Products}">               
            <Intersoft:UXGridView.Columns>
                <Intersoft:UXGridViewTextColumn Header="Category" Binding="{Binding CategoryID}"
                                                FilterItemsBinding="{Binding Categories, Source={StaticResource FilteringViewModel}}" 
                                                FilterMemberPath="CategoryName" 
                                                FilterValuePath="CategoryID"/>
                <Intersoft:UXGridViewTextColumn Header="Product ID" Binding="{Binding ProductID}"/>
                <Intersoft:UXGridViewTextColumn Header="Product Name" Binding="{Binding ProductName}"/>                    
                <Intersoft:UXGridViewTextColumn Header="Units In Stock" Binding="{Binding UnitsInStock}"/>
                <Intersoft:UXGridViewTextColumn Header="Unit Price" Binding="{Binding UnitPrice}"/>
                <Intersoft:UXGridViewTextColumn Header="Units On Order" Binding="{Binding UnitsOnOrder}"/>
                <Intersoft:UXGridViewTextColumn Header="Quantity Per Unit" Binding="{Binding QuantityPerUnit}"/>
            </Intersoft:UXGridView.Columns>
        </Intersoft:UXGridView>
    </Intersoft:DockPanel>
</Grid>

As you can see in the code above, the CategoryID column has FilterItemsBinding set to collection of category. This allows you to filter the data based on the CategoryID as shown in the following figure.

Custom Filter Values

Alternatively, you can also define a custom filter value in XAML by specifying the custom UXDataFilterItem in the FilterItems property. The following code shows you how to define the FilterItems in XAML.

XAML
Copy Code 
<Grid x:Name="LayoutRoot" DataContext="{StaticResource FilteringViewModel}">
    <Intersoft:DockPanel FillChildMode="Custom" MaxWidth="700" Margin="12">
        <Intersoft:UXGridView AutoGenerateColumns="False" ItemsSource="{Binding Products}">               
            <Intersoft:UXGridView.Columns>
                <Intersoft:UXGridViewTextColumn Header="Category" Binding="{Binding CategoryID}"/>
                <Intersoft:UXGridViewTextColumn Header="Product ID" Binding="{Binding ProductID}"/>
                <Intersoft:UXGridViewTextColumn Header="Product Name" Binding="{Binding ProductName}"/>                    
                <Intersoft:UXGridViewTextColumn Header="Units In Stock" Binding="{Binding UnitsInStock}">
                    <Intersoft:UXGridViewTextColumn.FilterItems>
                        <Intersoft:UXDataFilterItem Content="0 - 50">
                            <Intersoft:UXDataFilterItem.Filter>
                                <IntersoftModel:CompositeFilterDescription LogicalOperator="And">
                                    <IntersoftModel:FilterDescription PropertyName="UnitsInStock" Operator="IsGreaterThanOrEqualTo" Value="0"/>
                                    <IntersoftModel:FilterDescription PropertyName="UnitsInStock" Operator="IsLessThanOrEqualTo" Value="50"/>
                                </IntersoftModel:CompositeFilterDescription>
                            </Intersoft:UXDataFilterItem.Filter>
                        </Intersoft:UXDataFilterItem>
                        <Intersoft:UXDataFilterItem Content="51 - 100">
                            <Intersoft:UXDataFilterItem.Filter>
                                <IntersoftModel:CompositeFilterDescription LogicalOperator="And">
                                    <IntersoftModel:FilterDescription PropertyName="UnitsInStock" Operator="IsGreaterThanOrEqualTo" Value="51"/>
                                    <IntersoftModel:FilterDescription PropertyName="UnitsInStock" Operator="IsLessThanOrEqualTo" Value="100"/>
                                </IntersoftModel:CompositeFilterDescription>
                            </Intersoft:UXDataFilterItem.Filter>
                        </Intersoft:UXDataFilterItem>
                        <Intersoft:UXDataFilterItem Content="> 100">
                            <Intersoft:UXDataFilterItem.Filter>
                                <IntersoftModel:CompositeFilterDescription LogicalOperator="And">
                                    <IntersoftModel:FilterDescription PropertyName="UnitsInStock" Operator="IsGreaterThan" Value="100"/>
                                </IntersoftModel:CompositeFilterDescription>
                            </Intersoft:UXDataFilterItem.Filter>
                        </Intersoft:UXDataFilterItem>
                    </Intersoft:UXGridViewTextColumn.FilterItems>
                </Intersoft:UXGridViewTextColumn>
                <Intersoft:UXGridViewTextColumn Header="Unit Price" Binding="{Binding UnitPrice}"/>
                <Intersoft:UXGridViewTextColumn Header="Units On Order" Binding="{Binding UnitsOnOrder}"/>
                <Intersoft:UXGridViewTextColumn Header="Quantity Per Unit" Binding="{Binding QuantityPerUnit}"/>
            </Intersoft:UXGridView.Columns>
        </Intersoft:UXGridView>
    </Intersoft:DockPanel>
</Grid>

The results look like the following figure.

Depending on the QueryOperation property, the data filtering can be handled in either client or server side.

Client Data Operation

Client data operation means that the data operation such as filtering is executed in the client against the data source provided to UXGridView. To enable this mode, you set the QueryOperation property to Client.

You typically use a collection that implements IPagedCollectionView as the data source or encapsulate the collection to a PagedCollectionView class. To learn how to perform client-side sorting, filtering and paging using UXGridView, see How-to: Implement Client-side Sorting, Filtering and Paging using UXGridView.

Server Data Operation

Server data operation means that the data operation such as filtering is processed in server rather than in client. In this mode, UXGridView does not handle the data operation by its own. It will simply provide the query information allowing you to process it further to a data service.

To use this mode, you set the QueryOperation property to Server. When this mode is selected, UXGridView will not attempt to perform the data operation on the given data source. Instead, it will store and distribute the query information to the FilterDescriptors property. When the collection changes, the QueryChanged event of the associated QueryDescriptor will be raised. This allows you to streamline the query processing in a centralized function, which is one of the strong benefits of QueryDescriptor. For more information about QueryDescriptor, see QueryDescriptor Overview.

To learn how to perform server-side sorting, filtering and paging using UXGridView, see How-to: Implement Server-side Sorting, Filtering and Paging using UXGridView.

Filter Behavior

UXGridView uses UXDataFilter control for its filtering user interface element, therefore it inherits the rich features already available in UXDataFilter such as IsBatchFilter and SearchBoxVisibility. You can customize the filter behaviors in the UXGridViewBoundColumn level through the available properties such as IsBatchFilter and FilterSearchBoxVisibility. To learn more about UXDataFilter, see UXDataFilter Overview.

You can customize the item template and item style for the filter element through the FilterItemContainerStyle and FilterItemTemplate property. To learn more about styling and item templating, see ItemsControl Overview.

See Also
UXGridView Class
UXGridView Overview
QueryDescriptor Overview