Kendo Menu selection issue

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.

snow_FFFFFF · Answer 1 · 2015-11-20T14:36:29.847

0

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

edited Nov 20 '15 at 14:36

answered Nov 17 '15 at 14:55

snow_FFFFFF

3,235
17
29

I've tried with openOnClick = false. Still it triggers twice when I select the menu item. You can check out the jsfiddler version. – Premkumar Jayaseelan Nov 18 '15 at 10:01
Thanks for providing the demo (not sure if you had that before, but I hadn't noticed it). If I comment out the "open" event, it only fires once and seems to provide the same functionality. It seems that setting the checked property in the open event is causing the select event to fire. What is the purpose of the open event code? Like I said, removing it doesn't seem to change the behavior. – snow_FFFFFF Nov 18 '15 at 13:39
Even after removing the "open" event, On click on the menu item the event got fired twice. On mouse over we get pointer cursor there its triggering twice, towards right end hand cursor will come it triggers once but no action on check box. – Premkumar Jayaseelan Nov 20 '15 at 04:01
Interesting. I was just clicking the checkbox (not the full menu item). If you do this, it only fires once. But, you are right, click the full menu item fires it twice. I'll play with it and see if there is a way to prevent that. – snow_FFFFFF Nov 20 '15 at 14:02
Sorry I missed your point originally. After playing with it a little more, it seems to be cause by adding the checkbox into the menu html. Kendo must wire-up the event to both the menu and the checkbox. If you just change the menu to the column name text (without the checkbox), it will fire just once. I'm going to update my answer with a different strategy. – snow_FFFFFF Nov 20 '15 at 14:33
Thank you for the suggestion. Let me try out! – Premkumar Jayaseelan Nov 23 '15 at 10:35

score 0 · Accepted Answer · answered Nov 23 '15 at 10:41

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

});

Kendo Menu selection issue

2 Answers2