This is a migrated thread and some comments may be shown as answers.

Dynamically creating a Menu issues

2 Answers 180 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Ruairi
Top achievements
Rank 1
Ruairi asked on 27 Nov 2014, 10:31 AM
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 Answers, 1 is accepted

Sort by
0
Ruairi
Top achievements
Rank 1
answered on 27 Nov 2014, 11:04 AM
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?

0
Accepted
Daniel
Telerik team
answered on 01 Dec 2014, 08:49 AM
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.

 
Tags
Menu
Asked by
Ruairi
Top achievements
Rank 1
Answers by
Ruairi
Top achievements
Rank 1
Daniel
Telerik team
Share this question
or