jqxmenu basics – action handler

[gdcreationMember]

Hi guys,

I’ve found out about jqwidgets only today and it is really looking promising to me. Actually, it seems to do a lot of stuff I lost a lot of time trying to do it right by myself!

I am with a very basic question about the jqxmenu component. It is not clear for me in the documentation. I know I sometimes can’t see the answer under my nose, so you can just point me to the correct place in the doc with the answer!

My question is with the way the actions for each clicked item are handled. I know that I can add an event for each item clicked using code similar to this:

	$("#myMenu").bind('itemclick', function (event) {
			// Do something
	});

However, it is not very clear the best way to identify what item was clicked and how to manage all possible actions with a big list of menu items.

I had to create multiple context menus in one page because I have a tree with different node types and each type has a different context menu. I know I could get from the event object the inner html or something similar and create a big if-elseif-else code in the bind of each one of the menus testing the string value, but that doesn’t look very neat. Also, I realized I could bind the click
event to the ‘li’ node, but that would bypass the jqxmenu events and the menu won’t close after click.

It would be nice if we could do something like adding an identifier to the menu item and then accessing it directly for the actions. Something like:

<div id='myMenu'>
	<ul>
		<li><a href="#rename">Rename this node</a></li>
		<li><a href="#create">Create another one</a></li>
		<li><a href="#delete">Delete forever</a></li>
	</ul>
</div>
(...) 

$("#myMenu).jqxMenu(
     "setAction",
     "rename",
      function(element){ 
          alert('this is the action to rename, for element '+element.id); 
      });

Is there a better (and nicer) way of doing it that in jqxmenu? Am I missing some basic concept in the component (I would bet on this one!)?

Any ideas are well appreciated.

Thanks!

[Peter StoevKeymaster]

Hi gdcreation,

Thank you for writing.

The ‘itemclick’ event is triggered when the user clicks an item. The event also passes the clicked menuitem LI element.

Here is how to get the clicked ‘LI’ element and its text.

$('#jqxMenu').bind('itemclick', function (event) {
    var LI_element = event.args;
    var menuitemText = $(args).text();
    switch (menuitemText) {
        case "Home":
            alert("'Home' clicked");
            break;
        case "Solutions":
            alert("'Solutions' clicked");
            break;
        case "Financial services":
            alert("'Financial services' clicked");
            break;
    }
});

The idea about “setAction” function is interesting and we will consider it. In addition, thank you about the feedback regarding the documentation of the ‘itemclick’ event. We appreciate it!

Please feel free to contact us, if you have additional questions.

Best Wishes,
Peter Stoev

[Author]

Posts