This is a migrated thread and some comments may be shown as answers.

[Solved] RadComboBox very very slow

8 Answers 695 Views

ComboBox

This is a migrated thread and some comments may be shown as answers.

Agi asked on 19 Apr 2012, 11:39 AM

Hello, theres,
I use combobox to show about 3000 items, the performance is bad. Any idea?
my code default.aspx.cs follows

using System;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

using System.Configuration;

using System.Web.Security;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using Telerik.Web.UI;

public partial class Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

protected void Customer_ItemsRequested(object o, RadComboBoxItemsRequestedEventArgs e)

{

for (int i = 0; i < 3000; i++)

{

Customer.Items.Add(new RadComboBoxItem("item " + i, "1"));

}

my default.aspx follows

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

<Scripts>

<%--Needed for JavaScript IntelliSense in VS2010--%>

<%--For VS2008 replace RadScriptManager with ScriptManager--%>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</Scripts>

</telerik:RadScriptManager>

<script type="text/javascript">

//Put your JavaScript code here.

function LoadCustomer(sender, eventArgs) {

var CustomerCombo = $find("<%=Customer.ClientID%>");

CustomerCombo.clearSelection();

CustomerCombo.requestItems("", false);

}

</script>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" >

</telerik:RadAjaxManager>

<div>

<telerik:RadComboBox ID="SalesList" Runat="server" onclientselectedindexchanging="LoadCustomer">

<Items>

<telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem1" Value="RadComboBoxItem1" />

<telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem2" Value="RadComboBoxItem2" />

</Items>

</telerik:RadComboBox>

<telerik:RadComboBox ID="Customer" runat="server" onitemsrequested="Customer_ItemsRequested" >

</telerik:RadComboBox>

</div>

</form>

</body>

</html>

about 8 seconds for 2999 items in IE 8, but seems ok in Chrome. How to solve the problem ?

Regards,
Agi

8 Answers, 1 is accepted

answered on 19 Apr 2012, 12:24 PM

Hello, Agi.

I would say that what you are seeing it's quite normal. After all, 3000 items would have approximately the following footprint:

25 bytes just for the items,
5 bytes for the base text
1 to 4 bytes for the counter text.

As well as some JSON data.

Multiply by 3000 and you are close more than 100 kb of postback content.

Old browsers, especially IE6, 7 and 8 are notoriously slow with that much content. Also, that content needs to be parsed to HTML elements and all JS things set.

Chrome on the other side is extremely fast and a the 100kb of content will not slow it down that much.

In order to solve this, you could use virtual scrolling and not return the entire set of data. You can read this help article on virtual scrolling to get the general idea -- http://www.telerik.com/help/aspnet-ajax/combobox-load-on-demand-showmoreresultsbox.html.

Regards,
Ivan Zhekov
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.