grails-ui menubar and ajax with remoteFunction

I wanted to turn the links of the grails-ui menubar into ajax remoteFunctions or remoteLinks. This was - once more - far more complicated than I had anticipated. Fortunately almighty google brought me to the solution. The ugly thing: One has to change the code like stated in the jira. Now another ugly thing about the solution is - as indicated by the author - that one still has to provide a url. Not a problem I thought, but the whole thing did not work at all. I had to spend some time, before I could figure out what was going on:

Both - the URL and the remoteFunction - are executed. The remote function comes first (which is a good thing as we will see), but then the URL kicks in and you have a double page change behaviour. The fix is as easy as you can imagine (I wish someone had told me). You have to add 'return false' at the end of the remote function. This stops the URL href feature from being executed at all. Voilà remote function can reign in peace now.

Use grailsui Menubar in taglib

The common way of using the grailsui menubar is to incorporate the offered tags like or directly into a template. For my purposes, where I wanted to create a menu based on database properties, I wanted to build a menubar within my own taglib. Although tags can be easily accessed like for example g.createLink(), I had to study the source code of MenuTagLib.groovy to find out what parameters were expected of me. The example shows how it works:

out << gui.menubar(id: 'topMenuBar', renderTo:'top1'){ gui.submenu(label: 'Links'){ gui.submenu(label: 'Search'){ gui.menuitem(url:'http://www.google.de', helpText: 'Google'){ 'Google' } } } }

Here is what caused me some problems: You have to define the parameter helpText (can also be ''). A url is needed, to trigger some controller action you can use createLink. Still have to figure out how to use remoteLink here. The label of the menuitem is not a parameter, but the body of the menuitem {}.

And a last remark: As the menubar did not work properly with my yui layout manager, I had to change two things. First I had to add the parameters zIndex:1 and scroll:null to the layout definition:

{ position: 'top', height: 24, body: 'top1', zIndex: 1, scroll: null },

zIndex tells the layout manager which element overlaps and the default is 0. As this is my onley zIndex higher than 0, the menu will overlap all other parts. Furthermore, scroll: null enables the menu to escape the borders of the div container.

I mentioned a second thing to change: Only if you add the parameter renderTo: 'top1' to the menubar definition, the menubar becomes active.