Combobox with 100000 records unusable

[Sergi]

I have a combobox with over 100000 records, but it's unusable, it makes the browser very slow and unresponsive.

I'm using it like this:

@(Html.Kendo().ComboBox()
    .Name("ID_Poblacion")
    .DataValueField("Item1")
    .DataTextField("Item2")
    .DataSource(dataSource => dataSource // Configure the grid data source
        .Read(read => read.Action("Items", "Poblacion", new { Area = "DataAPI" }))
    )
    .Value(Model.ID_Poblacion.ToString())
)

I've also tried setting Autobind(false), but when I try to open the combobox it becomes unusable.

I've tried limiting the number of records returned, but once it's databoud, it seems it won't call the server method again no matter what I type in the box.

Any help on how to make the combobox usable with huge number of records?

[Dimo]

Hello Sergi,

A collection of 100,000 datasource items on the client and corresponding 100,000 DOM elements on the page will have severe impact on performance no matter the implementation. Don't forget about the bandwidth and time that will be required to transfer such an amount of data.

Moreover, a dropdown with 100,000 items is practically unusable for people, who will have difficulties scrolling and reviewing it. That's why I suggest you to use a ComboBox or an AutoComplete with server-side filtering. Users will type part of the desired value and then will select an item from a lot smaller list.

Regards,
Dimo
Telerik

[Sergi]

I tried :

@(Html.Kendo().ComboBox()
            .Name("ID_Poblacion")
            .DataValueField("Item1")
            .DataTextField("Item2")
            .DataSource(dataSource => dataSource // Configure the grid data source
                .Read(read => read.Action("ItemsForProvincia", "Poblacion", new { Area = "DataAPI" }).Data("poblacionParams")).ServerFiltering(true)
            )
            .Value(Model.ID_Poblacion.ToString())

But the server method only gets called the first time, when I type into the combobox the datasource won't get refreshed, so I can't filter serverside.

How can I get server filtering to work?

PS: I'm using Jquery 2.0, MVC4 with razor syntax and Kendo 2013.1.514

[Dimo]

Hi Sergi,

Here is our server filtering demo, which works as expected, please compare with your implementation

@(Html.Kendo().ComboBox()
      .Name("products")
      .DataTextField("ProductName")
      .DataValueField("ProductID")
      .HtmlAttributes(new { style = "width:250px" })
      .Filter("contains")
      .AutoBind(false)
      .MinLength(3)
      .DataSource(source => {
          source.Read(read =>
          {
              read.Action("GetProducts", "Home");
          })
          .ServerFiltering(true);
      })
)

If you still cannot achieve the desired behavior, please send a runnable demo.
Regards,
Dimo
Telerik

[Sergi]

Adding .Filter("contains") works, which is weird in my opinion, since it's using server filtering the server will taker care of how to filter, so the .Filter is useless in this case.

I think that if serverfiltering is true, the .Filter shouldn't be needed.

Thanks.