Dynamically Add menu item with HtmlAttributes

2 posts, 0 answers
  1. Mark
    Mark avatar
    1 posts
    Member since:
    Aug 2013

    Posted 15 Feb 2015 Link to this post


    I have a Kendo menu that renders on Page Load:

            .Items(items =>
                        .ImageHtmlAttributes( new { width = 20, height = 20 })
                        .HtmlAttributes(new { id = "topWidgetMenuItem" })
                .Items(children =>
                    foreach (DashboardWidget widget in Model.AvailableWidgets)
                                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
    // 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", "");
        text: widgetTitle,
        id: "addWidget" + noPrefixWidgetId,
        widgetid: noPrefixWidgetId,
        widgetRequestUrl: addWidgetRequestUrl

    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>

  2. Dimo
    Dimo avatar
    8319 posts

    Posted 17 Feb 2015 Link to this post

    Hi Mark,

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


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

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top