Virtualize a Kendo Dropdownlist with local datasource array of strings

[Lee]

I have a local array of between 2  and 2000+ strings that I would like to virtualize. For some reason, when I add the valueMapper to the virtual function when there are only 4 items in the array, it causes the user to not be able to click on anything.

 

Here is a dojo showing what I tried. You can click on a letter and nothing will happen.

https://dojo.telerik.com/oojEQyxf

[Neli]

Hi Lee,

In order for the virtualization to work as expected, you will need to have dataSource.schema configured. I would suggest you review the following Knowledge Base article where Client Side virtualization in the DropDownList is demonstrated:

- https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/dropdownlist-client-side-virtualization

I hope this helps.

Regards,

Neli

[Lee]

It does not. That article is about virtualizing a local data source. Im going a step more specific and saying I want to virtualize a local data source that is an array of strings, not an array of objects. An array of strings works fine for a dropdown list that is not virtualized but as soon as the value mapper is introduced, it breaks. I provided a Dojo demonstrating.

[Neli]

Hi Lee,

Thank you for highlighting the specific scenario with a local array of strings and DropDownList virtualization.

The DropDownList virtualization feature requires the data source to be an array of objects, not an array of strings. When virtualization and valueMapper are used, the widget relies on both dataValueField and dataTextField to map and display items correctly. With a simple array of strings, these fields are missing, which could lead to different issues, such as the reported.

To resolve the issue, you need to transform your array of strings into an array of objects, so each item includes both a value and a text property. Here’s a concise example:

// Original array of strings
var stringArray = ["A", "B", "C", "D"];

// Transform to an array of objects
var objectArray = stringArray.map(function(item) {
    return { value: item, text: item };
});

// Initialize DropDownList with virtualization
$("#dropdownlist").kendoDropDownList({
    dataSource: {
        data: objectArray,
        pageSize: 20
    },
    dataTextField: "text",
    dataValueField: "value",
    virtual: {
        itemHeight: 26,
        valueMapper: function(options) {
            // Find the index of the value in the array
            var index = stringArray.indexOf(options.value);
            options.success(index);
        }
    }
});

I hope this helps. 

Regards,
Neli
Progress Telerik