Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

ComboBox / Load on Demand modes

Server-Side (Automatic):

Server-Side:

Web Service:

Page Methods:

  • RadComboBox provides its own Load On Demand mechanism - the RadComboBox loads its Items when you open the DropDown for the first time and when you type any text in the input. There are two types of Load On Demand mechanisms - Server-Side and Web Service.

    You can you use either automatic or manual Server-Side Load On Demand.

    In order to use the manual Server-Side approach set the EnableLoadOnDemand property to true and handle the ItemsRequested event, which fires each time Items are requested by the RadComboBox. The server-side event handler should return all relative matches for the currently typed text.

    In order to load Items on portions (let say by 10 or 15, etc.) instead of loading all Items matching the given text you can set the ShowMoreResultsBox property to true. This will enable the footer which shows which Items are currently loaded and how many remain. Then you must implement the ItemsRequested event handler in a way it returns only the next number of Items. Using this approach you can achieve better performance in cases many Items are to be loaded in the RadComboBox.

    Additionally you can set the EnableVirtualScrolling property to true and RadComboBox will load Items on portions even when you scroll the DropDown.

    Setting up the automatic Load On Demand is straightforward:

    • Set a data source to the RadComboBox. Use either DataSourceID or the DataSource property to do this
      and set the DataTextField and DataValueField properties to the respective fields in the data source.
      (Note that when using DataSource you must set the property on each postback, most conveniently in Page_Init.)
    • Set EnableAutomaticLoadOnDemand to true.
    • (Optional) Set ShowMoreResultsBox/EnableVirtualScrolling to true to enable the respective features.
    • (Optional) Set ItemsPerRequest to the number of Items you would like to load per request. The default (-1) loads all Items at once.

    Note: When you use the DataSourceID or DataSource properties to bind RadComboBox during automatic Load On Demand the ItemDataBound event fires normally, which means that you can use it to change the Item's Text and Value properties as well as modify its Attributes collection based on the DataItem, etc.

    In order to use a Web Service you must first mark it with the ScriptService attribute and expose a public method (marked with the WebMethod attribute) which would load Items similarly as in the Server-Side approach. The other difference in this approach is that data should be returned in objects of a custom serializable type.

    Finally, you should keep into account that the AllowCustomText property is enabled (set to true) by default when the Load On Demand mechanism is enabled and the value set to the property is ignored.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" ResponseEncoding="UTF-8"
        Inherits="Telerik.ComboboxExamplesCS.AutoCompleteSql.DefaultCS" Language="c#" %>

    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <%@ 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">
        <qsf:HeadTag runat="server" ID="Headtag1"></qsf:HeadTag>
        <style type="text/css">
            span.text
            {
                font: 13px 'Segoe UI' , Arial, sans-serif;
                color: #4888a2;
                padding-right: 10px;
                vertical-align: middle;
                display: inline-block; *display:inline;zoom:1;width:90px;}
            .module-row
            {
                margin: 10px 0;
            }
            .module-row .status-text
            {
                margin-left: 103px;
                display: block;
                font: 13px 'Segoe UI' , Arial, sans-serif;
                color: #4888a2;
            }
            html.rfdButton a.rfdSkinnedButton
         {
         vertical-align: middle;
         margin: 0 0 0 5px;
         }
        
         * html div.RadComboBox
         {
             vertical-align: middle;
         }
        </style>
    </head>
    <body class="BODY">
        <form runat="server" id="mainForm" method="post">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
        <qsf:Header runat="server" ID="Header1" NavigationLanguage="C#"></qsf:Header>
        <telerik:RadFormDecorator ID="FormDecorator1" runat="server" DecoratedControls="all" ControlsToSkip="Scrollbars, Fieldset, Zone"></telerik:RadFormDecorator>
        
        <!-- content start -->
        <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1">
            <div class="module-row">
                <span class="text">Server-Side (Automatic):</span>
                <telerik:RadComboBox ID="RadComboBox1" runat="server" Width="250px" Height="150px"
                    EmptyMessage="Select a Company" DataSourceID="SqlDataSource1" DataTextField="CompanyName"
                    DataValueField="CompanyName" EnableAutomaticLoadOnDemand="True" ItemsPerRequest="10"
                    ShowMoreResultsBox="true" EnableVirtualScrolling="true">
                </telerik:RadComboBox>
                <asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                    ProviderName="System.Data.SqlClient" SelectCommand="SELECT [CompanyName] from [Customers] ORDER By [CompanyName]" />
                    <asp:Button runat="server" Text="Select" ID="Button1" OnClick="Button1_Click">
                </asp:Button>
            </div>
            <div class="module-row">
                <asp:Label CssClass="status-text" ID="Label1" runat="server"></asp:Label>
            </div>
            <br />
            <div class="module-row">
                <span class="text">Server-Side:</span>
                <telerik:RadComboBox ID="RadComboBox2" runat="server" Width="250px" Height="150px"
                    EmptyMessage="Select a Company" EnableLoadOnDemand="True" ShowMoreResultsBox="true"
                    EnableVirtualScrolling="true" OnItemsRequested="RadComboBox2_ItemsRequested">
                </telerik:RadComboBox>
                <asp:Button runat="server" Text="Select" ID="Button2" OnClick="Button2_Click">
                </asp:Button>
            </div>
            <div class="module-row">
                <asp:Label CssClass="status-text" ID="Label2" runat="server"></asp:Label>
            </div>
            <br />
            <div class="module-row">
                <span class="text">Web Service:</span>
                <telerik:RadComboBox ID="RadComboBox3" runat="server" Width="250px" Height="150px"
                    EmptyMessage="Select a Company" EnableLoadOnDemand="true" ShowMoreResultsBox="true"
                    EnableVirtualScrolling="true">
                    <WebServiceSettings Method="GetCompanyNames" Path="Products.asmx" />
                </telerik:RadComboBox>
                <asp:Button runat="server" Text="Select" ID="Button3" OnClick="Button3_Click">
                </asp:Button>
            </div>
            <div class="module-row">
                <asp:Label CssClass="status-text" ID="Label3" runat="server"></asp:Label>
            </div>
            <br />
            <div class="module-row">
                <span class="text">Page Methods:</span>
                <telerik:RadComboBox ID="RadComboBox4" runat="server" Width="250px" Height="150px"
                    EmptyMessage="Select a Company" EnableLoadOnDemand="true" ShowMoreResultsBox="true"
                    EnableVirtualScrolling="true">
                    <WebServiceSettings Method="GetCompanyNames" Path="defaultcs.aspx" />
                </telerik:RadComboBox>
                <asp:Button runat="server" Text="Select" ID="Button4" OnClick="Button4_Click">
                </asp:Button>
            </div>
            <div class="module-row">
                <asp:Label CssClass="status-text" ID="Label4" runat="server"></asp:Label>
            </div>
        </telerik:RadAjaxPanel>
        <!-- content end -->
        <qsf:Footer runat="server" ID="Footer1"></qsf:Footer>
        </form>
    </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451