Table of Contents
  • Getting Started
  • EO.Pdf
  • EO.Web
    • Overview
    • Installation & Deployement
    • EO.Web ToolTip
    • EO.Web Rating
    • EO.Web Slider & RangeSlider
    • EO.Web ListBox
    • EO.Web ComboBox
    • EO.Web Captcha
    • EO.Web ASPX To PDF
    • EO.Web Slide
    • EO.Web Flyout
    • EO.Web EditableLabel
    • EO.Web ImageZoom
    • EO.Web Floater
    • EO.Web Downloader
    • EO.Web ColorPicker
    • EO.Web HTML Editor
    • EO.Web File Explorer
    • EO.Web SpellChecker
    • EO.Web Grid
    • EO.Web MaskedEdit
    • EO.Web Splitter
    • EO.Web Menu
    • EO.Web Slide Menu
    • EO.Web TabStrip
    • EO.Web TreeView
    • EO.Web Calendar
    • EO.Web Callback
    • EO.Web MultiPage
    • EO.Web Dialog
    • EO.Web AJAXUploader
    • EO.Web ProgressBar - Free!
    • EO.Web ToolBar - Free!
  • EO.WebBrowser
  • EO.Wpf
  • Common Topics
  • Reference
Using Item Icons

EO.Web ComoBox can optionally display an icon in the ComboBox. As shown in the following image:

This section covers the following topics:

Setting Styles

To use icons in a ComboBox, IconAreaStyle, IconAreaHoverStyle and IconStyle must be set properly. See customize styles for more details about these properties.

Getting Icons from a ListBox control

When using a EO.Web.ListBox control inside the ComboBox's DropDownTemplate, you can set each ListBoxItem's Icon property to the Url of the icon associated to that item. Once a ListBoxItem's Icon property is set, selecting that item automatically updates the ComboBox's icon.

Note that setting a ListBoxItem's Icon does not automatically display the icon inside the ListBox. If you wish to display the item icon in the ListBox control, you can use data binding expression inside the ListBox's ItemTemplate to do so. For example:

ASPX
<eo:ListBox ...>
    ....
    <ItemTemplate>
        <table border="0" cellpadding="1">
            <tr>
                <td>
                    <img src="<%#Container.Item.Icon%>" alt="flag" />
                </td>
                <td>
                    <%#Container.Item.Text%>
                </td>
            </tr>
        </table>
    </ItemTemplate>
    ....
</eo:ListBox>

Using Custom Icon

EO.Web.ComboBox provides ClientSideGetIcon client side event for you to provide custom icon based on the curren text/selected item. If you use this feature, you should set this property to the name of a JavaScript function you implement. Once set, EO.Web ComboBox will call the function whenever its text changes. For example, the following code returns "1.gif" if the current text is "One", "2.gif" is the text is "Two", but no icon for any other text.

<eo:ListBox ClientSideGetIcon="get_icon" ....>
    ....
</eo:ListBox>

if the ComboBox's DropDownTemplate contains any ListBox control, then the ComboBox will try to find a matching ListBoxItem object and pass that object as the second argument to your ClientSideGetIcon handler. This makes it possible to store information in ListBoxItem, then derive the full icon path based on that information. For example, the following code set the ListBox's DataValueField to automatically populate each ListBoxItem's Value property, then use ClientSideGetIcon to get the full icon path based on that value:

<eo:ListBox ClientSideGetIcon="get_icon" 
    DataValueField="icon_file_name"
    ....>
    ....
</eo:ListBox>

When ClientSideGetIcon returns null, the ComboBox's DefaultIcon is displayed.