[Solved] Get selected item and its parent

[Lucas]

Hello,

I am trying to use the Telerik MVC Menu control to figure out which item I have clicked on. 

Here is the code for my current menu:

@{ Html.Telerik().Menu()
       .Name("Menu")
       .HtmlAttributes(new { @class = "t-toolbar" })
       .ClientEvents(events => events
               //.OnLoad("onLoad")
               .OnSelect("onSelectHighlightOption")
               //.OnOpen("onOpen")
               //.OnClose("onClose")
       )
       .Items(menu =>
       {
           menu.Add()
               .Text("Highlight")
               .Items(item =>
               {
                   item.Add().Text("Bookmarks").Items(child =>{
                                 child.Add().Text("Select");
                                 child.Add().Text("Save");
                                 child.Add().Text("Delete");
                                 child.Add().Text("Copy To");
                   });
                   item.Add().Text("Display Options").Items(child =>{
                                 child.Add().Text("Drill Order");
                                 child.Add().Text("Measures");
                                 child.Add().Text("Components");
                                 child.Add().Text("Table");
                                 child.Add().Text("Graph");
                                 child.Add().Text("Control Chart");
                   });
                   item.Add().Text("Alerts");
                   item.Add().Text("Qualify").Items(child =>
                   {
                       child.Add().Text("Define");
                       child.Add().Text("Show/Clear All");
                   });
               });
           menu.Add()
               .Text("Print");
       })
       .Render();
       }

I have seen the other posts that suggests various things like this:

Get the text:

var item = $(e.item);
   alert(item.find('> .t-link').text());

Get the index of the selected item:

var index = $(e.item).index();

I know that I can use the text to compare the selected item but down the road we might have more than one "Select" sub menus.

I was wondering if there is a way to get the index of the parent element. So for example I have a Bookmarks parent menu and Select sub menu. I would like to know I have selected "Select" sub menu and its from the Bookmarks parent menu.

Is there anyway to do this? Or is there a way I can pre-define an id property for each menu (parent/child)?

[Lucas]

I found one way to specify an HTML "id" tag for each menu item.

menu.Add()
               .Text("Highlight")
               .HtmlAttributes(new { @id = "HighlightMenu" })
You can then use javascript like this to get the id:
var id = $(e.item).attr('id');

if (id == "BookmarkSelect") {
    window.alert("You have selected BookmarkSelect menu item");
}
Is this the correct way to do it or is there a better way?

[Petur Subev]

Hi Lucas,

The solution you provided looks fine. Assigning an unique ID is basically the most appropriate approach in such scenarios when you want to distinct similar items.

Greetings,
Petur Subev
the Telerik team