ContextMenu cannot be closed when used in datatable

Hi Cagatay,

When I used the p:contextMenu in p:datatable, the popuped menu cannot be closed when clicking other place. Then I tried this case in prime-showcase, and I found the same issue. Maybe, it is a bug. Thank you in advance for looking into issue.

Sheng

[optimus.prime]

Hi Sheng,

Can you post your code please? Thanks.

Hi Cagatay,

I used a partial codes of contextMenuTable.xhtml from Prime-Showcase to reproduce this issue. I found two issues: 1) popup menu cannot be closed, 2) menu item was duplicated. Maybe, my coding was wrong. Thanks a lot.

Code: Select all

<p:dataTable id="cars" var="car" value="#{tableBean.carsSmall}">
   <p:column>
      <f:facet name="header">
         Model
      </f:facet>
      <h:commandLink id="car" value="#{car.model}" />
      <p:contextMenu for="car">
         <p:menuitem value="Delete" actionListener="#{buttonBean.save}" update="msg">
            <f:setPropertyActionListener value="#{car.id}" target="#{tableBean.selectedId}"/>
         </p:menuitem>
         <p:menuitem value="Update" actionListener="#{buttonBean.update}" update="msg">
            <f:setPropertyActionListener value="#{car.id}" target="#{tableBean.selectedId}"/>
         </p:menuitem>
         <p:menuitem value="Delete" actionListener="#{buttonBean.delete}" ajax="false">
            <f:setPropertyActionListener value="#{car.id}" target="#{tableBean.selectedId}"/>
         </p:menuitem>
      </p:contextMenu>
   </p:column>

   <p:column>
      <f:facet name="header">
         Year
      </f:facet>
      <h:outputText value="#{car.year}" />
   </p:column>
</p:dataTable>


All the best,

Sheng

[optimus.prime]

Hi Sheng,

Can you try;

Code: Select all

<p:dataTable id="cars" var="car" value="#{tableBean.carsSmall}">
   <p:column>
      <f:facet name="header">
         Model
      </f:facet>
      <h:commandLink id="car" value="#{car.model}" />
   </p:column>

   <p:column>
      <f:facet name="header">
         Year
      </f:facet>
      <h:outputText value="#{car.year}" />
   </p:column>
</p:dataTable>

 <p:contextMenu for="car">
         <p:menuitem value="Delete" actionListener="#{buttonBean.save}" update="msg">
            <f:setPropertyActionListener value="#{car.id}" target="#{tableBean.selectedId}"/>
         </p:menuitem>
         <p:menuitem value="Update" actionListener="#{buttonBean.update}" update="msg">
            <f:setPropertyActionListener value="#{car.id}" target="#{tableBean.selectedId}"/>
         </p:menuitem>
         <p:menuitem value="Delete" actionListener="#{buttonBean.delete}" ajax="false">
            <f:setPropertyActionListener value="#{car.id}" target="#{tableBean.selectedId}"/>
         </p:menuitem>
      </p:contextMenu>


Hi Cagatay,

When I tried the code above, I got the following exceptions:

SEVERE: Error Rendering View[/ui/contextMenuTable.xhtml]
javax.faces.FacesException: Cannot find component 'car' in view.
at org.primefaces.component.contextmenu.ContextMenuRenderer.findTrigger(
ContextMenuRenderer.java:66)
at org.primefaces.component.contextmenu.ContextMenuRenderer.encodeScript
(ContextMenuRenderer.java:43)
at org.primefaces.component.contextmenu.ContextMenuRenderer.encodeEnd(Co
ntextMenuRenderer.java:36).

It looks that the rendered commandLink id is "cars:0:car","cars:1:car", ...

<a id="cars:0:car" href="#" onclick="mojarra.jsfcljs(document.getElementById('j_idt8'),{'cars:0:car':'cars:0:car'},'');return false">a6e4e6c8</a

Thanks again for your help!

Sheng

[optimus.prime]

Hmm, just to try something can you change the order, I think I need to look into this in detail. contextMenu should treat datatable differently.

Code: Select all

<p:contextMenu for="car">
         <p:menuitem value="Delete" actionListener="#{buttonBean.save}" update="msg">
            <f:setPropertyActionListener value="#{car.id}" target="#{tableBean.selectedId}"/>
         </p:menuitem>
         <p:menuitem value="Update" actionListener="#{buttonBean.update}" update="msg">
            <f:setPropertyActionListener value="#{car.id}" target="#{tableBean.selectedId}"/>
         </p:menuitem>
         <p:menuitem value="Delete" actionListener="#{buttonBean.delete}" ajax="false">
            <f:setPropertyActionListener value="#{car.id}" target="#{tableBean.selectedId}"/>
         </p:menuitem>
      </p:contextMenu>

<p:dataTable id="cars" var="car" value="#{tableBean.carsSmall}">
   <p:column>
      <f:facet name="header">
         Model
      </f:facet>
      <h:commandLink id="car" value="#{car.model}" />
   </p:column>

   <p:column>
      <f:facet name="header">
         Year
      </f:facet>
      <h:outputText value="#{car.year}" />
   </p:column>
</p:dataTable>