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

DropDownList Client Side Template in ASP.NET

Home > How to > DropDownList Client Template

The PerDropDownList template contains mark up and binding expressions that can be set up and configured by using ItemTemplate control of KT.UI for ASP.NET AJAX. These expressions of PerDropDownList template are evaluated against a DataItem and then displayed as the Item content on the client side. In this manual, users can get detailed information of PerDropDownList client side template from following two aspects:

Overview and explanations of PerDropDownList client side template, including specific expressions, and methods
ASP.NET and C# demo codes for setting PerDropDownList client side template

Client Side Template Overview

We mainly talk about two major elements for PerDropDownList client side template: client side template expressions and methods for setting up client side template.

Client Side Template Expressions

The supportable client side template expressions of PerDropDownList control are like what listed below:

#=...#: this expression is for evaluating JavaScript code expression or a string property from the data item and creating the result in the template.
#...#: this expression is to evaluate the JavaScript code expression inside, but there is no output value.
#:...#: this expression is for evaluating the JavaScript code expression or a string property from the data item and making the result in the template that is encoded with HTML codes.

Client Side Methods

The available methods for the PerDropDownList client-side template are:

get_clientTemplate() : this method can be applied to program the returning the defined client template as a string that include the defined binding expressions.
set_clientTemplate(value) : this method is developed to set the client template of the PerDropDownList.
bindTemplate() : this method is available for DropDownListItem's client-side object. Using this method, a data item should be passed.

Sample Codes for Setting Client Side Template

After being familiar with the basic information of KT.UI DropDownList control client side template, including client side template expression types and methods, users can move to set your own client side template based on following sample codes within ASP.NET application.

First part displays the demo ASP.NET codes for setting client side template.


<kettic:PerDropDownList runat="server" ID="PerDropDownList1"
                Width="300px" DropDownWidth="300px" DropDownHeight="300px">

                <ClientItemTemplate> 
                    <table cellpadding="0" cellspacing="0">
                        <tr>
                            <td>
                                <table cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td style="width: 25%">
                                            Name:
                                        </td>
                                        <td style="width: 50%">
                                            #= Text #
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Title:
                                        </td>
                                        <td>
                                            #= Attributes.ContactTitle #
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            City:
                                        </td>
                                        <td>
                                            #= Attributes.City #
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Country:
                                        </td>
                                        <td>
                                            #= Attributes.Country #
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Phone:
                                        </td>
                                        <td>
                                            #= Attributes.Phone #
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <td align="right" style="width: 25%; padding-left: 10px;">
                                <img src="#= Attributes.Photo # " alt=" #= Text # " style="height:80px;width:65px;"/>
                            </td>
                        </tr>
                    </table>
                </ClientItemTemplate>
                <WebServiceSettings Path="ClientSideTemplates.aspx" Method="GetCustomers"></WebServiceSettings>
</kettic:PerDropDownList>

Second part shows how to set DropDownList client side template by using C# snippets sample codes.


[WebMethod]
        public static DropDownListData GetCustomers(object context)
        {
            DataTable data = GetCustomersData();
            List<DropDownListItemData> result = new List<DropDownListItemData>();

            foreach (DataRow row in data.Rows)
            {
                DropDownListItemData item = new DropDownListItemData();
                item.Text = row["ContactName"].ToString();
                item.Attributes.Add("ContactTitle", row["ContactTitle"].ToString());
                item.Attributes.Add("City", row["City"].ToString());
                item.Attributes.Add("Country", row["Country"].ToString());
                item.Attributes.Add("Phone", row["Phone"].ToString());
                item.Attributes.Add("Photo", System.Web.VirtualPathUtility.ToAbsolute("~/Images/Northwind/Customers/" + row["CustomerID"].ToString() + ".jpg"));
                result.Add(item);
            }

            DropDownListData res = new DropDownListData();
            res.Items = result.ToArray();

            return res;
        }

        private static DataTable GetCustomersData()
        {
            SqlCommand selectCommand = new SqlCommand(@"SELECT * FROM [CustomerPhotos]");
            return GetData(selectCommand);
        }

        private static DataTable GetData(SqlCommand selectCommand)
        {
            selectCommand.Connection = new SqlConnection(ConfigurationManager.ConnectionStrings["KetticConnectionString"].ConnectionString);
            SqlDataAdapter adapter = new SqlDataAdapter(selectCommand);

            DataTable data = new DataTable();
            adapter.Fill(data);

            return data;
        }

For getting more guides on DropDownList template, users also can go to how to setting 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