Clicking on option closes list but does not select option

8 posts, 0 answers
  1. Lee
    Lee avatar
    77 posts
    Member since:
    May 2019

    Posted 07 May Link to this post

    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;
        });
    }
  2. Lee
    Lee avatar
    77 posts
    Member since:
    May 2019

    Posted 07 May in reply to Lee Link to this post

    Here is a dojo: https://dojo.telerik.com/@dojolee/opOFuHeV
  3. Lee
    Lee avatar
    77 posts
    Member since:
    May 2019

    Posted 07 May in reply to Lee Link to this post

  4. Lee
    Lee avatar
    77 posts
    Member since:
    May 2019

    Posted 08 May in reply to Lee Link to this post

    I found another issue and updated the Dojo to demonstrate it. When a value is 0 it is replaced by "loading..." in the list. 
  5. Petar
    Admin
    Petar avatar
    287 posts

    Posted 11 May Link to this post

    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.
  6. Lee
    Lee avatar
    77 posts
    Member since:
    May 2019

    Posted 11 May in reply to Petar Link to this post

    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?

  7. Lee
    Lee avatar
    77 posts
    Member since:
    May 2019

    Posted 11 May Link to this post

    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.
  8. Petar
    Admin
    Petar avatar
    287 posts

    Posted 13 May Link to this post

    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.
Back to Top