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

Various Data Sources

Server-side binding

Web service binding

Page methods

OData binding

RadAutoCompleteBox 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 request for items is initiated by the text typed into the input area, by the user.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="c#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="AutoCompleteBox.Examples.PopulatingWithData.DefaultCS" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</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-narrow">
            <h2>Server-side binding</h2>
            <telerik:RadAutoCompleteBox RenderMode="Lightweight" ID="RadAutoCompleteBox1" runat="server"  Width="400" DropDownHeight="150"
                EmptyMessage="Select Continents">
            </telerik:RadAutoCompleteBox>
            <telerik:RadButton RenderMode="Lightweight" runat="server"  Text="Select" ID="Button1" OnClick="Button1_Click" />
            <p>
                <asp:Label runat="server" ID="Label1" />
            </p>
        </div>
        <div class="demo-container size-narrow">
            <h2>Web service binding</h2>
            <telerik:RadAutoCompleteBox RenderMode="Lightweight" runat="server" ID="RadAutoCompleteBox2"   Width="400" DropDownHeight="150"
                EmptyMessage="Select Company Names">
                <WebServiceSettings Path="LoadEntries.asmx" Method="GetCompanyNames" />
            </telerik:RadAutoCompleteBox>
            <telerik:RadButton RenderMode="Lightweight" runat="server"  Text="Select" ID="Button2" OnClick="Button2_Click" />
            <p>
                <asp:Label runat="server" ID="Label2" />
            </p>
        </div>
        <div class="demo-container size-narrow">
            <h2>Page methods</h2>
            <telerik:RadAutoCompleteBox RenderMode="Lightweight" ID="RadAutoCompleteBox3" runat="server"  Width="400" DropDownHeight="150"
                EmptyMessage="Select Company Names">
                <WebServiceSettings Method="GetCompanyNames" Path="defaultcs.aspx" />
            </telerik:RadAutoCompleteBox>
            <telerik:RadButton RenderMode="Lightweight" runat="server"  Text="Select" ID="Button3" OnClick="Button3_Click" />
            <p>
                <asp:Label runat="server" ID="Label3" />
            </p>
        </div>
        <div class="demo-container size-narrow">
            <h2>OData binding</h2>
            <telerik:RadAutoCompleteBox RenderMode="Lightweight" runat="server" ID="RadAutoCompleteBox4"  ODataDataSourceID="RadODataDataSource1"
                DropDownHeight="150" Width="400" DataModelID="Customer" DataTextField="CompanyName" EmptyMessage="Company Names"
                DataValueField="CustomerID" Filter="StartsWith" DropDownWidth="400">
            </telerik:RadAutoCompleteBox>
            <telerik:RadButton RenderMode="Lightweight" runat="server"  Text="Select" ID="Button4" OnClick="Button4_Click" />
            <p>
                <asp:Label runat="server" ID="Label4" />
            </p>
        </div>
    </telerik:RadAjaxPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance