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

    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
  2. Dimo
    Admin
    Dimo avatar
    8333 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.

    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
     
    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
Back to Top