ComboBox

Controls

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

ComboBox - Load on Demand Modes

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.

C# VB
Show code in new window Demo isolation steps
<%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" ResponseEncoding="UTF-8"Inherits="ComboBox.Examples.PopulatingWithData.AutoCompleteSql.DefaultCS" Language="c#" %>
<%@ 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>ASP.NET ComboBox Demo - Load on Demand Modes</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="QsfSkinManager" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />

     <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1">
          <div class="qsf-demo-canvas">

               <div class="qsf-fb">
                    <ul>
                         <li>
                              <telerik:RadComboBox ID="RadComboBox1" runat="server" Width="250" Height="150"
                                   EmptyMessage="Select a Company" DataSourceID="SqlDataSource1" DataTextField="CompanyName"
                                   DataValueField="CompanyName" EnableAutomaticLoadOnDemand="True" ItemsPerRequest="10"
                                   ShowMoreResultsBox="true" EnableVirtualScrolling="true" Label="Server-Side (Automatic):">
                              </telerik:RadComboBox>
                              <asp:Button runat="server" Text="Select" ID="Button1" OnClick="Button1_Click" />
                              <br />
                              <asp:Label CssClass="status-text" ID="Label1" runat="server" />
                         </li>
                         <li>
                              <telerik:RadComboBox ID="RadComboBox2" runat="server" Width="250" Height="150"
                                   EmptyMessage="Select a Company" EnableLoadOnDemand="True" ShowMoreResultsBox="true"
                                   EnableVirtualScrolling="true" OnItemsRequested="RadComboBox2_ItemsRequested"
                                   label="Server-Side:">
                              </telerik:RadComboBox>
                              <asp:Button runat="server" Text="Select" ID="Button2" OnClick="Button2_Click" />
                              <br />
                              <asp:Label CssClass="status-text" ID="Label2" runat="server" />
                         </li>
                         <li>
                              <telerik:RadComboBox ID="RadComboBox3" runat="server" Width="250" Height="150"
                                   EmptyMessage="Select a Company" EnableLoadOnDemand="true" ShowMoreResultsBox="true"
                                   EnableVirtualScrolling="true" Label="Web Service:">
                                   <WebServiceSettings Method="GetCompanyNames" Path="Products.asmx" />
                              </telerik:RadComboBox>
                              <asp:Button runat="server" Text="Select" ID="Button3" OnClick="Button3_Click" />
                              <br />
                              <asp:Label CssClass="status-text" ID="Label3" runat="server" />
                         </li>
                         <li>
                              <telerik:RadComboBox ID="RadComboBox4" runat="server" Width="250px" Height="150px"
                                   EmptyMessage="Select a Company" EnableLoadOnDemand="true" ShowMoreResultsBox="true"
                                   EnableVirtualScrolling="true" Label="Page Methods:">
                                   <WebServiceSettings Method="GetCompanyNames" Path="defaultcs.aspx" />
                              </telerik:RadComboBox>
                              <asp:Button runat="server" Text="Select" ID="Button4" OnClick="Button4_Click" />
                              <br />
                              <asp:Label CssClass="status-text" ID="Label4" runat="server" />
                         </li>
                    </ul>
               </div>

          </div>
     </telerik:RadAjaxPanel>

     <asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
          ProviderName="System.Data.SqlClient" SelectCommand="SELECT [CompanyName] from [Customers] ORDER By [CompanyName]">
     </asp:SqlDataSource>

    </form>
</body>
</html>