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

Various Data Sources

Server-side binding

Page methods

Web Service binding

OData binding

RadSearchBox supports binding to various data source controls. It is populated with data by either using server-side binding, or client-side binding. The items are loaded on demand, and the request for items is initiated by the text typed into the input area, by the user.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="SearchBox_Examples_PopulatingWithData_DefaultCS"  %>

<%@ 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>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadODataDataSource runat="server" ID="RadODataDataSource1">
        <Schema>
            <telerik:DataModel ModelID="Customer" Set="Customers">
                <telerik:DataModelField FieldName="CustomerID" />
                <telerik:DataModelField FieldName="CompanyName" />
                <telerik:DataModelField FieldName="ContactName" />
            </telerik:DataModel>
        </Schema>
    </telerik:RadODataDataSource>

    <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1">
        <div class="demo-container size-thin">
            <h2>Server-side binding</h2>
            <telerik:RadSearchBox RenderMode="Lightweight" ID="RadSearchBox1" runat="server" Width="300" OnSearch="RadSearchBox1_Search" EmptyMessage="Search Continents">
                <DropDownSettings Height="150" Width="250" />
            </telerik:RadSearchBox>
            <p>
                <asp:Label runat="server" ID="Label1" />
            </p>
        </div>

        <div class="demo-container size-thin">
            <h2>Page methods</h2>
            <telerik:RadSearchBox RenderMode="Lightweight" ID="RadSearchBox2" runat="server" OnSearch="RadSearchBox2_Search"
                EmptyMessage="Search Products" Width="300">
                <DropDownSettings Height="150" Width="250" />
                <WebServiceSettings Path="defaultcs.aspx" Method="GetResults" />
            </telerik:RadSearchBox>
            <p>
                <asp:Label runat="server" ID="Label2" />
            </p>
        </div>

        <div class="demo-container size-thin">
            <h2>Web Service binding</h2>
            <telerik:RadSearchBox RenderMode="Lightweight" ID="RadSearchBox3" runat="server" OnSearch="RadSearchBox3_Search"
                EmptyMessage="Search Products" Width="300">
                <DropDownSettings Height="150" Width="250" />
                <WebServiceSettings Method="GetItems" Path="WebService.asmx" />
            </telerik:RadSearchBox>
            <p>
                <asp:Label runat="server" ID="Label3" />
            </p>
        </div>

        <div class="demo-container size-thin">
            <h2>OData binding</h2>
            <telerik:RadSearchBox RenderMode="Lightweight" runat="server" ID="RadSearchBox4" ODataDataSourceID="RadODataDataSource1"
                Width="300" DataModelID="Customer" DataTextField="CompanyName" EmptyMessage="Search Customers"
                DataValueField="CustomerID" Filter="StartsWith" OnSearch="RadSearchBox4_Search">
                <DropDownSettings Height="150" Width="250" />
            </telerik:RadSearchBox>
            <p>
                <asp:Label runat="server" ID="Label4" />
            </p>
        </div>
    </telerik:RadAjaxPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance