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

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" 
    DataSourceID="SqlDataSource1"
    DataValueField="ProductId"
    DataTextField="ProductName">
    <DropDownSettings Height="400" Width="300">
        <ClientTemplate>
            #= DataItem.ID # #= Text #
        </ClientTemplate>
    </DropDownSettings>
    <WebServiceSettings Path="ItemTemplateClient.aspx" Method="GetResults" />
</telerik:RadSearchBox>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
    ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" 
    SelectCommand="SELECT * FROM [Products]">
</asp:SqlDataSource>
[WebMethod]
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());

        result.Add(itemData);
    }

    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();
    adapter.Fill(data);
    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())

        result.Add(itemData)
    Next

    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()
    adapter.Fill(data)
    Return data
End Function

In this article