Edit this page

Binding to Collection

This tutorial will guide you through the process of binding a RadComboBox to a collection of business objects. It also demonstrates two ways of customizing the visualization of the bound items.

Before reading this tutorial you should get familiar with the Data Binding support of the RadComboBox control.

To bind the RadComboBox to a collection of business objects, you should set its ItemsSource property. If you want the changes to the collection to be automatically reflected in the RadComboBoxItems, the collection needs to implement the INotifyCollectionChanged interface and your business objects have to implement the INotifyPropertyChanged interface.

First, define the RadComboBox control in your XAML as demonstrated in Example 1.

Example 1: RadComboBox definition

<telerik:RadComboBox x:Name="radComboBox" Width="200" />

Now, create a new business object named Agency. Its structure is shown in Example 2.

Example 2: The Agency class

public class Agency
{
    public Agency()
    {
    }
    public Agency( string name, string phone, string zip )
    {
        this.Name = name;
        this.Phone = phone;
        this.Zip = zip;
    }
    public string Name
    {
        get;
        set;
    }
    public string Phone
    {
        get;
        set;
    }
    public string Zip
    {
        get;
        set;
    }
}
Public Class Agency
    Public Sub New()
    End Sub
    Public Sub New(ByVal name As String, ByVal phone As String, ByVal zip As String)
        Me.Name = name
        Me.Phone = phone
        Me.Zip = zip
    End Sub
Private _Name As String
    Public Property Name() As String
        Get
            Return _Name
        End Get
        Set(ByVal value As String)
            _Name = value
        End Set
    End Property
Private _Phone As String
    Public Property Phone() As String
        Get
            Return _Phone
        End Get
        Set(ByVal value As String)
            _Phone = value
        End Set
    End Property
Private _Zip As String
    Public Property Zip() As String
        Get
            Return _Zip
        End Get
        Set(ByVal value As String)
            _Zip = value
        End Set
    End Property
End Class

Then create a new class named AgencyViewModel to hold an ObservableCollection of Agency objects. This collection will be the data source for the RadComboBox. Examples 3 through 5 demonstrate how to set this collection as the ItemsSource of the RadComboBox.

Example 3: The AgencyViewModel class

public class AgencyViewModel
{
    private ObservableCollection<Agency> agencies;

    public ObservableCollection<Agency> Agency
    {
        get
        {
            if ( agencies == null )
            {
                agencies = new ObservableCollection<Agency>();

                agencies.Add( new Agency( "Exotic Liquids", "(171) 555-2222", "EC1 4SD" ) );
                agencies.Add( new Agency( "New Orleans Cajun Delights", "(100) 555-4822", "70117" ) );
                agencies.Add( new Agency( "Grandma Kelly's Homestead", "(313) 555-5735", "48104" ) );
                agencies.Add( new Agency( "Tokyo Traders", "(03) 3555-5011", "100" ) );
                agencies.Add( new Agency( "Cooperativa de Quesos 'Las Cabras'", "(98) 598 76 54", "33007" ) );
                agencies.Add( new Agency( "Mayumi's", "(06) 431-7877", "545" ) );
                agencies.Add( new Agency( "Pavlova, Ltd.", "(03) 444-2343", "3058" ) );
                agencies.Add( new Agency( "Specialty Biscuits, Ltd.", "(161) 555-4448", "M14 GSD" ) );
                agencies.Add( new Agency( "PB Knäckebröd AB", "031-987 65 43", "S-345 67" ) );
                agencies.Add( new Agency( "Refrescos Americanas LTDA", "(11) 555 4640", "5442" ) );
                agencies.Add( new Agency( "Heli Süßwaren GmbH & Co. KG", "(New Item) (010) 9984510", "10785" ) );
                agencies.Add( new Agency( "Plutzer Lebensmittelgroßmärkte AG", "(New Item) (069) 992755", "60439" ) );
                agencies.Add( new Agency( "Nord-Ost-Fisch Handelsgesellschaft mbH", "(New Item) (04721) 8713", "27478" ) );
                agencies.Add( new Agency( "Formaggi Fortini s.r.l.", "(New Item) (0544) 60323", "48100" ) );
                agencies.Add( new Agency( "Norske Meierier", "(New Item) (0)2-953010", "1320" ) );
                agencies.Add( new Agency( "Bigfoot Breweries", "(New Item) (503) 555-9931", "97101" ) );
                agencies.Add( new Agency( "Svensk Sjöföda AB", "(New Item) 08-123 45 67", "S-123 45" ) );
                agencies.Add( new Agency( "Aux joyeux ecclésiastiques", "(New Item) (1) 03.83.00.68", "75004" ) );
                agencies.Add( new Agency( "New England Seafood Cannery", "(New Item) (617) 555-3267", "2134" ) );
                agencies.Add( new Agency( "Leka Trading", "(New Item) 555-8787", "512" ) );
                agencies.Add( new Agency( "Lyngbysild", "(New Item) 43844108", "2800" ) );
                agencies.Add( new Agency( "Zaanse Snoepfabriek", "(New Item) (12345) 1212", "9999 ZZ" ) );
                agencies.Add( new Agency( "Karkki Oy", "(New Item) (953) 10956", "53120" ) );
                agencies.Add( new Agency( "G'day, Mate", "(New Item) (02) 555-5914", "2042" ) );
                agencies.Add( new Agency( "Ma Maison", "(New Item) (514) 555-9022", "H1J 1C3" ) );
                agencies.Add( new Agency( "Pasta Buttini s.r.l.", "(New Item) (089) 6547665", "84100" ) );
                agencies.Add( new Agency( "Escargots Nouveaux", "(New Item) 85.57.00.07", "71300" ) );
                agencies.Add( new Agency( "Gai pâturage", "(New Item) 38.76.98.06", "74000" ) );
                agencies.Add( new Agency( "Forêts d'érables", "(New Item) (514) 555-2955", "J2S 7S8" ) );
            }

            return agencies;
        }
    }
}
Public Class AgencyViewModel
    Private agencies As ObservableCollection(Of Agency)

    Public ReadOnly Property Agency() As ObservableCollection(Of Agency)
        Get
            If agencies Is Nothing Then

                agencies = New ObservableCollection(Of Agency)()

                agencies.Add(New Agency("Exotic Liquids", "(171) 555-2222", "EC1 4SD"))
                agencies.Add(New Agency("New Orleans Cajun Delights", "(100) 555-4822", "70117"))
                agencies.Add(New Agency("Grandma Kelly's Homestead", "(313) 555-5735", "48104"))
                agencies.Add(New Agency("Tokyo Traders", "(03) 3555-5011", "100"))
                agencies.Add(New Agency("Cooperativa de Quesos 'Las Cabras'", "(98) 598 76 54", "33007"))
                agencies.Add(New Agency("Mayumi's", "(06) 431-7877", "545"))
                agencies.Add(New Agency("Pavlova, Ltd.", "(03) 444-2343", "3058"))
                agencies.Add(New Agency("Specialty Biscuits, Ltd.", "(161) 555-4448", "M14 GSD"))
                agencies.Add(New Agency("PB Knäckebröd AB", "031-987 65 43", "S-345 67"))
                agencies.Add(New Agency("Refrescos Americanas LTDA", "(11) 555 4640", "5442"))
                agencies.Add(New Agency("Heli Süßwaren GmbH & Co. KG", "(New Item) (010) 9984510", "10785"))
                agencies.Add(New Agency("Plutzer Lebensmittelgroßmärkte AG", "(New Item) (069) 992755", "60439"))
                agencies.Add(New Agency("Nord-Ost-Fisch Handelsgesellschaft mbH", "(New Item) (04721) 8713", "27478"))
                agencies.Add(New Agency("Formaggi Fortini s.r.l.", "(New Item) (0544) 60323", "48100"))
                agencies.Add(New Agency("Norske Meierier", "(New Item) (0)2-953010", "1320"))
                agencies.Add(New Agency("Bigfoot Breweries", "(New Item) (503) 555-9931", "97101"))
                agencies.Add(New Agency("Svensk Sjöföda AB", "(New Item) 08-123 45 67", "S-123 45"))
                agencies.Add(New Agency("Aux joyeux ecclésiastiques", "(New Item) (1) 03.83.00.68", "75004"))
                agencies.Add(New Agency("New England Seafood Cannery", "(New Item) (617) 555-3267", "2134"))
                agencies.Add(New Agency("Leka Trading", "(New Item) 555-8787", "512"))
                agencies.Add(New Agency("Lyngbysild", "(New Item) 43844108", "2800"))
                agencies.Add(New Agency("Zaanse Snoepfabriek", "(New Item) (12345) 1212", "9999 ZZ"))
                agencies.Add(New Agency("Karkki Oy", "(New Item) (953) 10956", "53120"))
                agencies.Add(New Agency("G'day, Mate", "(New Item) (02) 555-5914", "2042"))
                agencies.Add(New Agency("Ma Maison", "(New Item) (514) 555-9022", "H1J 1C3"))
                agencies.Add(New Agency("Pasta Buttini s.r.l.", "(New Item) (089) 6547665", "84100"))
                agencies.Add(New Agency("Escargots Nouveaux", "(New Item) 85.57.00.07", "71300"))
                agencies.Add(New Agency("Gai pâturage", "(New Item) 38.76.98.06", "74000"))
                agencies.Add(New Agency("Forêts d'érables", "(New Item) (514) 555-2955", "J2S 7S8"))
            End If

            Return agencies
        End Get
    End Property
End Class

Example 4: The AgencyViewModel resource

<UserControl.Resources>
    <example:AgencyViewModel x:Key="DataSource"/>
</UserControl.Resources>

Example 5: Set RadComboBox's ItemsSource

<telerik:RadComboBox Width="200" x:Name="radComboBox" ItemsSource="{Binding Source={StaticResource DataSource}, Path=Agency}"/>

Set the DisplayMemberPath Property

By default, the content of the items will be set to the value returned by the ToString() method of the underlying business objects.

As this is rarely the desired behavior, RadComboBox exposes a DisplayMemberPath property. Its purpose is to specify a property of the source object to serve as the visual representation of the combo box item.

Example 6 demonstrates how to set the RadComboBox's DisplayMemberPath property to point to the Name property of the Agency objects.

Example 6: Set DisplayMemberPath property

<telerik:RadComboBox x:Name="radComboBox" DisplayMemberPath="Name" Width="200" ItemsSource="{Binding Source={StaticResource DataSource}, Path=Agency}" />

The end result is shown on Figure 1.

Figure 1: RadComboBox displaying agency names

RadComboBox displaying agency names

Define a Custom ItemTemplate

The DisplayMemberPath works well if the value you want to display is contained in a single property of the business objects. If you want to visualize more information, you can define a custom DataTemplate and set it as the RadComboBox's ItemTemplate property. The process of doing so is demonstrated in examples 7 and 8.

Example 7: Define the custom DataTemplate

<UserControl.Resources>
    <example:AgencyViewModel x:Key="DataSource"/>

    <DataTemplate x:Key="ComboBoxCustomTemplate">
        <Grid Margin="5,5,5,5" Width="350">
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
            <TextBlock FontWeight="Bold" Grid.ColumnSpan="2" Text="{Binding Name}" />
            <TextBlock Grid.Row="1" Text="Phone:" />
            <TextBlock Grid.Row="1" Foreground="Blue" Margin="40,0,0,0"
                        Text="{Binding Phone}" />
            <TextBlock Grid.Row="1" Grid.Column="1" Text="Zip:" />
            <TextBlock Grid.Row="1" Foreground="Blue" Grid.Column="1" Margin="26,0,0,0"
                        Text="{Binding Zip}" />
        </Grid>
    </DataTemplate>
</UserControl.Resources>

Example 8: Set the RadComboBox's IteTemplate property

<telerik:RadComboBox x:Name="radComboBox" ItemTemplate="{StaticResource ComboBoxCustomTemplate}" Width="200" ItemsSource="{Binding Source={StaticResource DataSource}, Path=Agency}" />

The final result is illustrated in Figure 2.

Figure 1: RadComboBox displaying a custom template

RadComboBox displaying a custom template

See Also