DropDownList Server Side Template| KT.UI for ASP.NET AJAX

DropDownList Server Side Template in ASP.NET

Home > How to > DropDownList Server Template

The PerDropDownList template of KT.UI for ASP.NET AJAX has been designed to enable users to embed any context within PerDropDownListItem in ASP.NET programming application, such as, HTML markup, web ASP.NET server components as well as PerControls from Kettic UI library.

In this page, users can get detailed information of PerDropDownList server side template from following three aspects:

Explanations on how to create a PerDropDownList server side template object within ASP.NET web project
How to set PerDropDownList server side template by using ASP.NET codes
More guides on how to set KT.UI PerDropDownList client side template

How to Create Server Side Template Web Application

Setting and defining PerDropDownList server side template are realized in Visual Studio Web ASP.NET application. Thus, please be sure that you have implemented KT.UI PerDropDownList control within Visual Studio 2010, 2012 or any greater version. The specific steps are like below:

Create an ASP.NET web application within the Visual Studio and define a specific file name and saving location path;
Drag and add the PerDropDownList control into the AJAX ASP.NET web page;
Add an ItemTemplate control to the created PerDropDownList control;

A note here: the image in the server side PerDropDownList template and the text that occurs in the template is taken from the PerDropDownListItem using <%# DataBinder.Eval %> statements.

Example Codes for Setting Server Side Template

If you have successfully created the PerDropDownList template control within Visual Studio ASP.NET application based on the above instructions, you are able to move to this section to set your own server side template by referring to following well programmed sample codes.

Please note that, before the template can invoke and apply the PerDropDownList item's properties to bind the elements in the server side template, the application needs to definitely bind the items by calling DataBind method of PerDropDownListItem objects.

Please refer to following sample ASP.NET codes for setting server side template.


<kettic:PerDropDownList runat="server" ID="PerDropDownList1" DataSourceID="SqlDataSource1" Width="300px"
                DataTextField="ContactName" DropDownWidth="300px" DropDownHeight="300px">
                <ItemTemplate>
                    <table cellpadding="0" cellspacing="0">
                        <tr>
                            <td>
                                <table cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td style="width: 25%">Name:
                                        </td>
                                        <td style="width: 50%">
                                            <%# DataBinder.Eval(Container.DataItem, "ContactName")%>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Title:
                                        </td>
                                        <td>
                                            <%# DataBinder.Eval(Container.DataItem, "ContactTitle")%>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>City:
                                        </td>
                                        <td>
                                            <%# DataBinder.Eval(Container.DataItem, "City")%>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Country:
                                        </td>
                                        <td>
                                            <%# DataBinder.Eval(Container.DataItem, "Country")%>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Phone:
                                        </td>
                                        <td>
                                            <%# DataBinder.Eval(Container.DataItem, "Phone")%>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <td align="right" style="width: 25%; padding-left: 10px;">
                                <kettic:PerBinaryImage ID="PerBinaryImage1" runat="server" AlternateText="Contact Photo"
                                    ToolTip="Contact Photo" Width="90px" Height="110px" ResizeMode="Fit" DataValue='<%# Eval("Photo") == DBNull.Value? new System.Byte[0]: Eval("Photo") %>'></kettic:PerBinaryImage>
                            </td>
                        </tr>
                    </table>
                </ItemTemplate>
</kettic:PerDropDownList>

More DropDownList Template Guides

In addition to DropDownList server side template, KT.UI for ASP.NET AJAX still supports DropDownList client side template. If you need to get more guides on DropDownList client side template, please go to this tutorial page: how to set DropDownList serve side template.

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 ASP.NET AJAX DataPager UI Control ASP.NET AJAX Dock UI Control

ASP.NET AJAX DropDownList UI Control

Overview Getting Started

Features

Virtual Scrolling

Client Prpgramming

Data Binding Template DropDownList Event

Server Programming

Data Binding to Array

Template

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