AutoCompleteBox - Templates

Server-side templates

Client-side templates

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

RadAutoCompleteBox supports server and client templates for the items contained inside the drop-down container.

Server templates are defined with HTML elements, or with server controls. The are defined inside the <DropDownItemTemplate> section of RadAutoCompleteBox.

The client templates on the other hand can not contain server controls and can be defined only with HTML elements.
The client templates are defined inside the <ClientDropDownItemTemplate> section of RadAutoCompleteBox.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="AutoCompleteBox.Examples.Templates.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-containers">
        <div class="demo-container">
            <h2>Server-side templates</h2>
            <telerik:RadAutoCompleteBox RenderMode="Lightweight" runat="server" ID="RadAutoCompleteBox1"  InputType="Token" EmptyMessage="Select Employee"
                DataSourceID="SqlDataSource1" Width="320px" DropDownWidth="318px" DataTextField="ContactName"
                DropDownHeight="300px" Filter="StartsWith">
                <DropDownItemTemplate>
                    <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;">
                                <telerik:RadBinaryImage ID="RadBinaryImage1" runat="server"  AlternateText="Contact Photo"
                                    ToolTip="Contact Photo" Width="90px" Height="110px" ResizeMode="Fit" DataValue='<%# DataBinder.Eval(Container.DataItem, "Photo")%>'></telerik:RadBinaryImage>
                            </td>
                        </tr>
                    </table>
                </DropDownItemTemplate>
            </telerik:RadAutoCompleteBox>
        </div>
        <div class="demo-container">
            <h2>Client-side templates</h2>
            <telerik:RadAutoCompleteBox RenderMode="Lightweight" runat="server" ID="RadAutoCompleteBox2"  InputType="Token" EmptyMessage="Select Employee"
                Filter="StartsWith" Width="320px" DropDownWidth="318px" DropDownHeight="300px">
                <WebServiceSettings Path="defaultcs.aspx" Method="GetChildren"></WebServiceSettings>
                <ClientDropDownItemTemplate> 
                    <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>
                </ClientDropDownItemTemplate>
            </telerik:RadAutoCompleteBox>
        </div>
    </div>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM [CustomerPhotos]"></asp:SqlDataSource>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?