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 / Performance with Web Services

Load time:

Open the combobox to see the load time
Example Configuration

  • This example demonstrates how to achieve the best performance with RadComboBox when dealing with large ammounts of data (items). The important steps are:

    1. Use Web Service load on demand.

      Web Service load on demand does not request the page and avoids the execution of the page life cycle. Less data is transferred between the client and the server.

    2. The using of EnabelItemCaching

      This property will save a time and use the result from the previous request with the same parameters.

    3. The implementation of the Web Service methods uses two optimization techniques to decrease the size of the generated JSON output:
      • The return type of the web method is IEnumerable. This prevents the serialization of the type name in the JSON output:
        [WebMethod]
        public IEnumerable GetItems(RadComboBoxContext context) 
        {
            int numberOfItems = 1000;
            List<ComboBoxItemData> items = new List<ComboBoxItemData>();
            for (int i = 0; i < numberOfItems; i++)
            {
                ComboBoxItemData itemData = new ComboBoxItemData();
                itemData.Text = "Item " + i;
                items.Add(itemData);
            }
        
            return items;
        }
        				
      • The web method returns only the data required by the application. In this case only the item's Text property is serialized by using a custom class - ComboBoxItemData. You should prefer this approach over using the RadComboBoxItemData or RadComboBox classes to preserve output size:
         class ComboBoxItemData
            {
                private string text;
        
                public string Text
                {
                    get { return text; }
                    set { text = value; }
                }
            }
        				

    The OnClientItemsRequesting and OnClientItemsRequested events are used only to measure the time requred to perform the load on demand operation. Consuming them is not required for the proper operation of RadComboBox in this scenario.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.ComboBox.WebServicePerformance.DefaultCS"
        Language="C#" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ 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" %>
    <!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="Headtag2"></qsf:HeadTag>
        <style type="text/css">
            span#total
            {
                display: inline !important;
                font-style: italic;
            }
            #ConfigurationPanel1 ul
            {
                margin: 0;
                padding: 0;
                list-style: none;
            }
            #ConfigurationPanel1 li
            {
                line-height: 28px;
            }
            #ConfigurationPanel1 li label
            {
                padding: 0 7px;
            }
            .ComboBox
            {
                margin: 30px 0 30px 200px;
            }
        </style>
    </head>
    <body class="BODY">
        <form runat="server" id="Form1" method="post">
        <qsf:Header ID="Header2" runat="server" NavigationLanguage="C#"></qsf:Header>
        <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="Panel1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="Panel1" />
                        <telerik:AjaxUpdatedControl ControlID="RadComboBox1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <qsf:InformationBox ID="InformationBox1" runat="server" Title="Load time:">
            <span id="total">Open the combobox to see the load time</span>
        </qsf:InformationBox>
        <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Expanded="True" Orientation="Vertical">
            <ul>
                <li style="width: 220px;">
                    <label>
                        Number of items to load:</label>
                    <telerik:RadNumericTextBox runat="server" ID="ItemsCountTextBox" Value="1000" MaxValue="4000"
                        MinValue="100" Width="60px" ShowSpinButtons="True">
                        <NumberFormat DecimalDigits="0" />
                    </telerik:RadNumericTextBox></li>
            </ul>
        </qsf:ConfiguratorPanel>
        <telerik:RadComboBox ID="RadComboBox1" CssClass="ComboBox" runat="server" Width="240px" Height="200px"
            OnClientItemsRequested="OnClientItemsRequested" OnClientItemsRequesting="OnClientItemsRequesting"
            EnableLoadOnDemand="true" OnClientDropDownClosed="OnClientDropDownClosed" EnableItemCaching="true">
            <ExpandAnimation Type="none" />
            <CollapseAnimation Type="none" />
            <WebServiceSettings Path="ComboWebService.asmx" Method="GetItems" />
        </telerik:RadComboBox>
        <telerik:RadScriptBlock runat="Server" ID="RadScriptBlock1">

            <script type="text/javascript">
                    var startTime;
                    var sendRequest= true;
                    var calculate = false;

                    function OnClientItemsRequesting(sender, args)
                    {
                    
                        var input = $find("<%= ItemsCountTextBox.ClientID %>");
                        args.get_context()["ItemsCount"] = input.get_value();
                    
                        startTime = new Date();
                    }

                    function OnClientItemsRequested(sender, args)
                    {
                        var endTime = new Date();
                        $get("total").innerHTML = endTime - startTime + "ms";
                    }

                    function OnClientDropDownClosed(sender, args)
                    {
                        sender.clearItems();
                        
                        if(args.get_domEvent().stopPropagation)
                            args.get_domEvent().stopPropagation();
                    }
            </script>

        </telerik:RadScriptBlock>
        <qsf:Footer ID="Footer2" runat="server"></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