Dynamically creating a Menu issues

3 posts, 1 answers
  1. Tyler
    Tyler avatar
    64 posts
    Member since:
    Nov 2013

    Posted 27 Nov 2014 Link to this post

    I have a Kendo UI MVC Menu which I created dynamically using code from this link - my code is below.
    When I select a menu option I want to call an Ajax request to load some report details on the page. Note in my code I have menuItemOption1 and menuItemOption2 (this one is commented out) I have two queries:

    1. Using menuItemOption1 which sets the Action i.e. .Action("GetReports", "Reports",new {Oid=child.Oid}); I want to be able to retrieve this Action Url in the 'reportSelectChanged' javascript function to use in the Ajax request - how do I get the generated Action url in the javascript function I can get the menu item text using javascript below:


    But how do I access the action url parameter?

    2. In menuItemOption2 I was trying to dynamically add a html data attribute i.e. data-reportoid - then in my javascript function I'd like to access this data attribute. The Kendo UI MVC MenuBuolder is fine with the first parameter - so code below works fine:

    var menuItemOption2 = menuItems.Add().Text(child.Text).HtmlAttributes(new {@id=child.Oid.ToString()});

    However when I add the second data attribute I get the compiler error below when the browser tries to render the razor page. Is it possible to set the data attribute dynamically and if it is how do I get it i the javscript function.

    Compiler Error Message: CS0746: Invalid anonymous type member declarator. Anonymous type members must  be declared with a member assignment, simple name or member access.

    @model IList<ModelMenuItem>
        public void addCategoryChildren(MenuItemBuilder builder, string parentCategory, IList<ModelMenuItem> items)
            var children = items.Where(m => m.Category == parentCategory);
            if (children != null)
                builder.Items(menuItems =>
                    foreach (var child in children)
                        var menuItemOption1 = menuItems.Add().Text(child.Text).Action("GetReports", "Reports",new {Oid=child.Oid});
                        //var menuItemOption2 = menuItems.Add().Text(child.Text).HtmlAttributes(new {@id=child.Oid.ToString(), data-reportoid=child.Oid.ToString()});
        var categories = Model.Select(x => x.Category).Distinct().ToList();
    <div id="workflowToolbar">
            .Items(topMenu =>
                foreach (var cat in categories)
                    var builder= topMenu.Add().Text(cat.ToString());
                    addCategoryChildren(builder, cat.ToString(), Model);

  2. Tyler
    Tyler avatar
    64 posts
    Member since:
    Nov 2013

    Posted 27 Nov 2014 in reply to Tyler Link to this post

    Post Update:
    My first question related to getting the Action URL - I've figured out how to get the action url in the javascript. And yes it was pretty obvious = sorry folks. Code below:

    var url = $(e.item).children(".k-link").attr("href");

    Any ideas on my second query?

  3. Answer
    Daniel avatar
    2231 posts

    Posted 01 Dec 2014 Link to this post


    You should use underscore:
    .HtmlAttributes(new { @id=child.Oid.ToString(), data_reportoid = child.Oid.ToString() })
    instead of dash when using an anonymous object. It will automatically be converted. The alternative is to pass a dictionary instead of anonymous object.


    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Back to Top