Dynamically creating a Menu issues

3 posts, 1 answers
  1. Tyler
    Tyler avatar
    48 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:

    $(e.item).children(".k-link").text();

    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>
    @functions
    {
        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">
        @(Html.Kendo().Menu()
            .Name("mnuReports")
            .Items(topMenu =>
            {
                foreach (var cat in categories)
                {
                    var builder= topMenu.Add().Text(cat.ToString());
                    addCategoryChildren(builder, cat.ToString(), Model);
                }
            })
            .Events(e=>e.Select("reportSelectChanged"))
            )
    </div>









  2. Tyler
    Tyler avatar
    48 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
    Admin
    Daniel avatar
    2134 posts

    Posted 01 Dec 2014 Link to this post

    Hello,

    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.

    Regards,
    Daniel
    Telerik
     

    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