劍道菜單選擇問題

Question

我有一個Kendo菜單，可以動態啟用或禁用Kendo網格列。 當我從KendoMenu中選擇選項時，選擇會觸發兩次。 我已經在下面創建了演示版本。

演示

$("#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);
    }
}});

選擇菜單項時，請檢查控制台日志。

Answer 1

將復選框添加到菜單項似乎會導致kendo觸發菜單單擊和復選框復選框的事件。 似乎很難區分這兩個實例，因此最好做一些不同的事情來指示檢查。 可以使用以下圖標-可能使用對勾圖標代替實際的復選框：

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

Answer 2

我已經用更新的代碼解決了這個問題

$("#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";
        }
    }
}

}）;