CODEWITHSUNDEEP
c#asp.netperformancetelerikradcombobox
Anyname Donotcare
Anyname Donotcare

Reputation: 11403

Bind large number of data to a combobox?

I want to bind list of employees in drop down list , with autocomplete feature so the user can search the proper name .i use RadComboBox

I have two main problems :

1- The list is so large about 5000 item.so binding this large number of data in the browser make it hang or so slow.(performance issue)

According to the Telerik Documentation

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.

so i have to call the following method every time in Page_Init !!!

  protected void BindInnerInstructors()
    {
        ddl_inner_sup.Items.Clear();
        ddl_inner_sup.DataSource = Utilities.GetAllInnerInstructors();
        ddl_inner_sup.DataValueField = "emp_num";
        ddl_inner_sup.DataTextField = "name";
        ddl_inner_sup.DataBind();
    }

2- Object reference not set to an instance of an object when trying to set the selection of a combo box.

i overcome this problem through this.

I have about 4 dropdowlists but every one have to bind in according to an event but i have to bind all of them in the page_init.

I'll be grateful to a detailed answer to this problem .

Upvotes: 12

Views: 6223

Answers (6)

Knasterbax
Knasterbax

Reputation: 8207

Use a VirtualizingStackPanel as ItemsPanel for your RadComboBoxes if there is a large number of items to be displayed. With a VirtualizingStackPanel you can have ten-thousands of items in your RadComboBox.

Use this XAML-Code:

            <!-- WPF ItemsControls like ComboBox, ListBox or Menu use a StackPanel as their internal layout panel. 
                 Use a VirtualizingStackPanel for performance. Else the Combobox will freeze!   -->
            <ItemsPanelTemplate x:Key="itemsPanelTemplate">
                <VirtualizingStackPanel />
            </ItemsPanelTemplate>

            <!-- This style specifies how RadComboBoxes look like -->
            <Style TargetType="telerik:RadComboBox">
                <Setter Property="ItemsPanel" Value="{StaticResource itemsPanelTemplate}"/>
            </Style>

Upvotes: 1

Pranav Singh
Pranav Singh

Reputation: 20111

I also met a similar scenario where very large number of values were bind to dropdownlist. Latest version of chrome, firefox and IE was able to bind that but that too take about minutes, but for older version script hangs & never works.

Instead of using any custom control or telerik rad box, we use simple approach. We take page-size as configurable value(say 50) and page number(default 1) ,number of pages (Total count/ page size) and search criteria(User input for auto-complete) as parameter for service returning value and fetch only records equal to page-size as per input search criteria & page number.

Take a text-box & bind this service call to text-change event of the text box & bind output to autocomplete dropdown.

The logic for paging & search is implemented in stored procedure like Stored Procedure having Sorting, Paging and Filtering

This was easy, fast and pretty much maintainable than any client-side paging, binding etc.

Upvotes: 1

r.mirzojonov
r.mirzojonov

Reputation: 1249

You can do the same thing as google does. When you write something on google, the text that don't same as you've typed will disappear but the same ones will stay there. This will make your searching easier, this is the answer.

Upvotes: 0

Fallenreaper
Fallenreaper

Reputation: 10704

I do not reccomend showing the data set, but instead storing it in a javascript object. You can then do autocomplete with that list of objects. This is done via jquery, using a selector, and then applying an auto complete function with it.

Example:

var systems = [{t:"hi",s:"something"}.{t:"hi",s:"something"},{t:"hi",s:"something"}];
$("#s").autocomplete(systems, 
{
width: 300,
formatItem: function(item) 
{ return item.t + item.s; },
formatResult: function(item) 
{ return item.t; }
});

Upvotes: 1

Umar Sid
Umar Sid

Reputation: 1337

For simplicity u just add the first 15 or 20 names and when user types on the combobox, fill combobox with returned names from database but not all, fill it with just few names only so the browser will not hung...

Upvotes: 0

Kenneth Garza
Kenneth Garza

Reputation: 1916

my company had a similar issue. we ended up using a jquery object called Select2 and we lazy load the list. Basically we load only the first 10 or so at load time, making it fast to load, and if the user scrolls down past the first 10 we load the next 10 and so on. Select2 has a search feature which hits the server to return a custom list based on the search.

the problem with loading 5000 elements all at once is that the browser will take forever to load them, iterate through them, and manipulate them as needed. I am not saying "you must use select2" RadComboBox may have something like this you can use.

Good luck.

Upvotes: 9

Related Questions