ComboBox - Load on Demand Modes

select

select

select

select

Isolate this demo as a stand-alone application

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.

<%@ 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>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:RadAjaxPanel runat="server" ID="RadAjaxPanel1">
        <div class="demo-container size-narrow">
            <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>
            <telerik:RadButton runat="server" Text="Select" ID="Button1" OnClick="Button1_Click" />
            <br />
            <asp:Label CssClass="status-text" ID="Label1" runat="server" />
        </div>
        <div class="demo-container size-narrow">
            <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>
            <telerik:RadButton runat="server" Text="Select" ID="Button2" OnClick="Button2_Click" />
            <br />
            <asp:Label CssClass="status-text" ID="Label2" runat="server" />
        </div>
        <div class="demo-container size-narrow">
            <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>
            <telerik:RadButton runat="server" Text="Select" ID="Button3" OnClick="Button3_Click" />
            <br />
            <asp:Label CssClass="status-text" ID="Label3" runat="server" />
        </div>
        <div class="demo-container size-narrow">
            <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>
            <telerik:RadButton runat="server" Text="Select" ID="Button4" OnClick="Button4_Click" />
            <br />
            <asp:Label CssClass="status-text" ID="Label4" runat="server" />

        </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>

Find Assistance

Help Us Improve

Was this example helpful?