Working with the ComboBox in an AJAX controlled environment, this is an interactive control that enables the end user to choose his or her own choice and it be recorded without utilizing a postback. As you will see it works similarly to a Dropdown list as well.

The ComboBox is an ASP.NET AJAX control that combines the flexibility of a TextBox with a list of options that users are able to choose from. 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.

Working with the AJAX Control Toolkit is so much fun, it allows you to drag and drop elements you would otherwise have to Code out and thus saves us coders so much time. Next thing know you have a fully enabled AJAX website with Forms & other great features such as the ComboBox Extender control.

Below is the Properties List for the ComboBox Server Properties.
The properties in italics are optional.

  • DropDownStyle – Determines whether the user is allowed to enter text that does not match an item in the list, and whether the list is always displayed. If “DropDownList” is specified, users are not allowed to enter text that does not match an item in the list. When “DropDown” (the default value) is specified, any text is allowed. If “Simple” is specified, any text is allowed and the list is always displayed regardless of the AutoCompleteMode property value.
  • AutoCompleteMode – Determines how the ComboBox automatically completes the text that is typed into it. When “Suggest” is specified, the ComboBox will show the list, highlight the first matched item, and if necessary, scroll the list to show the highlighted item. If “Append” is specified, the ComboBox will append the remainder of the first matched item to the user-typed text and highlight the appended text. When “SuggestAppend” is specified, both of the above behaviors are applied. If “None” (the default value) is specified, the ComboBox’s auto-complete behaviors are disabled.
  • CaseSensitive – Specifies whether user-typed text is matched to items in the list in a case-sensitive manner. The default is “false”.
  • RenderMode – Specifies whether the ComboBox is rendered as an “Inline” or “Block” level HTML element. The default is “Inline”.
  • ItemInsertLocation – Determines whether to “Append” or “Prepend” new items when they are inserted into the list, or whether to insert them in an “Ordinal” manner (alphabetically) based on the item Text or Value. The default is “Append”.
  • ListItemHoverCssClass – When specified, replaces the default styles applied to highlighted items in the list with a custom css class.
  • ListItem – One or more child controls used to declare items that will be added to the ComboBox list. When bound to a data source, all declared ListItems will be removed unless the AppendDataBoundItems property is set to “true”.

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:

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.

Before we begin, we have included a full source code available for download, we suggest you download it and follow along with it step by step. You can download the source code below.

You can select one of the pre-existing options from the ComboBox like a DropDownList control.

However, you also have the option of entering a new choice that is not in the existing list like a TextBox control.

Regardless of whether you pick a pre-existing item or you enter a custom item, when you submit the form, your choice appears in the label control. When you submit the form, the btnSubmit_Click handler executes and updates the label

Thank you for reading our tutorial on AJAX Controls, we aim to provide the best AJAX tutorials. Learning AJAX in ASP.NET is easy and we hope you are getting your hands dirty by trying different things and coming up with your own ideas. If you have any questions or concerns, please feel free to suggest a tutorial or you can comment below in the comments section.

Download Source Files