ComboBox Header and Footer Template|UI Control for ASP.NET AJAX, C#, VB.NET

ComboBox Header and Footer Template in ASP.NET

Home > How to > ComboBox Header and Footer Templates

Information to Header and Footer Template

What is Header Template? Header Template is an element of the asp.net ComboBox Control, which enables users to customize the header of the items in the drop-down list. This header template is very useful especially when the attributes of item are showed in multiple columns within the item template. And the Header Template is able to include any HTML element.

What is Footer Template? Similar to Header Template, the Footer Template element is offered to help users customize the footer of items in the drop-down list. The Footer Template can also contain any HTML element.

And from this guide page, you can find detailed example on how to customize the footer and header of combobox in aspx web page.

How to Set ComboBox Header and Footer Template

Detailed programming example is listed in this part for showing you how to use Header and Footer Template in aspx web application. In general, the settings of header and footer template are based on the settings of item template. For instance, if the item template specifies to show one-line items with three columns, then the header and footer template will also contain three columns.

Here we are trying to show you how to create a three-column web ComboBox whose columns of each item are labeled with a footer and a header.

<kettic:PerComboBox runat="server" ID="PerComboBox1" 
DataTextField="ContactName"                            EnableLoadOnDemand="True" 
DataSourceID="LinqDataSource1" 
OnItemsRequested="PerComboBox1_ItemsRequested"                            Width="420" Height="190" 
HighlightTemplatedItems="true" 
Label="Multi-column combobox:">
<HeaderTemplate>
    <ul>
        <li class="col1">Contact Name</li>
        <li class="col2">City</li>
        <li class="col3">Title</li>
    </ul>
</HeaderTemplate>
<FooterTemplate>
         <ul>
        <li class="col1">Contact Name</li>
        <li class="col2">City</li>
        <li class="col3">Title</li>
    </ul>
</FooterTemplate>
<ItemTemplate>
    <ul>
        <li class="col1"><%# Eval("ContactName") %></li>
        <li class="col2"><%# Eval("City") %></li>
        <li class="col3"><%# Eval("ContactTitle") %></li>
                                </ul>
</ItemTemplate>
</kettic:PerComboBox>

Note: to make sure the footer and header can line up in a proper way, the asp.net ComboBox Control let the Footer and header Template to display items using a column-width table automatically.

The picture below is used to demonstrate the result of above Header and Footer template setting example.

Other ComboBox Template Related Tutorial

Apart from the footer and header template, do you want to specify a template for the combobox items? If yes, you can visit this ComboBox Item Template page looking for detailed programming code.

ASP.NET AJAX UI Controls

ASP.NET AJAX Chart UI Control ASP.NET AJAX Grid UI Control ASP.NET AJAX Barcode UI Control ASP.NET AJAX Button UI Control ASP.NET AJAX Calendar UI Control ASP.NET AJAX NavigationBar UI Control ASP.NET AJAX Captcha UI Control ASP.NET AJAX Color Editor UI Control

ASP.NET AJAX ComboBox UI Control

Overview Getting Started Elements

Features

Filtering Validation AutoComplete ChekBox Support Render Modes Load On Demand

Templates

Item Template

Header and Footer Template

Data Binding

ArrayList Data DataSource Data XML Data

Client Prpgramming

ComboBox Event

Server Programming

ComboBox Event ASP.NET AJAX DataPager UI Control ASP.NET AJAX Dock UI Control ASP.NET AJAX DropDownList UI Control ASP.NET AJAX DropDownTree UI Control ASP.NET AJAX HtmlEditor UI Control ASP.NET AJAX FileManager UI Control ASP.NET AJAX Filter UI Control ASP.NET AJAX Input UI Control ASP.NET AJAX ListBox UI Control ASP.NET AJAX ListView UI Control ASP.NET AJAX ToolBar UI Control ASP.NET AJAX TabControl UI Control ASP.NET AJAX Menu UI Control ASP.NET AJAX ToolTip UI Control