Edit this page

Customizing the DropDownItemTemplate

In the RadAutoCompleteBox control you can customize the way items are rendered in the DropDown portion of the control.

By customizing the DropDownItemTemplate of the control you can easily show different template for the items in the DropDown portion of the control.

Creating custom DropDownItemTemplate

The next example will demonstrate how to create a custom DropDownItemTemplate in order to show two of the properties of the bound items from the ItemsSource collection.

Before proceeding with this example you should get familiar with Binding To Object.

The next steps show how to create and set a custom DropDownItemTemplate to the RadAutoCompleteBox control:

  1. First we will need to create and populate the ViewModel with some sample data, more details can be found here.

  2. Next we need to create a valid DataTemplate and set the necessary binding for the Name, Capital properties of the ItemsSource items:

    [XAML] Declaring valid DataTemplate

    <DataTemplate x:Key="CustomDropDownItemTemplate">
        <Border BorderBrush="Gray" BorderThickness="1" Margin="2">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <TextBlock Grid.Column="0" Grid.Row="0"
                            Margin="5"
                            FontWeight="Bold"
                            Text="Name" />
                <TextBlock Grid.Row="0" Grid.Column="1" Margin="0 5 0 0"
                            Text=":"
                            FontWeight="Bold"/>
                <TextBlock Grid.Column="2" Grid.Row="0" Margin="5"
                            Text="{Binding Name}" />
                <Border BorderBrush="Gray" BorderThickness="0.5" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3"/>
                <TextBlock Grid.Column="0" Grid.Row="2" Margin="5"
                            FontWeight="Bold"
                            Text="Capital" />
                <TextBlock Grid.Row="2" Grid.Column="1" Margin="0 5 0 0"
                            Text=":"
                            FontWeight="Bold"/>
                <TextBlock Grid.Column="2" Grid.Row="2" Margin="5"
                            Text="{Binding Capital}" />
            </Grid>
        </Border>
    </DataTemplate>
    
  3. Finally you will need to declare the RadAutoCompleteBox in the xaml and set its ItemsSource, DisplayMemberPath and DropDownItemTemplate properties:

    [XAML] Setting the DropDownItemTemplate

    <telerik:RadAutoCompleteBox ItemsSource="{Binding Countries}"
                                Width="200"
                                DisplayMemberPath="Name"
                                DropDownItemTemplate="{StaticResource CustomDropDownItemTemplate}"/>
    

The next screenshots show the final result:

radautocompletebox-customizing-drop-down-itemtemplate-1

radautocompletebox-customizing-drop-down-itemtemplate-2

radautocompletebox-customizing-drop-down-itemtemplate-3

See Also