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
public class DataItem
{
public string Name { get; set; }
}
Public Class DataItem
Public Property Name As String
End Class
Example 2: Setting up the data
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
<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
<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.