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.
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.
icon path refers to <docroot>/resources/images/kianIcon.png
2. create custom styleclass to hide the button border and background colour.
3. remove the button text (value)
4. use the custom styleclass in p:menuButton
Output:
Done!!
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.
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.
icon path refers to <docroot>/resources/images/kianIcon.png
2. create custom styleclass to hide the button border and background colour.
3. remove the button text (value)
4. use the custom styleclass in p:menuButton
Output:
Done!!
No comments:
Post a Comment