DropDownList large list Virtualization

[DANIEL]

Hello I have a dropdownlist object that have around 2000 items to load.  But it is really slow to open the dropdown.  My javascript array containing my objects is local and I don't need to fetch it using webservice in the datasource.

I tought I could just virtualize it easily by setting virtual: {itemHeight:26}.  Initially it seemed to work fine but when I update the value in the model it fails an I have the following error : "valueMapper is not provided while the value is being set".

I presume I have to set the valueMapper property to make that work, but the only example I can find is with a remote service.  Here's my attempt but it just fails :

$scope.myComboBoxOptions = {
    valuePrimitive: true,
    filter: "startswith",
    dataTextField: "CodeDevise",
    dataValueField: "CodeDevise",
    dataSource: data,
    virtual: {
        itemHeight: 26,
        valueMapper: function(options) {
            options.success(data);
        }
    }

[Georgi Krustev]

Hello Daniel,

Indeed, the DropDownList virtualization requires implementing the `valueMapper` function:

http://docs.telerik.com/kendo-ui/controls/editors/combobox/virtualization#value-mapping

As the documentation points out, the function should return the index of the selected data item, otherwise the selection would not work. The implementation is not related by any means to the binding type (whether it is local or remote).

Here is a simple demo that demonstrates how to implement the valueMapper function:

http://dojo.telerik.com/@ggkrustev/AHukO

Note that the valueMapper returns directly the value, as it 100% matches the selected index. If it doesn't match index in your case, then you will need to loop the data, find the selected data item by value and return the index.

Of course, if you don't want to scroll to the selected data item, then you can just use different value mapping:

http://docs.telerik.com/kendo-ui/controls/editors/combobox/virtualization#recent-updates

Regards,
Georgi Krustev
Telerik by Progress

[Lee]

This is for a combobox. Is there another example for a dropdownlist? 

[Georgi Denchev]

Hello, Lee,

Here is the same Dojo but with a DropDownList instead:

https://dojo.telerik.com/@gdenchev/eViBoVeb 

I also updated it to the latest version to make sure there are no issues.

Best Regards,

Georgi

[Lee]

Looks like it is still a combo box and angular here. 

[Georgi Denchev]

Hi, Lee,

The Dojo from my previous reply showcases a regular DropDownList(the Combobox consists of an input):

If you're referring to the variable names, I simply haven't changed them because they have no real effect on the end result. The variable is called 'comboboxOptions', but you can easily rename it to 'dropdownOptions'.

Let me know in case I misunderstood.

Best Regards,

Georgi

[Lee]

Thanks that threw me off and that it should be in the angular forum instead of the jquery forum. Im looking for how to do it in Jquery but I think I can interpret it.

[Georgi Denchev]

Hi, Lee,

Here's a Dojo that uses plain jQuery instead of AngularJS:

https://dojo.telerik.com/@gdenchev/OhasUDoC 

Best Regards,

Georgi

[Lee]

Thank you. 

[Matthew]

I modified the source code of the kendo filter to add local virtualization since my list was so long. I added the valueMapper function but when it executes, I'm left with a blank drop down list even though it's scrolled to the correct location. The list will only populate when I scroll it up or down. How do I prevent the list from being blank? My Kendo version is 2023.2.718

Here's the update I made to the filter control:

componentOptions: {
  title: a.options.messages.fields,
  filter: "contains",
  dataTextField: "text",
  dataValueField: "value",
  valuePrimitive: true,
  virtual: {
    itemHeight: 26,
    valueMapper: function (options) {
      console.log(this.dataSource);

      var indices=[];
      for (var i = 0; i < this.dataSource.options.data.length; i++) {
        if(this.dataSource.options.data[i].value === options.value) {
          indices.push(i);
          break;
        }
      }
      
      console.log(options);
      console.log([options.value]);

      options.success(indices);
    }
  },
  height:260,
  dataSource: Object.keys(a._fields || {}).map(function (e) {
    return {
      value: a._fields[e].name,
      text: a._fields[e].label,
    };
  }),
},

Here's the result when I select an option in the drop down list:

And here's after I move the middle mouse

[Georgi Denchev]

Hi, Matthew,

I tried to replicate the problem using a portion of the provided snippet(the valueMapper in particular) but to no avail:

https://dojo.telerik.com/@gdenchev/efOZejus 

Could you help me out and try to reproduce the issue in the Dojo so that I can debug it?

Best Regards,

Georgi

[Matthew]

It is reproduce-able in Microsoft Edge and Chrome but not Fire Fox.

https://dojo.telerik.com/@themattman18/UJEtIPUV/4

Steps to reproduce:

1. Add a line to the kendo filter
2. Search for and select label1000
3. Reopen the drop down list and see that the values are blank
4. Scroll the list to have the values reappear

[Georgi Denchev]

Hi, Matthew,

Thank you for the provided Dojo.

I can't tell exactly what causes the behavior, the items seem to be rendered in the DOM and there are no hidden styles or anything of that sort so tracking it down is a bit tricky.

Nevertheless, a simple solution that you can try is to refresh the list when the popup is opened right after a selection has been made:

                    select: function(e) {
                      let that = this;
                      that.one("open", () => {
                        setTimeout(() => {
                          that.refresh();
                        });
                      });
                    }

Dojo

https://dojo.telerik.com/@gdenchev/aRUcOwEt 

[Matthew]

It looks like this fixed my issue. Thanks for you help!

[DANIEL]

Ok I finally sorted it out.  In the valueMapper I return the index by finding it using a data.indexOf.

Thanks for your help

Dan