Kendo UI Dropdownlist slow loading from a large datasource

Question

I'm using Kendo dropdownlist in a template. It loads a list of client names which are used to sign a record. The client name list has 8k entries.

The form loads ok but if I select the dropdownlist to change the client name it takes around 10 seconds for the list to appear. Is there something I can do to speed this up?

My datasource:

 var dsClients = new kendo.data.DataSource({
    transport: {
        read: {
          url: "/data/clients/key",
          dataType: "jsonp"
      },
      parameterMap: function(options, operation) {
          if (operation === "read") {
              return options;
          }
      }
    },
    serverSorting: true,
    sort: [{ field: "text", dir: "asc" }]
});

The element in my template:

 <input name="idclt_clm" data-bind="value:idclt_clm" data-value-field="value" 
   data-text-field="text" data-option-label="Select" data-source="dsClients" 
   data-role="dropdownlist" required validationMessage="Required" />

Does it make sense having a `dropdownlist` with 8k entries? Are your users willing to scroll down 8k entries? Wouldn't be better an `autocomplete`? — OnaBai, Jan 29 '15 at 16:17
@OnaBai is right. DropDown isn't the right widget to use in that case. — DontVoteMeDown, Jan 29 '15 at 16:51

score 4 · Answer 1 · answered May 10 '16 at 13:21

There are 2 options that I know of.

You can add virtualization, which I just found from Kendo.
You can turn of auto-bind and use a search filter that require 2 characters before it triggers a search. Below is how I've done it with asp.net and JS

@(Html.Kendo() .DropDownList() .Name("GridName") .HtmlAttributes(new { @class = "form-control" }) .DataSource(ds => ds.Read(read => read.Action("YourFunction","YourController").Data("filterFunction")) .ServerFiltering(true)) .MinLength(2)//number of characters for a valid search .Delay(250)//milliseconds delay to trigger search .AutoClose(false) .AutoBind(false) .IgnoreCase(true) .DataTextField("Text") .DataValueField("Value") .Placeholder("Enter at least 2 letters to search") .Filter(FilterType.Contains) )

<script> function filterFunction() { return { text: $("#GridName").data("kendoDropDownList").input.val() }; } </script>

If the search is still slow, you can change the number of characters

score 1 · Answer 2 · answered Feb 11 '19 at 14:59

Well, what if you do both? Is maybe not the best aproach, but for me it worked. I have a ComboBox that gets its info from an cascade event, so it would try either way to fill it up. So, after send the request to fill on server-side, I have a client-side event:

.Filter(Contains).MinLength(n).Filtering("Action")

Which will get to server throgh ajax to catch a Session var with the table/list with which you are trying to fill up your CB. Then filtering the desired list and send it back to your CB.

Kendo UI Dropdownlist slow loading from a large datasource

2 Answers2