Question

Using the Telerik Asp.net MVC menu control, I’m trying to get an id on the ul’s in sub menus. I’ve tried putting the HtmlAttributes(new { @id=”myId” }) call in a few places but can’t seem to figure out where to put it to get the id on the .

In the code snippet below, I’ve shown the two places I’ve tried calling the HtmlAttributes method. The comment after the call explains where the Telerik control is actually putting the id.

@(Html.Telerik().Menu()
    .Name("mainMenu")
    .Items(menu =>
    {
        menu.Add()
            .Text("Tools")
            .Items(item =>
            {
                item.Add().Text("Add To Toolbox").HtmlAttributes(new {@id="toolsMenu"}); @* this puts the id on the "Add To Toolbox" <li>*@
                item.Add().Text("Toolbox");
            }).HtmlAttributes(new {@id="toolsMenu"}); @* this puts the id on the "Tools" <li>*@
        menu.Add()
            .Text("Setup")
            .Items(item =>
            {
                item.Add().Text("Print Header");
                item.Add().Text("MenuLabelAccountInformation");
            });
 }).OpenOnClick(true))

Is there a way to get an ID on the <ul> with this control?

Answer 1

You can’t set the id attribute of the UL from server side code. You could use jQuery to do that by hooking up the menu’s OnLoad client-side event:

<script type="text/javascript">
  function onLoad() {
     var id = 0;
     $(this).find("ul").each( function() {
        this.id = "ul_" + id;
        id ++;
     });
  }
</script>