Selection Box Template

The selection box template allows you to define a DataTemplate for the selected item, thus customizing the Selection Box part of RadComboBox.

This feature is available only with Non-Editable RadComboBox. This is when the IsEditable property of the control is set to False (default value). To customize the Input Area part of an editable RadComboBox, use the TextBoxStyle property.

To set the custom DataTemplate, set the SelectionBoxTemplate property of RadComboBox. The following example shows how to set up a combobox and define a selection box template.

Example 1: Setting up the model

• C#
• VB.NET

public class DataItem 
{ 
    public string Name { get; set; } 
} 

Public Class DataItem 
    Public Property Name As String 
End Class 

Example 2: Setting up the data

• C#
• VB.NET

public MainWindow() 
{          
    InitializeComponent(); 
 
    var source = new ObservableCollection<DataItem>() 
    { 
        new DataItem() { Name = "Item 1" }, 
        new DataItem() { Name = "Item 2" }, 
        new DataItem() { Name = "Item 3" }, 
    }; 
    this.DataContext = source;             
} 

Public Sub New() 
    InitializeComponent() 
    Dim source = New ObservableCollection(Of DataItem)() From { 
        New DataItem() With { 
            .Name = "Item 1" 
        }, 
        New DataItem() With { 
            .Name = "Item 2" 
        }, 
        New DataItem() With { 
            .Name = "Item 3" 
        } 
    } 
    Me.DataContext = source 
End Sub 

Example 3: Setting the SelectionBoxTemplate

• XAML

<telerik:RadComboBox ItemsSource="{Binding}" DisplayMemberPath="Name"> 
    <telerik:RadComboBox.SelectionBoxTemplate> 
        <DataTemplate> 
            <Grid> 
                <Rectangle Width="10" Height="10" Fill="Red" HorizontalAlignment="Left" /> 
                <TextBlock Text="{Binding Name}" FontStyle="Italic" Foreground="#3399FF" Margin="15 0 0 0"/> 
            </Grid> 
        </DataTemplate> 
    </telerik:RadComboBox.SelectionBoxTemplate> 
</telerik:RadComboBox> 

Multiple Selection Box Template

To customize the Selection Box part of RadComboBox when multiple selection is enabled, set the MultipleSelectionBoxTemplate property, instead of SelectionBoxTemplate. Read more about this in the Multiple Selection article.

Empty Selection Box Template

To customize the Selection Box when there is no selected item, set the EmptySelectionBoxTemplate

Example 4: Setting the EmptySelectionBoxTemplate

• XAML

<telerik:RadComboBox ItemsSource="{Binding}" DisplayMemberPath="Name"> 
    <telerik:RadComboBox.EmptySelectionBoxTemplate> 
        <DataTemplate> 
            <TextBlock Text="Select an item" /> 
        </DataTemplate> 
    </telerik:RadComboBox.EmptySelectionBoxTemplate> 
</telerik:RadComboBox> 

The SelectionBoxTemplate, EmptySelectionBoxTemplate and MultipleSelectionBoxTemplate properties are applied only when the ItemsSource property of RadComboBox is set.