Ajax Control Toolkit ComboBox

Modified on 2010/04/16 00:04 by Stephen Walther — Categorized as: Uncategorized

ComboBox is an ASP.NET AJAX control that, like the AutoCompleteExtender, combines the flexibility of a TextBox with a list of options that users are able to choose from. It borrows many of its properties, behaviors, and naming conventions from the Windows Forms ComboBox control, and is derived from the same base class as the ListBox, BulletedList, and DropDownList web controls. In fact, a ComboBox is best described as a DropDownList that can be typed directly into like a TextBox.

Working with a ComboBox in code is also a lot like working with a DropDownList. It has all of the same properties and events as a DropDownList, with a few additional ComboBox-specific properties and events. Firstly, it can be configured to either prevent or allow user-typed text that does not match an item in the list. When user-typed text does match an item in the list, the ComboBox can also be configured to auto-complete the text based on the first matched item in the list, to show the list and highlight the first matched item, or to do both simultaneously. When user-typed text does not match an item in the list, the ComboBox raises ItemInserting and ItemInserted events which can be handled during postback. Other than these special behaviors, the ComboBox behaves essentially like a DropDownList.

The ComboBox is intended as a supplement to, rather than a replacement for, the AutoCompleteExtender. Though there are many scenarios where either could be used to satisfy the same user interface requirements, there are scenarios where one control could offer particular advantages or disadvantages compared to the other:

ComboBox Server Properties

The properties in italics are optional.

<ajaxToolkit:ComboBox ID="ComboBox1" runat="server" 
    DropDownStyle="DropDown" 
    AutoCompleteMode="None"
    CaseSensitive="false"
    RenderMode="Inline"
    ItemInsertLocation="Append"
    ListItemHoverCssClass="ComboBoxListItemHover"
      <asp:ListItem>...</asp:ListIem>
      ...
</ajaxToolkit:ComboBox>


ComboBox Known Issues

When ListItemHoverCssClass is specified and the ComboBox list is scrollable, highlighting a list item will cause the scrollbar to flicker when using the Internet Explorer web browser. To avoid this issue, do not specify the ListItemHoverCssClass property.

ComboBox Theming

You can change the look and feel of the ComboBox using the ComboBox CssClass property. The ComboBox has a predefined set of CSS classes that can be overridden. It has a default style which is embedded as a WebResource and is a part of the Toolkit assembly that has styles set for all the sub-classes. You can find the default styles in the Toolkit solution in the "AjaxControlToolkit\ComboBox\ComboBox.css" file. If your CssClass does not provide values for any of those then it falls back to the default value. In the example above the default style is displayed when
"[Empty String]"
is selected as the CssClass. To customize the same the user would have to set the CssClass property to the name of the CSS style and define the styles for the individual classes so that the various elements in a ComboBox control can be styled accordingly. For example, if the CssClass property was set to "CustomComboBoxStyle", this is how the css to style the border and background color would look:

.CustomComboBoxStyle .ajax__combobox_textboxcontainer input {
    background-color: #ADD8E6;
    border: solid 1px Blue;
    border-right: 0px none;
}
.CustomComboBoxStyle .ajax__combobox_buttoncontainer button {
    background-color: #ADD8E6;
    border: solid 1px Blue;
}

ComboBox CSS classes

.ajax__combobox_inputcontainer: A table element that contains and positions the ComboBox's button and text box input elements. 
Child Css classes: ajax__combobox_textboxcontainer, ajax__combobox_buttoncontainer.

.ajax__combobox_textboxcontainer: The table cell that contains the ComboBox's text box input element.
.ajax__combobox_buttoncontainer: The table cell that contains the ComboBox's button element.
.ajax__combobox_itemlist: The ul element that contains the ComboBox's list item (li) elements.