DropDownList - Client-side Templates

Select Employee:

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

RadDropDownList supports client templates. The templates are declared in the ClientItemTemplate tag and support the following expressions for evaluating code: #= ... # - Data - Evaluates the JavaScript code expression or a string property from the data item and outputs the result in the template.
# ... # - Code - Evaluates the JavaScript code expression inside. Does not output value.
#: ... # - HTML-encode - Same as the data expression, but HTML-encodes the result.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="DropDownList.Examples.Functionality.ClientTemplates.DefaultCS" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />

    <div class="demo-container size-thin">

        <h2>Select Employee:</h2>
        <telerik:RadDropDownList RenderMode="Lightweight" runat="server" ID="RadDropDownList1" 
            Width="310px" DropDownWidth="310px" 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: 70%">
                                            #= 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="defaultcs.aspx" Method="GetCustomers"></WebServiceSettings>
        </telerik:RadDropDownList>

    </div>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?