XamMultiColumnComboEditor

The XamMultiColumnComboEditor is a cross platform control part of the 11.2 release of the Silverlight and WPF Line of Business product. It is based on the existing Silverlight XamComboEditor. Unlike a normal combo box it allows you to show several columns of information about each item in its ItemsSource, very grid-like.

Multiple columns layout in the drop down is the main feature of this control. When you expand the drop down to show the list of options, you have a grid-like table showing multiple properties of each item in the list. Those items may be your own custom defined classes. You can manually add columns for specific properties or auto generate them. The grid supports all column types that the XamGrid supports – text columns, image columns, etc. or your own custom column.

In addition to the special layout for the drop down, another built-in feature is filtering. As you type text in the XamMultiColumnComboEditor, the control will automatically filter the items in the list. The default action is to search in all columns, but you can change this to filtering based on specific column or you own custom filter.

The nice things in the XamMultiColumnComboEditor do not end here. It also supports multiple selection of items. By default when you click on an item in the list it is selected and the drop down is closed. However with multiple selection enabled (by setting a property to true, see the code further down the article) you can add items to the selection by holding the CRTL key and pressing the items you want. You can also set the XamMultiColumnComboEditor to show a checkbox in front of every element. When you select several items they are added to the text box part of the control using a special delimiter. By default it is a comma, but you can set it to something else.

Now I’m going to show you with code examples how to use the control. Before we can get straight to the XamMultiColumnComboEditor we need to create some data classes that we’ll use as source for the items list. Let’s imagine that we have a list with customers as shown in the screenshots above.

public class Customer

    {

        public string Name { get; set; }

        public string Company { get; set; }

        public string Country { get; set; }

 

        public Customer(string name, string company, string country)

        {

            this.Name = name;

            this.Company = company;

            this.Country = country;

        }

    }

 

    public class CustomerList : List<Customer>

    {

        public CustomerList()

        {

            this.Add(new Customer("John Smith", "Foobar Solutions", "USA"));

            this.Add(new Customer("Jane Foster", "United Affiliates, Inc", "USA"));

            this.Add(new Customer("Mike Patterson", "Acme, Inc", "Canada"));

        }

    }

 

The first class defines a customer that has a name, a company and a country and constructor that fills the properties respectively. The second class is just a collection that generates some customers in its constructor.

 

Now we can add the control itself to our application. First we need to add the assembly and the namespace reference. The XamMultiColumnComboEditor is located in the InfragisticsSL4.Controls.Editors.XamComboEditor.v11.2 assembly. We also need the InfragisticsSL4.Controls.Editors.v11.2 and InfragisticsSL4.v11.2 assemblies as dependencies. The namespace is the same as the one for all other controls:

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

 

In the body of our application we can now add the control. Let’s start off with something really basic. First we will add to the resources an instance of the customer list class that we wrote before.

    <UserControl.Resources>

        <local:CustomerList x:Key="customerList" />

    </UserControl.Resources>

 

Note that local is the namespace that you have used to define the CustomerList class.

 

After we have a list with customers to add we can write this code to create the control and tell it to use the proper list.

    <ig:XamMultiColumnComboEditor x:Name="xamMultiColumnComboEditor" 

                                  DisplayMemberPath="Name" 

                                  ItemsSource="{StaticResource customerList}"

                                  />

 

The DisplayMemberPath property is the name of the property used to identify the selected items. Choosing name means that when we select a customer from the drop down their name will be added to the TextBox part of the control. Just like on the third screenshot.

 

Now that we’ve seen how to do the basics we can start experimenting with more code. Let’s see how to generate our own columns. The control has a Columns property, just like the XamGrid. If you are familiar with the grid you will have a very easy time with this part. The list with built-in columns is shown in the next screenshot.

 

 

You can also write your own custom column type. You can browse the XamGrid documentation for more info on that.

 

Let’s use text columns now to show just the Name and Company properties in our example.

        <ig:XamMultiColumnComboEditor x:Name="xamMultiColumnComboEditor" 

                                      DisplayMemberPath="Name" 

                                      ItemsSource="{StaticResource customerList}"

                                      AutoGenerateColumns="False"

                                      >

            <ig:XamMultiColumnComboEditor.Columns>

                <ig:TextComboColumn Key="Name" />

                <ig:TextComboColumn Key="Company" />

            </ig:XamMultiColumnComboEditor.Columns>

        </ig:XamMultiColumnComboEditor>

 

 

Note that in addition to addig the code for the columns we also set the AutoGenerateColumns property to false. Here is the result:

 

 

The XamMultiColumnComboEditor has several other interesting features too. You will be able to see how to use them in the documentation and samples area after the release is officially out. I hope this has been interesting and useful for you. Have a great day.