Question

In order to add items to a kendo menu dynamically, here in the forums, the kendo team suggested to use the append method as described in this example to append submenus.

I’ve done this, now I have the problem of arrows not rendering for nodes. The issue can be seen in this example: http://jsfiddle.net/MMRCf/16/ if you hover on “Item 1” then click on “Sub Item 2”, “Sub Item 2” will be populated with a submenu. This submenu lacks arrows for expanding nodes.

Perhaps this is a bug that needs reporting but I cannot post on Kendo menu forum.

Does anyone know how I could get arrow icons to render?

I think the append method is where a fix could be applied:

    append: function (item, referenceItem) {
        referenceItem = this.element.find(referenceItem);

        var inserted = this._insert(item, referenceItem, referenceItem.length ? referenceItem.find("> .k-group, .k-animation-container > .k-group") : null);

        each(inserted.items, function (idx) {
            inserted.group.append(this);

            var contents = inserted.contents[idx];
            if (contents) {
                $(this).append(contents);
            }

            updateArrow(this);
        });

        updateArrow(referenceItem);
        updateFirstLast(inserted.group.find(".k-first, .k-last").add(inserted.items));

        return this;
    },

Answer 1

Actually seems the updateArrow function is broken. I’ve updated it for the next release, meanwhile you can also update it to get it working, from this:

item.find(".k-icon").remove();

to this:

item.find("> .k-link > .k-icon").remove();