Dynamically Add menu item with HtmlAttributes

[Mark]

Hi,

I have a Kendo menu that renders on Page Load:

@(Html.Kendo().Menu()
        .Name("AddWidgetMenu")
        .Orientation(MenuOrientation.Horizontal)
        .Items(items =>
        {
            items.Add().Text("Add")
                    .ImageUrl("~/Content/Images/plus.png")
                    .ImageHtmlAttributes( new { width = 20, height = 20 })
                    .HtmlAttributes(new { id = "topWidgetMenuItem" })
            .Items(children =>
            {
                foreach (DashboardWidget widget in Model.AvailableWidgets)
                {
                    children.Add()
                        .Text(widget.Title)
                        .HtmlAttributes(new
                        {
                            widgetid = widget.WidgetId,
                            id = "addWidget" + widget.WidgetId,
                            widgetRequestUrl = Url.Action("_WidgetAdd", "Home", new { widgetId = widget.WidgetId })
                        });
                }
            });
        })
    )

I need to dynamically add new menu links to the menu list which I am able to do, but I cannot figure out how to also include HtmlAttributes so that the menu links work properly.  Please advise:

/*Add widget to menu*/
//initialize the menu widget
$("#AddWidgetMenu").kendoMenu()
// get a reference to the menu widget
var menu = $("#AddWidgetMenu").data("kendoMenu");
var addWidgetRequestUrl = $(contentElement).attr('data-addwidgetrequesturl');
var widgetTitle = $(contentElement).attr('data-title');
var noPrefixWidgetId = widgetId.replace("widget", "");

menu.append({
    text: widgetTitle,
    id: "addWidget" + noPrefixWidgetId,
    widgetid: noPrefixWidgetId,
    widgetRequestUrl: addWidgetRequestUrl
    },
    $("#topWidgetMenuItem")
);

The new menu link is added but the HtmlAttributes are being ignored.

<li id="addWidgetUpcomingEvents" class="k-item k-state-default" widgetid="UpcomingEvents" widgetrequesturl="/AppPortal/Home/_WidgetAdd?widgetId=UpcomingEvents" role="menuitem">
<li class="k-item k-state-default k-last" role="menuitem">
<span class="k-link">Recent Sales3</span>
</li>
</ul>
</div>

Thanks,
Mark

[Dimo]

Hi Mark,

The Menu does not accept custom HTML attributes when appending new items client-side.

http://docs.telerik.com/kendo-ui/api/javascript/ui/menu#methods-append

You can obtain the new DOM nodes (Menu items) after executing append() and apply the desired attributes manually.

Regards,
Dimo
Telerik