Bind large number of data to a combobox?

Question

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 .

Peculiarize

You can find detailed answer here: demos.telerik.com/aspnet-ajax/combobox/examples/loadondemand/… – Subaqueous

@YuriyRozhovetskiy : thanks a lot but i wanna to know when the combobox bind , if i want the combo box bind the data only in specific event to enhance the performance ? – Peculiarize

Answer 1

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.

Backspin

Could u give me a sample code in .net please ?How u treat this control ? – Peculiarize

im not in a position to give an example unfortunately. in .Net you would create a method to load the data needed. You would need to do a small bit of research on paging. Which is simply the idea of taking a large dataset and sending it over in a smaller managable chunks. This data would need to be loaded via javascript/jquery. You would need to create an event that when the person scrolls to the bottom of the list then it loads the next page of data. If someone searches for something then you would need another .net call that returns the search data. – Backspin

I found this with a small google search. It might be useful. telerik.com/community/code-library/aspnet-ajax/combobox/… – Backspin

After coming back to this after a few days, I remember the question that was asked of me when I had to deal with this issue at my work. The question was "How do we expect the end user to scroll through 5000 elements?" (I adjusted the number to fit your problem). We had to reconsider what we were trying to do. The end user will most likely NOT want to scroll through 5000 elements, to find the one or two they are looking for. So with that question in the air you might want to reconsider loading all 5000 but instead coming about this from a different angle. – Backspin

Like a preloaded list with the customers last search results or something. Its a lot more work but more end user centric. Good luck with this. – Backspin

Answer 2

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; }
});

Bastogne

I wanted to add a comment that, the formatItem part is used to in your dropdown, have a formatted string, like colored spans, etc or any sort of CSS/ additional information, but the formatitem is what would be stored into the box. – Bastogne

Answer 3

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.

Markson

Answer 4

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>

Babbling

Answer 5

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

Backlash

Answer 6

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.

Mote