ASP.NET AJAX Control Toolkit Demos v20.1.0.0

ComboBox
Ajax Control Toolkit
ComboBox Demonstration
<ajaxToolkit:ComboBox ID="ComboBox1" runat="server"
     AutoPostBack="False"
     DropDownStyle="DropDownList"
     AutoCompleteMode="SuggestAppend"
     CaseSensitive="False"
     CssClass=""
     ItemInsertLocation="Append" ... >


ComboBox Description
Like AutoCompleteExtender, a combo box is an ASP.NET AJAX control that combines the flexibility of the TextBox with a list of options from which users are able to choose.
ComboBox Properties
Properties
  • AutoCompleteMode - Determines how the ComboBox automatically completes typed text.
  • AutoPostBack - Determines whether or not AutoPostBack should be used.
  • BackColor - A background color.
  • BorderColor - The ComboBox border color.
  • BorderStyle - The ComboBox border style.
  • BorderWidth - The ComboBox border width.
  • CaseSensitive - Specifies whether or not user-typed text matches items in the list in a case-sensitive manner. The default is false.
  • DropDownStyle - Determines whether or not a user is allowed to enter text that does not match an item in the list and if the list is always displayed.
  • Enabled - Determines whether or not the ComboBox is enabled.
  • Font - The ComboBox control font.
  • ForeColor - A foreground color.
  • Height - ComboBox height.
  • ItemInsertLocation - Determines if to "Append" or "Prepend" new items when they are inserted into the list or insert them in an "Ordinal" manner (alphabetically) based on the item Text or Value. The default is "Append"
  • ListItemHoverCssClass - When specified, replaces default styles applied to highlighted items in the list with a custom css class.
  • MaxLength - Specifies maximum length of the associated TextBox control.
  • RenderMode - Specifies whether or not the ComboBox is rendered as an Inline or Block level HTML element. The default is Inline.
  • SelectedIndex - The ComboBox selected item index.
  • TabIndex - The ComboBox tab index.
  • Width - ComboBox width.

Methods
  • RaisePostDataChangedEvent() - Raises PostDataChangeEvent.
  • RenderControl(writer) - Renders a control.
  • ResolveControl(controlId) - Resolves a control

Events
  • ItemInserted - Fires when an item is inserted.
  • ItemInserting - Fires on inserting an item.
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.
Copyright © 2012-2024 CodePlex Foundation. All Rights Reserved.