New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

    Client-side Templates

    Select Employee:

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