Version

Adding xamMultiColumnComboEditor to Your Page

Topic Overview

Purpose

This topic demonstrates how to add a xamMultiColumnComboEditor™ control to your application and use some of its properties.

Required background

You need to first read the following topics:

Configuration Overview

The following table lists some of the configurable behaviors of the xamMultiColumnComboEditor control.

Configurable behavior

Configuration details

Configuration properties

Steps needed to add a xamMultiColumnComboEditor control to an application.

none

Load xamMultiColumnComboEditor with items.

Configure some of the main properties of the control.

Get the control’s selected items.

Adding xamMultiColumnComboEditor to an application

  1. Add the Infragistics namespace.

    1. Add required references

      In order to add a xamMultiColumnComboEditor to your application you must add a reference to the following NuGet package:

      • Infragistics.WPF.Controls.Editors.XamComboEditor

    For more information on setting up the NuGet feed and adding NuGet packages, you can take a look at the following documentation: NuGet Feeds.

    1. Add the Infragistics namespace

      In XAML:

      xmlns:ig="http://schemas.infragistics.com/xaml"

      In Visual Basic:

      Imports Infragistics.Controls.Editors

      In C#:

      using Infragistics.Controls.Editors;

  1. Add a xamMultiColumnComboEditor control.

    In XAML:

    <ig:XamMultiColumnComboEditor/>

    In Visual Basic:

    Dim multiColumnCombo As XamMultiColumnComboEditor = New XamMultiColumnComboEditor()

    In C#:

    XamMultiColumnComboEditor multiColumnCombo = new XamMultiColumnComboEditor();

Populating xamMultiColumnComboEditor with items

In order to…

Use this property:

And set it to…

Populate xamMultiColumnComboEditor with items

An IEnumerable data source

  1. Set the ItemSource property

    In XAML:

    <ig:XamMultiColumnComboEditor ItemsSource="[your IEnumerable source]"/>

    In Visual Basic:

    multiColumnCombo.ItemsSource = "[your IEnumerable source]"

    In C#:

    multiColumnCombo.ItemsSource = "[your IEnumerable source]";

Modifying the XamMultiColumnComboEditor

The following table maps the desired configurations to property settings. The properties are directly accessed from the xamMultiColumnComboEditor control.

In order to…

Use this property:

And set it to…

A Boolean value of your choosing

The name of the chosen property

A Collection of ComboColumns

A Boolean value of your choosing

A System.Windows.Visibility of your choosing

Modifying the XamMultiColumnComboEditor details

  1. Let the control to generate the columns.

    An important part of setting up the xamMultiColumnComboEditor control is to generate the columns. You can let the control generate the columns automatically by:

    In XAML:

    <ig:XamMultiColumnComboEditor AutoGenerateColumns="True"/>

    In Visual Basic:

    multiColumnCombo.AutoGenerateColumns = True

    In C#:

    multiColumnCombo.AutoGenerateColumns = true;

  1. Set which column value is displayed when the dropdown is closed.

    In order to define the property used by the control to display the selected items, set the DisplayMemberPath property of the control equal to the property name.

    In XAML:

    <ig:XamMultiColumnComboEditor DisplayMemberPath="[Property Name]"/>

    In Visual Basic:

    multiColumnCombo.DisplayMemberPath = "[Property Name]"

    In C#:

    multiColumnCombo.DisplayMemberPath = "[Property Name]";

  1. Define the columns displayed in the dropdown of the control (when AutoGenerateColumns is set to False).

    If you want to choose and arrange the columns in the control manually, set the AutoGenerateColumns property to false and then set the Columns Collection for the xamMultiColumnComboEditor control:

    In XAML:

    <ig:XamMultiColumnComboEditor.Columns>
        <ig:TextComboColumn Key="ContactName"/>
        <ig:TextComboColumn Key="Company"/>
</ig:XamMultiColumnComboEditor.Columns>

    In Visual Basic:

    multiColumnCombo.AutoGenerateColumns = False
Dim colContactName = New TextComboColumn()
Dim colCompany = New TextComboColumn()
colContactName.Key = "ContactName"
colCompany.Key = "Company"
multiColumnCombo.Columns.Add(colConactName)
multiColumnCombo.Columns.Add(colCompany)

    In C#:

    multiColumnCombo.AutoGenerateColumns = false;
var colContactName = new TextComboColumn();
var colCompany = new TextComboColumn();
colContactName.Key = "ContactName";
colCompany.Key = "Company";
multiColumnCombo.Columns.Add(colContactName);
multiColumnCombo.Columns.Add(colCompany);

  1. Allow the user to select more than one item in the control.

    If you want to let the user to select more than one item from the xamMultiColumnComboEditor, set the AllowMultipleSelection property to true.

    In XAML:

    <ig:XamMultiColumnComboEditor AllowMultipleSelection="True"/>

    In Visual Basic:

    multiColumnCombo.AllowMultipleSelection = True

    In C#:

    multiColumnCombo.AllowMultipleSelection = true;

  1. Display checkboxes in front of every item.

    If you want to let the user to select more than one item from the xamMultiColumnComboEditor, set the AllowMultipleSelection property to true.

    In XAML:

    <ig:XamMultiColumnComboEditor CheckBoxVisibility="Visible"/>

    In Visual Basic:

    multiColumnCombo.CheckBoxVisibility = System.Windows.Visibility.Visible

    In C#:

    multiColumnCombo.AllowMultipleSelection = System.Windows.Visibility.Visible;

Using the xamMultiColumnComboEditor

The selected items can be retrieved by using the following:

In order to…

Use this property:

And …

Get the ObservableCollection<object> of selected items

Set/Get an item from your data model

Set/Get the index of the selected item

Using the XamMultiColumnComboEditor details

  1. Get all the selected items collection.

    When the AllowMultipleSelection property is set to true, you can retrieve the selected items collection by accessing the SelectedItems property:

    In Visual Basic:

    Dim selItems = multiColumnCombo.SelectedItems

    In C#:

    var selItems =  multiColumnCombo.SelectedItems;

  1. Get or Set the selected item

    1. Get a selected item

      When the AllowMultipleSelection property is set to false you can get the selected item by accessing the SelectedItem property:

      In Visual Basic:

      Dim selItem = multiColumnCombo.SelectedItem

      In C#:

      int selItem = multiColumnCombo.SelectedItem;

    2. Set a selected item

      When the AllowMultipleSelection property is set to false you can set the selected item by assigning an instance of an item from the data source collection equal to the SelectedItem property:

      In XAML:

      <ig:XamMultiColumnComboEditor SelectedItem="[an item from the data model]"/>

      In Visual Basic:

      multiColumnCombo.SelectedItem = [an item from the data model]

      In C#:

      multiColumnCombo.SelectedItem = [an item from the data model];

  1. Get or Set the selected index

    1. Get a selected index

      You can get the selected index by accessing the SelectedIndex property:

      In Visual Basic:

      Dim selIndex = multiColumnCombo.SelectedIndex

      In C#:

      int selIndex = multiColumnCombo.SelectedIndex;

    2. Set a selected index

      You can set the selected index by assigning an index value to the SelectedIndex property:

      In XAML:

      <ig:XamMultiColumnComboEditor SelectedIndex="[your index value]"/>

      In Visual Basic:

      multiColumnCombo.SelectedIndex = [your index value]

      In C#:

      multiColumnCombo.SelectedIndex = [your index value];

Related Topics

Following are some other topics you may find useful.

About xamMultiColumnComboEditor

Configuring xamMultiColumnComboEditor