javascriptjquerykendo-uikendo-gridkendo-menu

Kendo Menu selection issue


I've a kendo menu to dynamically enable or disable the kendo grid columns. When I select the options from the KendoMenu, the selection is firing twice. I've created the demo version below.

demo

$("#menu").kendoMenu({
dataSource: [{
    text: "Menu",
    items: ds
}],
openOnClick: true,
closeOnClick: false,
open: function () {
    var selector;
    $.each(grid.columns, function () {
        if (this.hidden) {
            selector = "input[data-field='" + this.field + "']";
            $(selector).prop("checked", false);
        }
    });
},
select: function (e) {
    // don't show/hide for menu button --- calling twice
    if ($(e.item).parent().filter("div").length) return;

    console.log("******");

    var input = $(e.item).find("input.check");
    var field = $(input).data("field");
    if ($(input).is(":checked")) {
        grid.showColumn(field);
    } else {
        grid.hideColumn(field);
    }
}});

Check the console log while selecting the menu items.


Solution

  • I've fixed the issue with the updated code

    $("#menu").kendoMenu({
    dataSource: [{
        text: "Menu",
        items: ds
    }],
    openOnClick: true,
    closeOnClick: false,
    open: function () {
        var selector;
        $.each(grid.columns, function () {
            if (this.hidden) {
                selector = "input[data-field='" + this.field + "']";
                $(selector).prop("checked", false);
            }
        });
    },
    select: function (e) {
        // don't show/hide for menu button
        if ($(e.item).parent().filter("div").length) return;
        var removeItemFlag = false;
        var input = $(e.item).find("label");
        var selectedValue = input[0].innerHTML;
    
        if(selectedValue)
        {
            for(var i=0; i< droplist.length; i++){
                if(droplist[i] === selectedValue){
                    removeItemFlag = true
                    input[0].classList.remove = "fa fa-check-square-o";
                    input[0].className = "fa fa-square-o";
                    break;
                }
            }
            var selectedIndex = droplist.indexOf(selectedValue);
            if (selectedIndex > -1 && removeItemFlag) {
                droplist.splice(selectedIndex, 1);
                 grid.hideColumn(selectedValue);
    
            }else{
                droplist.push(selectedValue);
                grid.showColumn(selectedValue);
                input[0].className = "fa fa-check-square-o";
            }
        }
    }
    

    });