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:

<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>

function get_icon(comboBox, item)
{
    //Get the comboBox text
    var text = comboBox.getText();
    
    //Return "1.gif" for "One"
    if (text == "One")
        return "1.gif";
        
    //Return "2.gif" for "Two"
    if (text == "Two")
        return "2.gif";
}

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>

function get_icon(comboBox, item)
{
    //If a matching item is found, then return an icon path
    //based on the item's Value
    if (item != null)
        return "/images/" + item.getValue();
    
    //Otherwise returns null
    return null;
}

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