menu.insertBefore is inserting after specified element, when using datasource

[Robert]

I'm testing out using the menu datasource attribute for creating my initial menu "scaffolding".  I have one separator with a specific id, which I will insert items before or after (depending on the item type).

When I test this, both items are inserted *after* my separator:

$("#menu").kendoMenu({

    orientation: "vertical",

    dataSource:

    [{

        // Separator with unique id

        text: "<li id='main_separator'/>",

        encoded: false,

        enabled: false,

        cssClass:"menuItemSeparator MultipanelMenuSeparatorStyle",

     },

     {

         enabled: false,

         cssClass: "menuItemSeparator MultipanelMenuSeparatorStyle",

     },

     {

         text: "<input type='text' id='textbox' maxlength='256'/>",

         encoded: false,

         cssClass: "text k-textbox",

     }]

});

 

var viewMenu = $("#menu").data("kendoMenu");

 

viewMenu.insertBefore({text:"Layout1",cssClass:"menuItemLayout MultipanelMenuItemStyle"}, $("#main_separator"));

viewMenu.insertAfter({text:"Preference1",cssClass:"menuItemPref MultipanelMenuItemStyle"}, $("#main_separator"));

I've also included a link to a jsfiddle demonstrating this:  http://jsfiddle.net/raltman/qYtPC/4/
Please take a look and let me know what is wrong here.

Thanks.

[Kamen Bundev]

Hi Robert,

Actually insertBefore works okay. The problem here is that the text property is intended to be rendered inside the item LI element. Since you add another LI element, the browser treat this as a HTML rules violation and render the LI element outside of the item, thus you get two LI elements and insertBefore inserts before the second one but after the actual item :). To avoid this you can easily use a class to identify your separators:


Greetings,
Kamen Bundev
the Telerik team

[Robert]

Thanks.

I would hate to start creating unique classes just to allow distinct jQuery selection; that should be handled by using the id attribute.  It would seem that KendoUI has a glaring omission in that it doesn't allow (or makes difficult/intuitive) adding id attribute to a menu item.

I would suggest (request?) that it sound be possible to create a menuItem using the following:

{

    // Separator with unique id

    text: "My Text",

    id: "unique_menuitem_id",

    cssClass: "...whatever classes you need"

}

Other than unique classes, is there a reasonable way of adding id attributes so that menu items are uniquely selectable?

Thanks.

[Kamen Bundev]

Hi Robert,

I don't see why unique CSS classes are a problem since they are not used anywhere else, but if you prefer to use the ID attribute be sure to add a feature request in the Kendo UI feedback page at UserVoice.

Actually currently there is another way you can add your items dynamically - you can use a string in the append and insert methods. Something like this:
$("#Menu").data("kendoMenu").append("<li id='test1'>Test 1</li><li id='test2'>Test 2<ul>");

All the best,
Kamen Bundev
the Telerik team