Get a Grid Like Dropdown

The purpose of this tutorial is to show you how to create a custom ItemTemplate to display multiple "columns" of data in the drop-down for each item.

Note, that this tutorial won't show you how to create a grid like drop-down with column Headers. RadComboBox does not support this out of the box. You should modify the control template to add heading for the columns. However, this is not very flexible, because you will have to provide a different control template (with different headings) for each combo box instance that has different columns in its drop-down. This feature will be included in some of the next control's release dates.

The final result from this tutorial should look like the snapshot below.

Before proceeding further with this tutorial, be sure that you are familiar with how to bind a RadComboBox to a collection of objects.

  • For the purpose of this tutorial you need to create two additional classes named Dealer and DealerViewModel. Their structure is shown on the code-snippets below.

public class Dealer 
{ 
    public Dealer( string name, string description, string phone ) 
    { 
        this.Name = name; 
        this.Description = description; 
        this.Phone = phone; 
    } 
    public string Name 
    { 
        get; 
        set; 
    } 
    public string Description 
    { 
        get; 
        set; 
    } 
    public string Phone 
    { 
        get; 
        set; 
    } 
} 
Public Class Dealer 
    Public Sub New(ByVal name As String, ByVal description As String, ByVal phone As String) 
        Me.Name = name 
        Me.Description = description 
        Me.Phone = phone 
    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 _Description As String 
    Public Property Description() As String 
        Get 
            Return _Description 
        End Get 
        Set(ByVal value As String) 
            _Description = 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 
End Class 

The Dealer class is extremely simple. It has only properties which describe it - Name, Country, Phone.

public class DealerViewModel 
{ 
    private ObservableCollection<Dealer> dealers; 
    public ObservableCollection<Dealer> Dealers 
    { 
        get 
        { 
            if ( dealers == null ) 
                this.CraeteDealers(); 
            return dealers; 
        } 
    } 
    private void CraeteDealers() 
    { 
        this.dealers = new ObservableCollection<Dealer>(); 
        this.dealers.Add( new Dealer( "USA Auto-Osa Ericsson", "USA", "02-222222" ) ); 
        this.dealers.Add( new Dealer( "USA Auto-Osa Ericsson", "USA", "03-333333" ) ); 
        this.dealers.Add( new Dealer( "USA Auto-Osa Ericsson", "USA", "04-444444" ) ); 
        this.dealers.Add( new Dealer( "Canada Auto-Osa Ericsson", "Canada", "02-222222" ) ); 
        this.dealers.Add( new Dealer( "Canada Auto-Osa Ericsson", "Canada", "03-333333" ) ); 
        this.dealers.Add( new Dealer( "Canada Auto-Osa Ericsson", "Canada", "04-444444" ) ); 
        this.dealers.Add( new Dealer( "Germany Auto-Osa Ericsson", "Germany", "02-222222" ) ); 
        this.dealers.Add( new Dealer( "Germany Auto-Osa Ericsson", "Germany", "03-333333" ) ); 
        this.dealers.Add( new Dealer( "Germany Auto-Osa Ericsson", "Germany", "04-444444" ) ); 
    } 
} 
Public Class DealerViewModel 
    Private m_dealers As ObservableCollection(Of Dealer) 
    Public ReadOnly Property Dealers() As ObservableCollection(Of Dealer) 
        Get 
            If m_dealers Is Nothing Then 
                Me.CraeteDealers() 
            End If 
            Return m_dealers 
        End Get 
    End Property 
    Private Sub CraeteDealers() 
        Me.m_dealers = New ObservableCollection(Of Dealer)() 
        Me.m_dealers.Add(New Dealer("USA Auto-Osa Ericsson", "USA", "02-222222")) 
        Me.m_dealers.Add(New Dealer("USA Auto-Osa Ericsson", "USA", "03-333333")) 
        Me.m_dealers.Add(New Dealer("USA Auto-Osa Ericsson", "USA", "04-444444")) 
        Me.m_dealers.Add(New Dealer("Canada Auto-Osa Ericsson", "Canada", "02-222222")) 
        Me.m_dealers.Add(New Dealer("Canada Auto-Osa Ericsson", "Canada", "03-333333")) 
        Me.m_dealers.Add(New Dealer("Canada Auto-Osa Ericsson", "Canada", "04-444444")) 
        Me.m_dealers.Add(New Dealer("Germany Auto-Osa Ericsson", "Germany", "02-222222")) 
        Me.m_dealers.Add(New Dealer("Germany Auto-Osa Ericsson", "Germany", "03-333333")) 
        Me.m_dealers.Add(New Dealer("Germany Auto-Osa Ericsson", "Germany", "04-444444")) 
    End Sub 
End Class 

The class DealerViewModel is doing nothing special except for initializing on demand a collection of Dealer objects. There is a helper method, doing this work.

  • The next step is to declare the DealerViewModel as a data source in your XAML resources and to set it to the RadComboBox's ItemsSource property.

<UserControl.Resources> 
    <example:DealerViewModel x:Key="DataSource"/> 
</UserControl.Resources> 
 
<Grid x:Name="LayoutRoot" Background="White"> 
    <StackPanel Margin="10"> 
 
        <telerik:RadComboBox x:Name="radComboBox" Width="200" 
            ItemsSource="{Binding Source={StaticResource DataSource}, Path=Dealers}"/> 
 
    </StackPanel> 
</Grid> 
  • The final step is to declare a custom DataTemplate which defines the grid like drop-down of the RadComboBox. Set the just declared DataTemplate to the RadComboBox's ItemsSource property.

<UserControl.Resources> 
    <example:DealerViewModel x:Key="DataSource"/>    
    <DataTemplate x:Key="GridLikeDataTemplate"> 
        <StackPanel> 
            <TextBlock Text="{Binding Name}" /> 
            <StackPanel Orientation="Horizontal"> 
                <TextBlock Text="Phone:" /> 
                <TextBlock Text="{Binding Phone}" /> 
            </StackPanel> 
        </StackPanel> 
    </DataTemplate>  
</UserControl.Resources> 
 
<Grid x:Name="LayoutRoot" Background="White"> 
    <StackPanel Margin="10">     
        <telerik:RadComboBox x:Name="radComboBox" Width="200" 
            ItemsSource="{Binding Source={StaticResource DataSource}, Path=Dealers}" 
            ItemTemplate="{StaticResource GridLikeDataTemplate}"/>   
    </StackPanel> 
</Grid> 
The final result is shown again on the next image.

See Also

In this article
Not finding the help you need? Improve this article