RadCombobox Google functionality

This example shows how to give a Telerik RadComboBox true “Google-style” type-ahead functionality. As the user types, the control automatically requeries the database and displays matching results. This pattern works well for large datasets because it only loads what the user needs.

Related Articles

... and you 'll find more on the Telerik ASPNET Menu

The markup below defines the RadComboBox and enables load-on-demand. The important thing to note is that the initial datasource is bound in the Init event. RadComboBox needs an initial dataset before the first render so it can configure itself correctly.

The ItemsRequested event handles the type-ahead behavior. Each time the user types, the event fires, the query runs again using the current text, and the results are rebound to the control. Note that you don't have to use this event, if you're OK with all the items being in the drop down initially, you can skip this event

If you want to allow any text to be entered, the first example does exactly that. But if you want to limit the user to selecting from the list, you can disable custom text and enable first-match behavior. Setting AllowCustomText = False and MarkFirstMatch = True ensures the user can only pick a valid item.

 

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site1.Master" CodeBehind="Test.aspx.vb" Inherits="Express.Test" %>
<asp:Content ID="Content1" ContentPlaceHolderID="header" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <asp:Label runat="server" ID="lblError" CssClass="Error"></asp:Label>
    <telerik:RadAjaxPanel runat="server">
        <table style="margin:0 auto">
            <tr>
                <td>Cust Name begins with </td>
            </tr>
            <tr>
                <td>
                    <telerik:RadComboBox Width="500px" ID="cboCustomer" RenderMode="Lightweight" AllowCustomText="true" AutoPostBack="true"
                        DataTextField="custname"
                        DataValueField="custnmbr"
                        EnableAutomaticLoadOnDemand="true"
                        ItemsPerRequest="25"
                        runat="server"></telerik:RadComboBox>
 
                </td>
                <td><telerik:RadButton ID="btnNext" runat="server" Text="Next"></telerik:RadButton></td>
            </tr>
        </table>
    </telerik:RadAjaxPanel>
 
</asp:Content>

NOTE that the datasource is set in the Init. That's important. 

Imports Telerik.Web.UI
 
Public Class Test
    Inherits InheritedPage
    Dim mstrPath As String
 
    Private Sub ChooseCustomer_Init(sender As Object, e As EventArgs) Handles Me.Init
        'initially populates the cbo
        cboCustomer.DataSource = SPs.fp_RM00101_SEL_CUSTNAME("zzz", Session("ConnectionString")).getTable
        cboCustomer.DataBind()
    End Sub
 
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    End Sub
    Private Sub cboCustomer_ItemsRequested(sender As Object, e As RadComboBoxItemsRequestedEventArgs) Handles cboCustomer.ItemsRequested
        Dim strError As String = ""
 
        Try
            'requeries the cbo
            cboCustomer.DataSource = SPs.fp_RM00101_SEL_CUSTNAME(e.Text, App.ConnectionString).getTable
            cboCustomer.DataBind()
 
        Catch ex As ThreadAbortException
        Catch ex As Exception
            ErrorHandler.globalErrorHandler(ex, strError, "Express", App.TabletUserName, False)
            Me.lblError.Text = ex.Message
        End Try
 
    End Sub
 
 

 

End Class

The code above will allow any text into the text box. To 'limit to list', use this:

Private Sub Item_Init(sender As Object, e As EventArgs) Handles Me.Init
    cboSeg1.DataTextField = "manufacturer"
    cboSeg1.DataValueField = "manufacturer"
    cboSeg1.AllowCustomText = False
    cboSeg1.MarkFirstMatch = True
    cboSeg1.EmptyMessage = "Manufacturer"
    cboSeg1.DataSource = SPs.fp_IVManufacturers2(True, App.ConnectionString).getTable
    cboSeg1.DataBind()
 
End Sub

The 'AllowCustomText' and 'MarkFirstMatch' do the trick. 

 

 

 


RealWorldCode gives developers practical, real‑world solutions with clean, working code — no fluff, no theory, just answers.
Links
Home
Knowledge Areas
Sitemap
Contact
Et cetera
Privacy Policy
Terms and Conditions
Cookie Preferences