Intersoft ClientUI Documentation
UXDataFilter
Intersoft ClientUI 8 > ClientUI Controls > Control Library > Data Controls Overview > UXDataFilter
UXDataFilter is a versatile data filtering control that can be used to provide filtering functionality to UXGridView and any ItemsControls such as UXListBox. The control supports server-side filtering and MVVM design pattern through the QueryDescriptor component model. 

Using UXDataFilter

The UXDataFilter control provides a configurable user interface for filtering through a data collection. Similar to other ClientUI data controls, UXDataFilter supports both server side and client side operation.

Client Data Operation

Client data operation means that the data operation in this case data filtering is executed in client side against the data source provided to UXDataFilter. To use this mode, you set the QueryOperation property to Client.

You need to wrap your collection in a PagedCollectionView class to provide data filtering functionality to the IEnumerable collection. The PagedCollectionView provides consistent handling for data operation in other data controls as well such as UXGridView and UXDataPager.

To learn how to implement data filter using UXDataFilter, see How-to: Implement Data Filtering using UXDataFilter.

Server Data Operation

Server data operation means that the data operation, in this case data filtering, is processed in the server. This means that UXDataFilter does not handle the filtering operation by its own. Instead, UXDataFilter provides the query information allowing you to process it further.

To use this mode, you set the QueryOperation property to Server. When this mode is selected, UXDataFilter will not attempt to perform the data operation on the given data source. Instead, it will store and distribute the query information to FilterDescriptors property. When the collection of the property change, 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 filter data using FilterDescriptors and UXDataFilter, see How-to: Implement Data Filtering using FilterDescriptors and UXDataFilter.

Batch Filter

By default, the filtering process takes place immediately when an item is checked or unchecked. If you prefer to process the filtering in batch, you can set the IsBatchFilter property true. In this mode, UXDataFilter will provide you with Apply and Cancel button which you can use to apply or cancel the changes you made in the UXDataFilter.

XAML
Copy Code 
    <Intersoft:UXDataFilter FilterDescriptors="{Binding QueryDescriptor.FilterDescriptors, Mode=TwoWay}" 
                            ItemsSource="{Binding Categories}" QueryOperation="Server" IsBatchFilter="True"
                            Header="By Category:" DisplayMemberPath="CategoryName" ValueMemberPath="CategoryID" Margin="8,0">                   
    </Intersoft:UXDataFilter>

Headered Items Control

UXDataFilter is inherited from ISHeaderedItemsControl, which mean it consists of a header element that represents the filter group, and a list of check boxes that represent the items to include when filtering the data source.

Populating UXDataFilter with ItemsSource

To populate the UXDataFilter from a collection, you can assign the collection to ItemsSource property and set the DisplayMemberPath for the displayed text and ValueMemberPath for the filter expression. If the ValueMemberPath is not specified, UXDataFilter  will use the member path specified in DisplayMemberPath.

The following code shows how to populate UXDataFilter using ItemsSource.

XAML
Copy Code 
    <Intersoft:UXDataFilter FilterDescriptors="{Binding QueryDescriptor.FilterDescriptors, Mode=TwoWay}" 
                            ItemsSource="{Binding Categories}" QueryOperation="Server" IsBatchFilter="True"
                            Header="By Category:" DisplayMemberPath="CategoryName" ValueMemberPath="CategoryID" Margin="8,0">                   
    </Intersoft:UXDataFilter>

Defining Custom Filter Items

Alternatively, you can also define the items manually by defining the UXDataFilterItem in the XAML along with their respective Filter description. The Filter description can be a simple or a complex expression.

The following examples show how to define custom filter items with some complex filter expression.

XAML
Copy Code 
<Intersoft:UXDataFilter QueryOperation="Server" Header="By Units In Stock:" 
                        Margin="8,0">
    <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:UXDataFilter>
XAML
Copy Code 
<Intersoft:UXDataFilter FilterDescriptors="{Binding}" QueryOperation="Server"
                        Header="By Alphabet" Margin="8,0" Width="120" VerticalAlignment="Center">
    <Intersoft:UXDataFilterItem Content="A - E">
        <Intersoft:UXDataFilterItem.Filter>
            <Intersoft:CompositeFilterDescription LogicalOperator="Or">
                <Intersoft:FilterDescription PropertyName="ContactName" Operator="StartsWith"  Value="A"/>
                <Intersoft:FilterDescription PropertyName="ContactName" Operator="StartsWith"  Value="B"/>
                <Intersoft:FilterDescription PropertyName="ContactName" Operator="StartsWith"  Value="C"/>
                <Intersoft:FilterDescription PropertyName="ContactName" Operator="StartsWith"  Value="D"/>
                <Intersoft:FilterDescription PropertyName="ContactName" Operator="StartsWith"  Value="E"/>
            </Intersoft:CompositeFilterDescription>
        </Intersoft:UXDataFilterItem.Filter>
    </Intersoft:UXDataFilterItem>
    <Intersoft:UXDataFilterItem Content="F - J">
        <Intersoft:UXDataFilterItem.Filter>
            <Intersoft:CompositeFilterDescription LogicalOperator="Or">
                <Intersoft:FilterDescription PropertyName="ContactName" Operator="StartsWith"  Value="F"/>
                <Intersoft:FilterDescription PropertyName="ContactName" Operator="StartsWith"  Value="G"/>
                <Intersoft:FilterDescription PropertyName="ContactName" Operator="StartsWith"  Value="H"/>
                <Intersoft:FilterDescription PropertyName="ContactName" Operator="StartsWith"  Value="I"/>
                <Intersoft:FilterDescription PropertyName="ContactName" Operator="StartsWith"  Value="J"/>
            </Intersoft:CompositeFilterDescription>
        </Intersoft:UXDataFilterItem.Filter>
    </Intersoft:UXDataFilterItem>
    <Intersoft:UXDataFilterItem Content="K - O">
        <Intersoft:UXDataFilterItem.Filter>
            <Intersoft:CompositeFilterDescription LogicalOperator="Or">
                <Intersoft:FilterDescription PropertyName="ContactName" Operator="StartsWith"  Value="K"/>
                <Intersoft:FilterDescription PropertyName="ContactName" Operator="StartsWith"  Value="L"/>
                <Intersoft:FilterDescription PropertyName="ContactName" Operator="StartsWith"  Value="M"/>
                <Intersoft:FilterDescription PropertyName="ContactName" Operator="StartsWith"  Value="N"/>
                <Intersoft:FilterDescription PropertyName="ContactName" Operator="StartsWith"  Value="O"/>
            </Intersoft:CompositeFilterDescription>
        </Intersoft:UXDataFilterItem.Filter>
    </Intersoft:UXDataFilterItem>
    <Intersoft:UXDataFilterItem Content="P - T">
        <Intersoft:UXDataFilterItem.Filter>
            <Intersoft:CompositeFilterDescription LogicalOperator="Or">
                <Intersoft:FilterDescription PropertyName="ContactName" Operator="StartsWith"  Value="P"/>
                <Intersoft:FilterDescription PropertyName="ContactName" Operator="StartsWith"  Value="Q"/>
                <Intersoft:FilterDescription PropertyName="ContactName" Operator="StartsWith"  Value="R"/>
                <Intersoft:FilterDescription PropertyName="ContactName" Operator="StartsWith"  Value="S"/>
                <Intersoft:FilterDescription PropertyName="ContactName" Operator="StartsWith"  Value="T"/>
            </Intersoft:CompositeFilterDescription>
        </Intersoft:UXDataFilterItem.Filter>
    </Intersoft:UXDataFilterItem>
    <Intersoft:UXDataFilterItem Content="U - Z">
        <Intersoft:UXDataFilterItem.Filter>
            <Intersoft:CompositeFilterDescription LogicalOperator="Or">
                <Intersoft:FilterDescription PropertyName="ContactName" Operator="StartsWith"  Value="U"/>
                <Intersoft:FilterDescription PropertyName="ContactName" Operator="StartsWith"  Value="V"/>
                <Intersoft:FilterDescription PropertyName="ContactName" Operator="StartsWith"  Value="W"/>
                <Intersoft:FilterDescription PropertyName="ContactName" Operator="StartsWith"  Value="X"/>
                <Intersoft:FilterDescription PropertyName="ContactName" Operator="StartsWith"  Value="Y"/>
                <Intersoft:FilterDescription PropertyName="ContactName" Operator="StartsWith"  Value="Z"/>
            </Intersoft:CompositeFilterDescription>
        </Intersoft:UXDataFilterItem.Filter>
    </Intersoft:UXDataFilterItem>
</Intersoft:UXDataFilter>

To learn more how to implement customized filter items in data-aware scenario, see How-to: Implement Data Filtering using UXDataFilter.

Understanding UXDataFilterItem

The item container type of UXDataFilter is UXDataFilterItem.

Each UXDataFilterItem has a Filter property that represents the filter expression for the particular item. When UXDataFilter is bound to a collection of data, the filter expression is determined by the ValueMemberPath property.

If you prefer a more complex filter expression, you can define the UXDataFilterItem manually and specify the Filter property with your own filter expression. To learn more about this concept, please refer the section above.

Enabling Search Functionality

In certain cases, you might end up with relatively large number of filter items in the UXDataFilter, which makes it difficult for users to find the items to include or exclude in the data filtering process. To address this challenge, you can enable search functionality feature by setting the SearchBoxVisibility property of the UXDataFilter to Visible.

As the results, a search box element will appear in the top of the check boxes which allow users to search the particular items to include or exclude during the data filtering process. The search box element is using UXSearchBox control, therefore it inherits all the rich user experience features already available in the control.

XAML
Copy Code 
    <Intersoft:UXDataFilter FilterDescriptors="{Binding QueryDescriptor.FilterDescriptors, Mode=TwoWay}" 
                            ItemsSource="{Binding Categories}" QueryOperation="Server" SearchBoxVisibility="Visible"
                            Header="By Category:" DisplayMemberPath="CategoryName" ValueMemberPath="CategoryID" Margin="8,0">                   
    </Intersoft:UXDataFilter>

For more information about user experience features in ClientUI controls, see User Experiences Overview.

See Also
Data Access Overview
QueryDescriptor Overview
UXDataFilter Class