Infragistics logo
메뉴
.NET and JavaScript UI Controls
Version

Configuring Item Filtering (xamComboEditor)

Topic Overview

Purpose

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

Required background

The following topic is a prerequisite to understanding this topic:

Topic Purpose

This topic describes how to get started with the xamComboEditor control and how to add it to your page using procedural code.

In this topic

This topic contains the following sections:

Filtering Configuration Summary

Filtering configuration summary chart

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

Configurable aspect Details Properties

Configures if filtering is Enabled/Disabled

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

Enabling/Disabling Filtering

Overview

The xamComboEditor 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 xamComboEditor .

By default, this feature is enabled, and filtering executed on the data model property specified through the xamComboEditor DisplayMemberPath property and using the comparison operator StartsWith .

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:

Enable/Disable filtering in the xamComboEditor

bool

Specify on which data model property the filtering is performed

string

Configuring Custom Filters

Overview

The xamComboEditor control provides functionality for customizing the item filtering.

This is achieved by using the xamComboEditor 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 xamComboEditor 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 xamComboEditor works as a result of the following code:

  1. Typing 's' in the xamComboEditor text input field:

    CustomFiltering 1.png

  1. Typing '100' in the xamComboEditor text input field:

    CustomFiltering 2.png

Following is the code that implements this example.

In XAML:

<ig:XamComboEditor x:Name="ComboEditor"
                   ItemsSource="{Binding Path=Products}"
                   Height="30" Width="250"
                   AutoComplete="False">
    <ig:XamComboEditor.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="50" />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <TextBlock Text="{Binding ProductName}" Grid.Column="1" Margin="5" />
                <TextBlock Text="{Binding UnitsInStock}" Margin="5" />
            </Grid>
        </DataTemplate>
    </ig:XamComboEditor.ItemTemplate>
    <!-- Add custom filters -->
    <ig:XamComboEditor.ItemFilters>
        <!-- Create filter for the data model property ProductName -->
        <ig:ComboItemFilter FieldName="ProductName" LogicalOperator="And">
            <ig:ComboItemFilter.Conditions>
                <ig:ComparisonCondition Operator="Contains" />
                <ig:ComparisonCondition Operator="StartsWith"/>
            </ig:ComboItemFilter.Conditions>
        </ig:ComboItemFilter>
        <!-- Create filter for the data model property UnitsInStock -->
        <ig:ComboItemFilter FieldName="UnitsInStock">
            <ig:ComboItemFilter.Conditions>
                <ig:ComparisonCondition Operator="GreaterThan"/>
            </ig:ComboItemFilter.Conditions>
        </ig:ComboItemFilter>
    </ig:XamComboEditor.ItemFilters>
</ig:XamComboEditor>

Related Topics

The following topics provide additional information related to this topic.

Topic Purpose

This topic describes the auto complete feature available in editable mode in the xamComboEditor .

This topic describes how to specify the xamComboEditor behavior when typing in the control’s text box.

This topic explains how to Enable/Disable resizing of the xamComboEditor Drop-Down from the UI, as well as how to set the Drop-Down’s minimum and maximum widths and maximum height in code.

This topic describes how to use the xamComboEditor ItemTemplate property to customize the visualization of the items.

This topic describes selection in the xamComboEditor control.