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

4 posts, 1 answers
  1. Robert
    Robert avatar
    39 posts
    Member since:
    Oct 2012

    Posted 31 Jan 2013 Link to this post

    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.
  2. Answer
    Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 01 Feb 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Robert
    Robert avatar
    39 posts
    Member since:
    Oct 2012

    Posted 01 Feb 2013 Link to this post

    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.
  5. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 04 Feb 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready