Version

Configuring Item Filtering (xamMultiColumnComboEditor)

Topic Overview

Purpose

This topic describes how to configure items filtering in the xamMultiColumnComboEditor™ control.

Required background

The following topic is a prerequisite to understanding this topic:

Topic Purpose

This topic describes how to add a xamMultiColumnComboEditor control to an application and use some of its properties.

In this topic

This topic contains the following sections:

Introduction

Item filtering summary

The xamMultiColumnComboEditor control provides filtering on the items in the control’s Drop-Down when the user starts to type in the input text field. The data items are filtered according to the filters specified in the xamMultiColumnComboEditor .

In case there are no custom filters specified, the item filtering is executed on all columns in the control’s Drop-Down and it’s always enabled by default.

Filtering Configuration Summary

Filtering configuration summary chart

The following table briefly explains the configurable aspects of the xamMultiColumnComboEditor filtering feature and maps them to the properties that configure them. Further details are available after the table.

Configurable aspect Details Properties

Configures on which columns item filtering is applied

Configures a collection of custom filters applied when filtering the xamMultiColumnComboEditor data items

Configuring Filtering Scope

Overview

The xamMultiColumnComboEditor provides an option for specifying the item filtering scope.

Use the xamMultiColumnComboEditor FilterMode property to configure whether item filtering is performed on the primary column or on all visible columns in the control.

The primary column is the column that represents the data of the data object property specified by the DisplayMemberPath property.

Note
Note

The xamMultiColumnComboEditor automatically performs auto completion of user typed text when the FilterMode property is set to FilterOnPrimaryColumnOnly.

Property settings

The following table maps the desired configuration to the property settings that manage it.

In order to: Use this property: And set it to:

Apply filtering on the items in the primary column

FilterOnPrimaryColumnOnly

Apply filtering on the items in all displayed columns

FilterOnAllColumns

Example

The screenshot below demonstrates how the xamMultiColumnComboEditor behaves as a result of the following settings:

Property Value

ProductName

FilterOnAllColumns
Item Filtering 1.png

Following is the code that implements this example.

In XAML:

<ig:XamMultiColumnComboEditor x:Name="ComboEditorProducts"
                              Height="30" Width="300"
                              ItemsSource="{Binding Path=Products}"
                              AutoGenerateColumns="False"
                              DisplayMemberPath="ProductName"
                              FilterMode="FilterOnAllColumns">
    <ig:XamMultiColumnComboEditor.Columns>
        <ig:TextComboColumn Key="ProductName"/>
        <ig:TextComboColumn Key="QuantityPerUnit"/>
    </ig:XamMultiColumnComboEditor.Columns>
</ig:XamMultiColumnComboEditor>

The screenshot below demonstrates how the xamMultiColumnComboEditor behaves as a result of the following settings:

Property Value

ProductName

FilterOnPrimaryColumnOnly
Item Filtering 2.png

Following is the code that implements this example.

In XAML:

<ig:XamMultiColumnComboEditor x:Name="ComboEditorProducts"
                              Height="30" Width="300"
                              ItemsSource="{Binding Path=Products}"
                              AutoGenerateColumns="False"
                              DisplayMemberPath="ProductName"
                              FilterMode="FilterOnPrimaryColumnOnly">
    <ig:XamMultiColumnComboEditor.Columns>
        <ig:TextComboColumn Key="ProductName"/>
        <ig:TextComboColumn Key="QuantityPerUnit"/>
    </ig:XamMultiColumnComboEditor.Columns>
</ig:XamMultiColumnComboEditor>

Configuring Custom Filters

Overview

The xamMultiColumnComboEditor control provides functionality for customizing the item filtering.

This is achieved by using the xamMultiColumnComboEditor ItemFilters property. An ObservableCollection of ComboItemFilter objects is set to this property to provide custom items filtering.

Note
Note

When creating a custom ComboItemFilter, the ComboItemFilter FieldName property must be set to the name of the data property to be filtered. If FieldName property is not set, an exception is thrown.
Note
Note

You cannot use the ComparisonCondition FilterValue property in code to preset the filter value. The xamMultiColumnComboEditor uses FilterValue property internally, and it is set to the text typed in the control input field.

Property settings

The following table maps the desired configuration to the property settings that manage it.

In order to: Use this property: And set it to:

Create a collection of custom filters

ObservableCollection< ComboItemFilter>

Specify on which data model property the item filtering is performed

string

Specify the logical operator used for combining all filter conditions

Specify a collection of conditions to be applied

Specify a comparison condition operator

Example

The following screenshots demonstrate how the filtering in the xamMultiColumnComboEditor works as a result of the following code:

  1. Typing ‘s’ in the xamMultiColumnComboEditor text input field:

Item Filtering 3.png

  1. Typing ‘100’ in the xamMultiColumnComboEditor text input field:

Item Filtering 4.png

Following is the code that implements this example.

In XAML:

<ig:XamMultiColumnComboEditor x:Name="MultiColumnComboEditor"
                              ItemsSource="{Binding Path=Products}"
                              Height="30" Width="300"
                              AutoGenerateColumns="False"
                              DisplayMemberPath="ProductName">
    <ig:XamMultiColumnComboEditor.Columns>
        <ig:TextComboColumn Key="ProductName"/>
        <ig:TextComboColumn Key="UnitsInStock"/>
    </ig:XamMultiColumnComboEditor.Columns>
    <ig:XamMultiColumnComboEditor.ItemFilters>
        <ig:ComboItemFilter FieldName="ProductName" LogicalOperator="And">
            <ig:ComboItemFilter.Conditions>
                <ig:ComparisonCondition Operator="Contains" />
                <ig:ComparisonCondition Operator="StartsWith"/>
            </ig:ComboItemFilter.Conditions>
        </ig:ComboItemFilter>
        <ig:ComboItemFilter FieldName="UnitsInStock">
            <ig:ComboItemFilter.Conditions>
                <ig:ComparisonCondition Operator="GreaterThan"/>
            </ig:ComboItemFilter.Conditions>
        </ig:ComboItemFilter>
    </ig:XamMultiColumnComboEditor.ItemFilters>
</ig:XamMultiColumnComboEditor>

Related Topics

The following topics provide additional information related to this topic.

Topic Purpose

This topic describes how to configure the executed action when the user types and after that hits 'Enter' key in the input text field in the xamMultiColumnComboEditor control.

This topic explains how to bind the xamMultiColumnComboEditor control to data and configure the items layout in the control’s drop-down list.

This topic explains how to configure the layout and behavior of the xamMultiColumnComboEditor Drop-Down.

The topics in this group explain selection feature in the xamMultiColumnComboEditor control and its use.