Information to ListBox Item Template

In the tutorial of ListBox Items page, we mentioned several properties that the PerListBox Control has offered, including Text, Value, Checked, ImageUrl and BorderStyle, to help developers customize the style and look of the items.

Apart the properties that are mentioned in that page, the PerListBox Control also allows developers to customize the appearance of listbox items using template. Remarkably, using the templates, developer can add some complex elements to the items, like HTML markup, ASP.NET server controls and other ASP.NET AJAX UI controls.

Besides, another benefit of using template in listbox creating application lies on the convenience it has brought. For instance, instead of setting properties for each listed item, we just need to customize the properties of all items with one template.

How to Customize Item Template in ListBox

You can find a sample programming example on how to customize the item template in ASP.NET web application.

<kettic:PerListBox ID="PerListBox1" runat="server"                    Height="200px " Width="215px" ButtonSettings-AreaHeight="100px" ButtonSettings-AreaWidth="60px" >
                                            <itemtemplate>
                            <img class="product-image" src='/Images/ListBox/<%# DataBinder.Eval(Container, "Value")%>'
                                alt="item image">
                            <span class="item-title">
                                <%# DataBinder.Eval(Container, "Text")%></span> <span class="bearing">1 bearing</span>
                        </itemtemplate>
                        <items>
                            <kettic:PerListBoxItem Text="item 1" Value=" item1.png" price="99"
                                Selected="true"></kettic:PerListBoxItem>
                            <kettic:PerListBoxItem Text=" item 2" Value=" item2.png" price="199">
                            </kettic:PerListBoxItem>
                            <kettic:PerListBoxItem Text=" item 3" Value=" item3.png" price="99">
                            </kettic:PerListBoxItem>                            
                        </items>
                    </kettic:PerListBox>

Note: when customizing the item settings using template, you can also use the data binding feature. For instance, the image and text appear in the template can be all taken from other external databases. But you have to call the DataBind method if you want to use data binding function in the template.

If you have any question in the listbox item template setting process, please feel free to contact us via E-mail.

Other ListBox Related Features

Apart from the template customizing function, the PerListBox Control also offers other advanced item managing features, like those listed below:

Online tutorial on item re-ordering in listbox at ASP.NET web application
Online tutorial on item transferring between listboxes at ASP.NET web application
Online tutorial on configuring the buttons of listbox at ASP.NET web application
Online tutorial on adding checkboxes to items of listbox at ASP.NET web application
Online tutorial on utilizing the load on demand feature of listbox at ASP.NET web application

ASP.NET AJAX UI Controls

ASP.NET AJAX ListBox UI Control

Overview Getting Started Elements

Features

Reorder Transfer Drag and Drop Button Configuration CheckBoxes Load On Demand Templates

Data Binding

XML Data DataSource Data

Client Prpgramming

ListBox Event

Server Prpgramming

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