Edit this page

Binding to Object

To bind the RadComboBox to a collection of business objects, you should use its ItemsSource property and define the DataTemplate that is needed to display the data from the collection. If you want the changes to the collection to be automatically reflected to the RadComboBoxItems, the collection should implement the INotifyCollectionChanged interface, as well as your business object to implement the INotifyPropertyChanged interface.

The following tutorial will guide you how to bind a RadComboBox to a collection of business objects. Two cases will be shown:

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

In order to bind a RadComboBox to a collection of business objects, you should perform the following instructions:

  • Add a new RadComboBox declaration in your XAML.

XAML

<telerik:RadComboBox Width="200" x:Name="radComboBox"/>
  • Create a new business object named Agency. Its structure is shown on the next code-snippet.

C#

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;
    }
}

VB.NET

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

The RadComboBox control will be bound to an ObservableCollection of Agency objects.

  • Create a new class named AgencyViewModel. In fact, this will be the data source for the combo box. This class has only one purpose - to initialize a collection with sample data.

C#

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;
        }
    }
}

VB.NET

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
  • Declare the AgencyViewModel as a resource in your XAML.

XAML

<UserControl.Resources>
    <example:AgencyViewModel x:Key="DataSource"/>
</UserControl.Resources>
  • Update your RadComboBox declaration and its ItemsSource property.

XAML

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

Using Custom ItemTemplate

The final step is to create a custom DataTemplate and set it to the RadComboBox's ItemTemplate property.

  • Add the following DataTemplate declaration in your XAML resources.

XAML

<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>
  • Update your RadComboBox declaration and set its ItemTemplate property like in the example below.

XAML

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

Run your demo, the end result is shown on the snapshot below.

Using DisplayMemberPath

Instead of creating a custom ItemTemplate, an alternative approach is to use the DisplayMemberPath property. Its purpose is to get or set a path to a value on the source object to serve as the visual representation of the object.

For example, instead of setting the ItemTemplate, set the RadComboBox's DisplayMemberPath property to point the Name property of the Agency object.

XAML

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

The end result is shown on the next snapshot.

If neither the DisplayMemberPath nor the ItemTemplate are set, then the content of the item would be set to the value returned by the ToString() method of the business object.

See Also