Edit this page

Client Templates


RadAutoCompleteBox provides support for client templates. The template itself contains mark up and binding expressions which are evaluated against a DataItem and then rendered as the Item's content on the client. The templates support the following type of expressions which are evaluated at run-time:

  • #=...# - Evaluates the JavaScript code expression or a string property from the data item and outputs the result in the template.

  • #...# - Evaluates the JavaScript code expression inside, but does not output value.

  • #:...# - Evaluates the JavaScript code expression or a string property from the data item, and outputs the HTML encoeded result in the template.


Client templates can not contain server controls.


When a WCF service is used, the Attributes collection is serialized as an array of Name-Value pairs, and inside the ClientTemplate the attributes are accessed by index: #=Attributes[0].Value#

Server side representation

On the server, the template will be represented as a string property of the control named ClientDropDownItemTemplate. The following application scenario shows an example of client templates.

<telerik:RadAutoCompleteBox RenderMode="Lightweight" runat="server" ID="RadAutoCompleteBox2" InputType="Token"
    Filter="StartsWith" Width="300px" DropDownWidth="300px" DropDownHeight="298px">
    <WebServiceSettings Path="AutoCompleteBox.aspx" Method="GetChildren" />
        <img alt="#= Value #" src="../../../Img/Northwind/Customers/#= Value #.jpg" style="height:80px;width:65px;"/>
        <span>#= Text #</span>
public static AutoCompleteBoxData GetChildren(object context)
    string searchString = ((Dictionary<string, object>)context)["Text"].ToString();
    DataTable data = GetChildNodes(searchString);
    List<AutoCompleteBoxItemData> result = new List<AutoCompleteBoxItemData>();

    foreach (DataRow row in data.Rows)
        AutoCompleteBoxItemData childNode = new AutoCompleteBoxItemData();
        childNode.Text = row["ContactName"].ToString();
        childNode.Value = row["CustomerID"].ToString();

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

    return res;

private static DataTable GetChildNodes(string searchString)
    SqlCommand selectCommand = new SqlCommand(@"SELECT * FROM [CustomerPhotos] WHERE ContactName LIKE @ContactName + '%'");
    selectCommand.Parameters.AddWithValue("ContactName", searchString);
    return GetData(selectCommand);

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

    DataTable data = new DataTable();

    return data;
Public Shared Function GetChildren(context As Object) As AutoCompleteBoxData
    Dim searchString As String = DirectCast(context, Dictionary(Of String, Object))("Text").ToString()
    Dim data As DataTable = GetChildNodes(searchString)
    Dim result As New List(Of AutoCompleteBoxItemData)()

    For Each row As DataRow In data.Rows
        Dim childNode As New AutoCompleteBoxItemData()
        childNode.Text = row("ContactName").ToString()
        childNode.Value = row("CustomerID").ToString()

    Dim res As New AutoCompleteBoxData()
    res.Items = result.ToArray()

    Return res
End Function

Private Shared Function GetChildNodes(searchString As String) As DataTable
    Dim selectCommand As New SqlCommand("SELECT * FROM [CustomerPhotos] WHERE ContactName LIKE @ContactName + '%'")
    selectCommand.Parameters.AddWithValue("ContactName", searchString)
    Return GetData(selectCommand)
End Function

Private Shared Function GetData(selectCommand As SqlCommand) As DataTable
    selectCommand.Connection = New SqlConnection(ConfigurationManager.ConnectionStrings("TelerikConnectionString").ConnectionString)
    Dim adapter As New SqlDataAdapter(selectCommand)

    Dim data As New DataTable()

    Return data
End Function
RadAutoCompleteBox before a selection is made. RadAutoCompleteBox after a selection is made.
client templates before selection client templates after selection

See Also

Is this article helpful? No Yes
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article