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

Client Filtering

SqlDataSource binding

Web service binding


OData binding

The example demonstrates how the RadAutoCompleteBox behaves, when the Client Filtering feature of the control is enabled. In contrast to the default behavior of the control (where a callback is fired upon each character typed in the input area), the RadAutoCompleteBox is initially supplied with the underlying DataSource.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="AutoCompleteBox.Examples.Functionality.ClientFiltering.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>
    <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>SqlDataSource binding</h2>
            <telerik:RadAutoCompleteBox RenderMode="Lightweight" ID="RadAutoCompleteBox1" runat="server"  EnableClientFiltering="true" Width="400" DropDownHeight="150"
                DataSourceID="SqlDataSource1" DataTextField="ContactName" EmptyMessage="Contact Names"
                DataValueField="CustomerID">
            </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"  EnableClientFiltering="true" Width="400" DropDownHeight="150"
                EmptyMessage="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>
            <br />
        </div>

        <div class="demo-container size-narrow">
            <h2>OData binding</h2>
            <telerik:RadAutoCompleteBox RenderMode="Lightweight" runat="server" ID="RadAutoCompleteBox3"  EnableClientFiltering="true" 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="Button3" OnClick="Button3_Click" />
            <p>
                <asp:Label runat="server" ID="Label3" />
            </p>
        </div>
    </telerik:RadAjaxPanel>
    <asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT [CustomerID], [ContactName] FROM [Customers] ORDER By ContactName"></asp:SqlDataSource>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance