Dynamically creating a Menu issues

3 posts, 1 answers
  1. Tyler
    Tyler avatar
    46 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
    46 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. UI for ASP.NET MVC is VS 2017 Ready
  4. Answer
    Daniel
    Admin
    Daniel avatar
    2117 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