Menu item select event

[troy]

Hey, I read in the docs about the event 'select' when using the menu.  Does the fire whenever a menu item is clicked? If so, how do you handle that event?  

[Kamen Bundev]

Hi Troy,

You can attach an event handler to Menu select event like this:
$("#Menu").kendoMenu({ select: function (e) {
    console.log(e.item);
} });

You also get the menu item in the event argument.

All the best,
Kamen Bundev
the Telerik team

[troy]

Thanks so much Kamen.

I'm hooked on this now! and I'm gonna promote it everywhere I can.  A great utility with great support. 

[Jason Mobley]

I understand how to get the select event to fire, but how do I know which item raised the event?

$(document).ready(function () {
        $('#appMenu').kendoMenu({
            orientation: "vertical",
            dataSource: [
               {
                   text: "My Plans",
                   value: 'Plan/Index'
               },
               {
                   text: "My Focus",
                   value: 'Focus/Index'
               },
               {
                   text: "Administration",
                   value: 'Administration/Index'
               },
               {
                   text: "Help & Support",
                   value: 'Support/Index'
               }
              ],
              select: OnMenuItemClick
        });
    });
 
    function OnMenuItemClick(e) {
        debugger;
    }

When I run this and break in the debugger, e.item is an HTMLLIElement (<LI>) tag. The tag has no name, no index, no id, or any kind of unique identifier that I could use in my javascript to do specific work. In the example above, you can see I tried to set the "value" property of the LI tag, but I also tried id, and name to no avail. I also don't want to use url because I'm not trying to navigate. As-is the select seems useless because you can't find out which item it is unless I build the LI list by hand and specify the ids. Is there any way to load from JSON and get an identifier on the item so that I know which one was clicked? I was hoping that the JSON object would be passed in on the item so I could have any custom attributes I wanted, but it doesn't appear to be, at least the debugger doesn't show it if it does. Do you have any recommendations on what I might do to solve this problem?

Thanks

[Andrew]

I have the same problem with menu items added to an exisiting menu using append.

The original items all have ids (they were created static so I could add id= to the <li> item). But the newly added dynamic items have no identifier or anything on the click event. How can you tell what was selected or how can you add a unique id on the append method?

var mainmenu = $("#mainmenu").data("kendoMenu");

for (i=0;i<perspectives.length;i++) {
      mainmenu.append({
           text: perspectives[i].shorttext
      }, getMenuItem("2.0",mainmenu));
}

where can I add a unique identifier that appears on the select event...

$("#mainmenu").kendoMenu({
        select: function(e) {
        var menuid = e.item.id;   // works fine for static items with a hardcoded 'id=
                                               // blank for dynamically appended items
        }
});
 

[Jamie]

This seems to be a recurring theme with KendoUI.  I too need a way to use append and add a unique identifier so that I can can use that when handling a click event.

[Santosh]

Steven,

$(e.item).text() will give you the text of selected item.

[Jamie]

Umm, that's nice.  But in my case the text would be something like 'users', which is the name of a database table.  Having a hidden ID would actually allow me to identify which table, in which schema, in which database on which server.  Otherwise it's just a meaningless word.

[Kamen Bundev]

Hello Jamie,

We'll consider this enhancement, please add your vote in Kendo Feedback page on UserVoice. Meanwhile, you can add items with encoded: false property and pass HTML in the text property - this way you can render an additional wrapper for the text and set your ID there:
menu.append({
    text: '<span id="t22">Test</span>',
    encoded: false
});

Alternatively you can pass HTML to append, instead of a JSON object, like this:
menu.append('<li id="t22" class="k-item">Test</li>');

Greetings,
Kamen Bundev
the Telerik team

[Jamie]

I was not aware of the append with HTML.  That's a handy 'catch all' feature. That should be a solid work-around for my situation. Thanks! 

[Garry]

Really?
So there is no way to add 'data' to a menu item? I do not want the text of the menu item as it is drawn dynamically.
For instance my data might be a string, or a database key value.
I want to pick that up in my menu selected event handler:

$("#menu-CMS").kendoMenu({
 dataSource: [

  {
   text: "File", imageUrl: "/images/TriSys/16x16/Folder Open File.ico",
 data: [ { ID: "Test" } ] }
  }...

 select: function(e)
  {
   var sSelectedText = $(e.item).children(".k-link").text(); // Yes - this works
   var sCustomFlag = e.item.data.ID; // DOES NOT WORK
...

Can you provide an example of how to do this pretty basic operation?

Kind Regards, Garry.

[Kamen Bundev]

Hello Garry,

No, currently you can't pass data through the JSON object directly, that will end up attached to the item. However, you can use the aforementioned HTML workaround instead, like this:
menu.append('<li data-something="thing">Test</li>');

You can also pass multiple items as HTML.

Let me know if this helps.

Regards,
Kamen Bundev
Telerik

 

 

[UFIS]

Hope this link might be help your need.

[UFIS]

forgot to paste the link : http://jsfiddle.net/MMRCf/8/light/

[Matjaz]

You should definitely consider adding some mechanism. Item click event would be the best. Like the toolbar.

[Seyfor]

Anything new?

[Konstantin Dikov]

Hello Matjaž,

There is still no such built-in functionality for the Menu widget that will handle the menu items like dataItems. Nevertheless, besides the suggested approach you could handle the "select" event, retrieve the text of the element and find the corresponding item in the data source of the widget: 

$("menu").data("kendoMenu").options.dataSource

Once you find the item you can retrieve the values from the custom properties.


Best Regards,
Konstantin Dikov
Telerik

 

 

[Peter]

Unfortunately, this widget is totally useless to me without being able to extract the data item out.

A little difficult for me to understand why you would even create it without this.

In my dataItem is the URL to be followed when the menu item is clicked on.

The text on the menu is absolutely useless - as it may not even be unique

And the work to get around this is enough to completely give up on it

[Joana]

Hello Peter,

Thank you for your feedback.

I have prepared a small dojo sample how you could find the corresponding dataItem of the selected menu item:

https://dojo.telerik.com/IJUdivUb

I agree with you that having the dataItem on selection of an item will facilitate the usage of menu. The following feature request will handle the proper retrieving of dataItem once it gets prioritized and planned for a release:

http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-feedback/suggestions/4136745-populate-a-menu-from-a-datasource

You could vote, so that based on the demand the request will become with higher priority in our backlog with tasks.

Regards,
Joana
Progress Telerik

[Steven Faulkner]

Thank you for the example on how to find the dataSource item from the select event but that will fail if you have multiple menu items with the same name. 

The link to the feedback issue says it was completed in May of 2019 and that you can now bind Menu to datasources which is great. However it still seems to have the same problem where you cannot retrieve the dataitem from the selected Menu item. This is accomplished in the TreeView by using the dataItem() method but there is no such method for Menu. 

Is there still no way to get the full JSON object from the datasource on the select event?

Thanks

[Dimitar]

Hello Steven Faulkner,

The DataSource allows to retrieve the item through its unique id via the getByUid() method as follows:

$("#menu").kendoMenu({
  ...                    
  select: function(ev) {
    var ds = ev.sender.dataSource;
    var item = ds.getByUid($(ev.item).data("uid"));

    console.log(item);
  }
});

Here is a simple example that demonstrates the above:

• https://dojo.telerik.com/ibuLuhES/2

Regards,
Dimitar
Progress Telerik

[Steven Faulkner]

Thank you Dimitar this is exactly the functionality I was looking for.