Edit this page

Client Templates

RadSearchBox 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 encoded result in the template.


Client templates can not contain server controls.

<telerik:RadSearchBox RenderMode="Lightweight" runat="server" ID="RadSearchBox1" 
    <DropDownSettings Height="400" Width="300">
            #= DataItem.ID # #= Text #
    <WebServiceSettings Path="ItemTemplateClient.aspx" Method="GetResults" />
<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
    ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" 
    SelectCommand="SELECT * FROM [Products]">
public static SearchBoxItemData[] GetResults(SearchBoxContext context)
    DataTable data = GetData(context.Text);

    List<SearchBoxItemData> result = new List<SearchBoxItemData>();

    for (int i = 0; i < data.Rows.Count; i++)
        SearchBoxItemData itemData = new SearchBoxItemData();
        itemData.Text = data.Rows[i]["ProductName"].ToString();
        itemData.DataItem.Add("ID", data.Rows[i]["ProductId"].ToString());


    return result.ToArray();

private static DataTable GetData(string filterString)
    SqlConnection connection = new SqlConnection(ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString);
    SqlCommand command = new SqlCommand("SELECT [ProductId], [ProductName] FROM [Products] WHERE [ProductName] LIKE '%' + @filterString + '%' ORDER BY [ProductId]");
    command.Parameters.AddWithValue("@filterString", filterString);
    command.Connection = connection;
    SqlDataAdapter adapter = new SqlDataAdapter(command);

    DataTable data = new DataTable();
    return data;
<WebMethod> _
Public Shared Function GetResults(context As SearchBoxContext) As SearchBoxItemData()
    Dim data As DataTable = GetData(context.Text)

    Dim result As New List(Of SearchBoxItemData)()

    For i As Integer = 0 To data.Rows.Count - 1
        Dim itemData As New SearchBoxItemData()
        itemData.Text = data.Rows(i)("ProductName").ToString()
        itemData.DataItem.Add("ID", data.Rows(i)("ProductId").ToString())


    Return result.ToArray()
End Function

Private Shared Function GetData(filterString As String) As DataTable
    Dim connection As New SqlConnection(ConfigurationManager.ConnectionStrings("NorthwindConnectionString").ConnectionString)
    Dim command As New SqlCommand("SELECT [ProductId], [ProductName] FROM [Products] WHERE [ProductName] LIKE '%' + @filterString + '%' ORDER BY [ProductId]")
    command.Parameters.AddWithValue("@filterString", filterString)
    command.Connection = connection
    Dim adapter As New SqlDataAdapter(command)

    Dim data As New DataTable()
    Return data
End Function

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

Give article feedback

Tell us how we can improve this article