Wednesday, March 27, 2013

Workaround for p:contextMenu in dataTable

There is a demo in Primefaces showcase, how p:dataTable integrates with p:contextMenu.
But this integration ONLY allowed p:contextMenu to work in row level.

If we are invoking the contextMenu from table cell, or a button in table.
It is impossible with the current p:contextMenu implementation.

There is an alternative way with p:menuButton.
p:menuButton demo
1. Styleclass - change the down arrow icon.
2. Styleclass - hide button border and background colour.
3. remove the button text (value)
4. use the custom styleclass in p:menuButton


Steps:
1. create custom styleclass to change the down arrow icon and name it as contextButton.
background:url(#{resource['images:kianIcon.png']});
    icon path refers to <docroot>/resources/images/kianIcon.png

2. create custom styleclass to hide the button border and background colour.
custom styleclass to hide border and colour


3. remove the button text (value)
4. use the custom styleclass in p:menuButton
<p:menuButton value="" styleClass="contextButton">

Output:
final output - contextMenu like menuButton


Done!!

LinkWithin

Related Posts Plugin for WordPress, Blogger...