Clicking on option closes list but does not select option

[Lee]

I have a kendoDropdownList that has virtualization. The list is created from a flat array such as ["a", "b", "c", "d"]. When I click on a value the list closes but it is not selected. Can you help? Here is my code. 

var attributeValues = {
createDropdownLists("name", "#myList");
var shouldPreventOpen = [];
var menuIsOpen = [];

function createDropdownLists(key, selector) {
    shouldPreventOpen = [];
    let values = attributeValues[key];

    if (values.length < 1) {
        $(selector).prop("disabled", true);
    } else {
        $(selector).prop("disabled", false);
    }
    $.each($(selector), function (index, element) {
        let value = $(element).val();
        let valueIndex = values.findIndex((element) => element.toString() === value);

        $(element).kendoDropDownList({
            height: 300,
            optionLabel: "Select Value",
            filter: "contains",
            //filterFields: ["itemName", "itemID"],
            template: "<div title='#: data #'><span class='listItemName' >#: data #</span></div>",
            //valueTemplate: "#: data #",
            virtual: {
                itemHeight: 44,
                valueMapper: function (options) {
                    console.log(options, valueIndex);
                    options.success([!isNaN(valueIndex) ? valueIndex : -1]);
                }
            },
            dataSource: values,
            value: value,
            open: onOpen,
            close: onClose
        });
        let id = $(element).attr("id");
        shouldPreventOpen[id] = false;
        menuIsOpen[id] = false;

        let list = $(element).getKendoDropDownList();
        list.wrapper.on("focus", function (e) {
            let id = $(e.currentTarget).find(".js-k-item-dropdown").attr("id");
            if (shouldPreventOpen[id] && menuIsOpen[id]) {
                list.close();
                shouldPreventOpen[id] = false;
            } else {
                list.open();
            }
        });
    });
    $(".k-list-container").on("click", ".k-list-optionlabel, li", function (e) {
        let clickedId = $(e.currentTarget).closest(".k-list-container").attr("id");
        clickedId = clickedId.substring(0, clickedId.indexOf("-"));
        let list = $(`#${clickedId}`).getKendoDropDownList();
        list.close();
    });
}

function onOpen(e) {
    let id = $(e.sender.element).attr("id");
    if (shouldPreventOpen[id] && menuIsOpen[id]) {
        shouldPreventOpen[id] = false;
        e.preventDefault();
    } else {
        shouldPreventOpen[id] = true;
        menuIsOpen[id] = true;
    }
}

function onClose(e) {
    let id = $(e.sender.element).attr("id");
    if (shouldPreventOpen[id] && menuIsOpen[id]) {
        e.preventDefault();
    }
    menuIsOpen[id] = false;
    $.each(shouldPreventOpen, function (element, index) {
        shouldPreventOpen[index] = false;
    });
}

[Lee]

Here is a dojo: https://dojo.telerik.com/@dojolee/opOFuHeV

[Lee]

Sample Dojo Code

[Lee]

I found another issue and updated the Dojo to demonstrate it. When a value is 0 it is replaced by "loading..." in the list. 

[Petar]

Hi Lee,

To have a correctly working DropDownList with virtualization, there are some requirements that have to be met for the component. Also, the returned from the valueMapper data should be in the appropriate format. 

All these requirements and a demo project can be found on this Virtualization article. If the DropDownList is implemented as described in the linked article, you should not have any issues with the selection of the items in the popup. You can follow the described instructions and thus implement the targeted DropDownList with virtualization functionality.

Regards,
Petar
Progress Telerik

[Lee]

I've looked at that article and I must be missing something. Looking at my dojo are you able to tell me what I'm doing wrong?

[Lee]

I solved the issue. It looks like virtualization does not work properly when using a flat array rather than an array of objects. No errors were thrown but it didn't work. I suggest Telerik modify their code by adding a console error when the data source is a flat array or make it clear that an array of objects is required.

[Petar]

Hi Lee,

I am happy to hear that you've managed to resolve the issue! Thank you for the provided suggestion about the JavaScript error. I will address it to the team.

Regards,
Petar
Progress Telerik