Menu item select event

17 posts, 1 answers
  1. troy
    troy avatar
    7 posts
    Member since:
    Nov 2011

    Posted 03 Nov 2011 Link to this post

    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?  
  2. Answer
    Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 03 Nov 2011 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. troy
    troy avatar
    7 posts
    Member since:
    Nov 2011

    Posted 03 Nov 2011 Link to this post

    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. 
  5. Jason Mobley
    Jason Mobley avatar
    6 posts
    Member since:
    Nov 2009

    Posted 24 Feb 2012 Link to this post

    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
  6. Andrew
    Andrew avatar
    9 posts
    Member since:
    Jan 2012

    Posted 24 Feb 2012 Link to this post

    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
            }
    });
     
  7. Jamie
    Jamie avatar
    11 posts
    Member since:
    Apr 2012

    Posted 30 Apr 2012 Link to this post

    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.
  8. Santosh
    Santosh avatar
    5 posts
    Member since:
    Apr 2012

    Posted 04 May 2012 Link to this post

    Steven,

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

  9. Jamie
    Jamie avatar
    11 posts
    Member since:
    Apr 2012

    Posted 04 May 2012 Link to this post

    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.
  10. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 07 May 2012 Link to this post

    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!
  11. Jamie
    Jamie avatar
    11 posts
    Member since:
    Apr 2012

    Posted 07 May 2012 Link to this post

    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! 
  12. Garry
    Garry avatar
    43 posts
    Member since:
    Sep 2012

    Posted 24 Apr 2014 in reply to Kamen Bundev Link to this post

    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.
  13. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 30 Apr 2014 Link to this post

    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!
     
  14. UFIS
    UFIS avatar
    15 posts
    Member since:
    Oct 2013

    Posted 05 Jun 2014 Link to this post

    Hope this link might be help your need.
  15. UFIS
    UFIS avatar
    15 posts
    Member since:
    Oct 2013

    Posted 05 Jun 2014 in reply to UFIS Link to this post

    forgot to paste the link : http://jsfiddle.net/MMRCf/8/light/
  16. Matjaz
    Matjaz avatar
    94 posts
    Member since:
    Jun 2014

    Posted 17 Oct 2014 Link to this post

    You should definitely consider adding some mechanism. Item click event would be the best. Like the toolbar.
  17. Matjaž
    Matjaž avatar
    80 posts
    Member since:
    Jul 2015

    Posted 10 Jun Link to this post

    Anything new?
  18. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1793 posts

    Posted 15 Jun Link to this post

    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.
     
Back to Top
Kendo UI is VS 2017 Ready