剑道菜单选择问题

Question

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.

Answer 1

Adding the checkbox to the menu item seems to lead to kendo firing the event for the menu click and the checkbox check. It seems hard to differentiate between the two instances, so it might be better to do something different to indicate the check. The following icons can be used - maybe use the tick icon instead of an actual checkbox:

http://demos.telerik.com/kendo-ui/styling/icons

Answer 2

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

});