CODEWITHSUNDEEP
javascriptjqueryjsfprimefaces
DanteVoronoi
DanteVoronoi

Reputation: 1153

Get value after right click in context menu PrimeFaces

I created in my project context menu after right click. Menu model is created in Java. In XHTML I have only:

<p:panelMenu style="width:250px" id="menu"
            model="#{menuBean.menuModel}" stateful="false">
        </p:panelMenu>

<p:contextMenu id="context" for="menu"
                model="#{menuBean.contextMenuModel}" style="width:300px">

I want get value or id from item when I click on it right mouse click. How do this in PrimeFaces? I found answer only for using data table. I used in project JSF and PrimeFaces.

EDIT: I wrote simple jQuery like this:

$(".ui-menuitem-link").contextmenu(function() {
   document.getElementById("hiddenField").value = $(this).text();
});

It returns the name of selected item, but maybe someone have better solution without jQuery.

Upvotes: 1

Views: 2972

Answers (2)

Kukeltje
Kukeltje

Reputation: 12337

The p:contextMenu has a beforeShow attribute that can be used to fire a client-side javascript function (as can be read in the documentation).

It also has a targetFilter, to only fire on certain elements within the 'for'. If you give your form an explicit id (e.g. myForm), you can have it fire only on the menu item links:

<p:contextMenu for="menu" targetFilter="#myForm\\:menu .ui-menuitem-link" beforeShow="...">

You can e.g. do a console.log(this) or a console.log(event) and from those check what you need and have access to, it is a lot.

'this' in the context of the contextMenu has a jqTarget property that will get you the html component the contextMenu was fired for (the menu), but you can also use the event object which has a target that is the specific menu item.

<p:contextMenu for="menu" targetFilter="#myForm\\:menu .ui-menuitem-link" beforeShow="console.log(this); console.log(event)">

Will give you an output like

Object { _super: undefined, cfg: Object, id: "myForm:j_idt118", jqId: "#myForm\:j_idt118", jq: Object, widgetVar: "widget_myForm_j_idt118", keyboardTarget: Object, links: Object, rootLinks: Object, jqTargetId: "#myForm\:menu", 1 meer… }  panelMenu.xhtml:655:174
Object { originalEvent: contextmenu, type: "contextmenu", isDefaultPrevented: returnFalse(), target: <a.ui-menuitem-link.ui-corner-all.ui-state-hover>, currentTarget: <div#myForm:menu.ui-panelmenu.ui-widget>, relatedTarget: null, timeStamp: 103942249, jQuery31004030775514688282: true, delegateTarget: HTMLDocument → panelMenu.xhtml, handleObj: Object, 1 meer… }

So you do need javascript to get to the real value of what you need, you just do not need custom jquery.

Since I do not know where your hidden field is, I cannot incorporate that in my answer. Sorry

Upvotes: 3

Yagami Light
Yagami Light

Reputation: 1796

To perform something like that you first need to make your contextMenu inside the element and necessarily have something to identifie your data (information)

Let's look to this example

First Example : Tree

<p:tree id="tree"  value="#{ManagedBean.treeConstruct}" var="node" ...>
 <p:ajax  event="contextMenu"  listener="#{ManagedBean.onContextMenu}"     />
 ...    
</p:tree>

and in the managedBean you will found 

 public void onContextMenu(NodeSelectEvent event) {

  System.out.println(" event " + event.getTreeNode().getRowKey());

 }

You can see the way that we get the selected element, this way is provided by Primefaces documentation.

Second Example : DataGrid

 <p:dataGrid var="car" ...>
  <p:contextMenu   for="element" id="test" >
   <p:menuitem  icon="ui-icon-plus" ... >
       <f:setPropertyActionListener value="#{car}"  target="#{ManagedBean.nodeSelected}"  />                                  
                            </p:menuitem>

  </p:contextMenu>
 </p:dataGrid>

You see that the thing Var is in commente with the two example

Upvotes: 1

Related Questions