AutoCompleteBox - Client Filtering

SqlDataSource binding

Web service binding


OData binding

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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 PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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>

Find Assistance

Help Us Improve

Was this example helpful?