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

Menu item select event

21 Answers 1196 Views
Menu
This is a migrated thread and some comments may be shown as answers.
troy
Top achievements
Rank 1
troy asked on 03 Nov 2011, 02:59 PM
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?  

21 Answers, 1 is accepted

Sort by
0
Accepted
Kamen Bundev
Telerik team
answered on 03 Nov 2011, 03:58 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
troy
Top achievements
Rank 1
answered on 03 Nov 2011, 04:38 PM
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. 
0
Jason Mobley
Top achievements
Rank 1
answered on 24 Feb 2012, 06:23 PM
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
0
Andrew
Top achievements
Rank 1
answered on 24 Feb 2012, 11:19 PM
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
        }
});
 
0
Jamie
Top achievements
Rank 1
answered on 30 Apr 2012, 09:20 AM
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.
0
Santosh
Top achievements
Rank 1
answered on 04 May 2012, 12:41 PM
Steven,

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

0
Jamie
Top achievements
Rank 1
answered on 05 May 2012, 02:12 AM
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.
0
Kamen Bundev
Telerik team
answered on 07 May 2012, 08:49 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jamie
Top achievements
Rank 1
answered on 07 May 2012, 11:32 AM
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! 
0
Garry
Top achievements
Rank 2
Veteran
answered on 24 Apr 2014, 01:55 PM
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.
0
Kamen Bundev
Telerik team
answered on 30 Apr 2014, 06:58 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
UFIS
Top achievements
Rank 1
answered on 05 Jun 2014, 09:58 AM
Hope this link might be help your need.
0
UFIS
Top achievements
Rank 1
answered on 05 Jun 2014, 09:59 AM
forgot to paste the link : http://jsfiddle.net/MMRCf/8/light/
0
Matjaz
Top achievements
Rank 1
answered on 17 Oct 2014, 10:10 AM
You should definitely consider adding some mechanism. Item click event would be the best. Like the toolbar.
0
Edo
Top achievements
Rank 1
answered on 10 Jun 2016, 12:30 PM
Anything new?
0
Konstantin Dikov
Telerik team
answered on 15 Jun 2016, 12:51 PM
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
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
0
Peter
Top achievements
Rank 1
answered on 28 Sep 2018, 07:05 AM

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

0
Joana
Telerik team
answered on 02 Oct 2018, 10:22 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Steven Faulkner
Top achievements
Rank 1
answered on 02 Sep 2020, 01:52 PM

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

0
Dimitar
Telerik team
answered on 07 Sep 2020, 05:59 AM

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:

Regards,
Dimitar
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Steven Faulkner
Top achievements
Rank 1
answered on 08 Sep 2020, 01:52 PM
Thank you Dimitar this is exactly the functionality I was looking for.
Tags
Menu
Asked by
troy
Top achievements
Rank 1
Answers by
Kamen Bundev
Telerik team
troy
Top achievements
Rank 1
Jason Mobley
Top achievements
Rank 1
Andrew
Top achievements
Rank 1
Jamie
Top achievements
Rank 1
Santosh
Top achievements
Rank 1
Garry
Top achievements
Rank 2
Veteran
UFIS
Top achievements
Rank 1
Matjaz
Top achievements
Rank 1
Edo
Top achievements
Rank 1
Konstantin Dikov
Telerik team
Peter
Top achievements
Rank 1
Joana
Telerik team
Steven Faulkner
Top achievements
Rank 1
Dimitar
Telerik team
Share this question
or