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

    Binding to Telerik ClientDataSource

    Since Q2 2014 the RadSearchBox can be bound to RadClientDataSource control. This functionality is provided out of the box through the server-side ClientDataSourceID property.

    RadSearchBox needs the following properties in order to load its items properly:

    • DataText—defines the data source field name which will be shown as text of the item.
    • DataValue—defines the data source field name which will be considered as value of the item.

    The RadSearchBox properties MinFilterLength and MaxResultCount work in exactly the same manner as with any other data source control.

    • DefaultVB.aspx
    • DefaultVB.aspx.vb
    • styles.css
    <%@ Page Title="" Language="VB"  AutoEventWireup="false" CodeFile="DefaultVB.aspx.vb" Inherits="SearchBox_Examples_Client_Side_Data_Binding_DefaultVB" %>
     
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
     
    <!DOCTYPE html>
    <html xmlns='http://www.w3.org/1999/xhtml'>
    <head runat="server">
        <title>Telerik ASP.NET Example</title>
        <link href="styles.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
        <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
        <telerik:RadClientDataSource runat="server" ID="RadClientDataSource1">
            <DataSource>
                <WebServiceDataSourceSettings ServiceType="OData">
                    <Select Url="Products" DataType="JSON" />
                </WebServiceDataSourceSettings>
            </DataSource>
            <Schema DataName="d.results">
            </Schema>
        </telerik:RadClientDataSource>
     
     
        <div class="demo-container size-thin">
            <telerik:RadSearchBox RenderMode="Lightweight" ID="RadSearchBox1" runat="server" DataTextField="ProductName" DataValueField="ProductID" ClientDataSourceID="RadClientDataSource1"
                MaxResultCount="10" DropDownSettings-Height="200px" Width="300">
            </telerik:RadSearchBox>
        </div>
        </form>
    </body>
    </html>

    Support & Learning Resources

    Find Assistance