Dynamically creating a Menu issues

[Ruairi]

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>

[Ruairi]

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?

[Daniel]

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