0

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: enter image description here

Regards,

Scott

user2109254
  • 1,709
  • 2
  • 30
  • 49

2 Answers2

0

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/

OnaBai
  • 40,767
  • 6
  • 96
  • 125
  • Thanks for responding mate. See pic I added to the question to demonstrate the nav I have created (that used to work). Basically there are a lot of menu items, and a number of top level navs that unfold like this... it makes finding things easier than dealing with cascading menus. You guys do the same thing on the kendo site (click on products): http://www.telerik.com/kendo-ui but it looks like your not using the kendo menu on the kendo site... – user2109254 May 20 '14 at 11:05
  • FYI, this issue was acknowledged as a bug and resolved by Telerik support. – user2109254 May 24 '14 at 00:08
  • @user2109254 just about ___You guys__ do the same thing on the kendo site_ just to let you know that I have nothing to do neither with Telerik nor with Kendo UI. I do this for fun and for helping others. – OnaBai May 24 '14 at 11:07
  • Ok fair enough... I appreciate your support mate ;-) – user2109254 May 27 '14 at 11:21
0

That was a bug - and here is the fix.

Bundyo
  • 2,195
  • 13
  • 13