KendoUI Menu link in panel not working when openOnClick is true and closeOnClick is false

Question

After much testing I have found that my menu no longer works due to what appears to be a bug in the kendo ui menu component. This used to work, and it no longer does. As we are still in the early phases of the project we are not using nav that much so I don't know when it stopped working.

I have created very simple a fiddle that demonstrates the issue. Basically there are two navs next to each other, one works and the other doesn't. The only difference being, that the one that doesn't work has openOnClick: true and closeOnClick: false.

NOTE: I had to set it to open the link in a new window in the fiddle as jsfiddle wouldn't let google load in the iframe, so allow popups.

Fiddle: http://jsfiddle.net/codeowl/HLaRx/4/

HTML:

<div style="padding:20px">
    <table style="width:500px">
        <tr>
            <td>Nav 1 Active Links DON'T Work:</td>
            <td>Nav 2 Active Links DO Work</td>
        </tr>
        <tr>
            <td><ul id="nav1" /></td>
            <td><ul id="nav2" /></td>
        </tr>
    </table>
</div>

JavaScript:

$(document).ready(function() {
    var oNav1 = null,
        oNav2 = null,
        oNavData = [{
            "text": "Administration",
            "encoded": true,
            "content": "<div class=\"ma-hpm-dropPanel\"><table><tr><td><div class=\"ma-hpm-cellPadding\"><span class=\"ma-hpm-menuPanelGroupHeader\">Application Administration</span><ul><li><span class='ma-hpm-dissabledPanelLink'>Dissabled Link</span></li><li><a target='_blank' class='ma-hpm-panelLink' href='http://www.google.com.au'>Active Link</a></li></ul></div></td></tr></table></div>"
        }];

    oNav2 = $('#nav1').kendoMenu({
        openOnClick: true,
        closeOnClick: false
    }).data('kendoMenu');

    oNav1 = $('#nav2').kendoMenu().data('kendoMenu');

    oNav1.append(oNavData);
    oNav2.append(oNavData);
});

Please help me to resolve this issue.

Here is an example of the nav panel I am trying to create:

Regards,

Scott

Answer 1

That was a bug - and here is the fix.

Answer 2

Not sure when it stopped working but I would say that current behavior is pretty understandable (despite maybe not what you would like).

Menus expect that what you have inside is a menu option, not a full HTML. So, when you set openOnClick to true (in opposition to default that is mouse over) what Kendo UI has to do is intercept the click event on any HTML element on that menu. As consequence, you have that it does not open the URL as you expected.

So, my question, why do you need to define it as you are doing? Would be possible something like this instead?:

<ul id="nav1">
    <li>
        Administration
        <ul>
            <div>
                <span class="ma-hpm-menuPanelGroupHeader">Application Administration</span>
            </div>
            <li disabled="disabled">Disabled Link</li>
            <li><a target='_blank' class='ma-hpm-panelLink' href='http://www.google.com.au'>Active Link</a></li>
        </ul>
    </li>
</ul>

Example here: http://jsfiddle.net/OnaBai/HLaRx/6/