Edit this page

Controlling Appearance

The RadComboBox control gives you a number of properties to customize its look and feel. If you need to further modify the appearance, you can modify its control templates to your liking.

Available Properties

Here's a list of the key properties you can use.

ClearSelectionButtonVisibility

If you want to show the button clearing the selection of the RadComboBox, just set the ClearSelectionButtonVisibility property to Visibility.Visible. In addition you need to set the ClearSelectionButtonContent property to a string of your choice.

Example 1: Clear selection button

<telerik:RadComboBox ClearSelectionButtonVisibility="Visible" ClearSelectionButtonContent="Clear Selection" />

Figure 1: ClearSelectionButtonVisibility set to Visibility.Visible

ClearSelectionButtonVisibility set to Visibility.Visible

IsDropDownOpen

To open the RadComboBox's drop-down initially, set the IsDropDownOpen property to True.

Example 2: Open dropdown

<telerik:RadComboBox IsDropDownOpen="True" />

DropDownWidth

By default, the width of the dropdown is the same as that of its parent RadComboBox. To change this, set the DropDownWidth property to the desired width.

Example 3: Open dropdown

<telerik:RadComboBox DropDownWidth="200" />

Figure 2: Dropdown width

Dropdown width

MaxDropDownHeight

To set the maximum height of the RadComboBox's dropdown, specify its MaxDropDownHeight property.

Example 4: Set maximum dropdown height

<telerik:RadComboBox MaxDropDownHeight="150" />

Figure 3: Maximum dropdown height

Maximum dropdown height

OpenDropDownOnFocus

To specify whether the drop-down should be opened or not when the control gets the focus, set the OpenDropDownOnFocus property to True.

Example 5: Set maximum dropdown height

<telerik:RadComboBox OpenDropDownOnFocus="True" />

StaysOpenOnEdit

To specify whether an editable RadComboBox that is opened (displays a drop-down control) will remain open once a user clicks the TextBox, set the StaysOpenOnEdit property to True.

Example 6: Stays open on edit

<telerik:RadComboBox StaysOpenOnEdit="True" />

EmptyText

To specify the string that should be displayed in the selection box when there is no selection, set the EmptyText property.

Example 7: Stays open on edit

<telerik:RadComboBox EmptyText="Select Players..." />

Figure 4: Empty text string

Empty text string

Editing Control Templates

In order to modify the control template of RadComboBox you need to specify the NonEditableTemplate and EditableTemplate properties. The NonEditableTemplate is is the default RadComboBox control template and is used by the control instead of the Template property.

As their names suggest, the NonEditableTemplate is used when the IsEditable property of the control is set to False and the EditableTemplate template is used otherwise.

Example 8: Use of custom templates

<Style TargetType="telerik:RadComboBox">
    <Setter Property="EditableTemplate" Value="{StaticResource CustomEditableTemplate}" />
    <Setter Property="NonEditableTemplate" Value="{StaticResource CustomNonEditableTemplate}" />
</Style>

For information on how to extract and edit these templates, please refer to the Editing Control Templates article.

See Also