This is a migrated thread and some comments may be shown as answers.

Clicking on option closes list but does not select option

7 Answers 79 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Lee
Top achievements
Rank 1
Iron
Iron
Iron
Lee asked on 08 May 2020, 04:15 AM

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 = {

   age: ["1", "2", "3", "4", "5"],

   name: ["John", "Jenny", "Suzie", "Lee", "Robert"]

};

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;
    });
}

7 Answers, 1 is accepted

Sort by
0
Lee
Top achievements
Rank 1
Iron
Iron
Iron
answered on 08 May 2020, 04:39 AM
Here is a dojo: https://dojo.telerik.com/@dojolee/opOFuHeV
0
Lee
Top achievements
Rank 1
Iron
Iron
Iron
answered on 08 May 2020, 04:39 AM
0
Lee
Top achievements
Rank 1
Iron
Iron
Iron
answered on 08 May 2020, 02:36 PM
I found another issue and updated the Dojo to demonstrate it. When a value is 0 it is replaced by "loading..." in the list. 
0
Petar
Telerik team
answered on 11 May 2020, 03:43 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Lee
Top achievements
Rank 1
Iron
Iron
Iron
answered on 11 May 2020, 03:49 PM

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?

0
Lee
Top achievements
Rank 1
Iron
Iron
Iron
answered on 11 May 2020, 04:46 PM
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.
0
Petar
Telerik team
answered on 13 May 2020, 08:47 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
DropDownList
Asked by
Lee
Top achievements
Rank 1
Iron
Iron
Iron
Answers by
Lee
Top achievements
Rank 1
Iron
Iron
Iron
Petar
Telerik team
Share this question
or