The asp.net ComboBox Control allows users to define an Item Template for enhancing the visualization effect of the combobox items. In default, if we do not specify an Item Template, all the items contained in the combobox will be displayed on the drop-down list in the form of plain text. Thus, if we want to render the web combobox item in a vivid and visual format, we need to use the Item Template property. The remarkable thing is that the ComboBox Control enables users to embed various types of content, like html markup, web server control or other UI control for ASP.NET AJAX, to a template.

And in this online tutorial page, we will guide users to specify an Item Template in ASP.NET web application using ComboBox Control for ASP.NET AJAX.

As is mentioned above, the asp.net ComboBox Control allows us to define file url, image, backgroud and add other controls in the item template. And in this section, we will illustrate the item template specifying application with a detailed programming example. In this programming example, image, checkbox and text are all added to the item template.

<kettic:PerComboBox runat="server" ID="PerComboBox1" 
DataSourceID="SqlDataSource1"    
DataValueField="ID" 
DataTextField="TypeName" 
EmptyMessage="All Types" 
HighlightTemplatedItems="true"
AllowCustomText="true" 
Width="200"                    
Label="Type:" 
LabelCssClass="associatedLables">
<ItemTemplate>
<div onclick="StopPropagation(event)" class="combo-item-template">
<label>
<asp:CheckBox runat="server" ID="chk1" Checked="true" />
<img src='<%# Eval("ImagePath") %>' alt="icon" /><%# Eval("TypeName") %>
</label>
</div>
</ItemTemplate>
</kettic:PerComboBox>

From the example, you will find that we use the <%# Eval("") %> statement to specify the image and text that will be displayed in the template. And in order to enable the template to have the access to the Text property, users have to clearly bind the items using DataBind method before they use the asp.net ComboBox items’s properties to bind elements in the template. Otherwise, the items will appear as the same in the drop-down list.

Here we attach an image which displays the result of above programming example.

If you meet any problems in the combobox item template specifying process, please feel free to contact us. And please make sure that you have installed .NET Framework 3.5 or later versions and have added all necessary dlls from UI SDK for ASP.NET AJAX into your project before you run the item template customizing application.

Apart from the item template, the web ComboBox Control also has the ability to allow users to define the footer and header templates in aspx file programmatically. To view more detailed guidance, please visit this Header and Footer Templates of ComboBox Control.