P: dataTable: Trigger rowSelect event when inline content (image) is clicked
In the example below, the rowSelect event will be fired if I click on the row but not click on the image in the row.
I understand why this is happening, but I'm wondering if there is some elegant way to include subcomponents (perhaps nested subcomponents)?
<h:form id="form">
<p:growl id="growl" showDetail="true" />
<p:dataTable id="cars" var="car" value="#{tableBean.cars}" rows="5"
selectionMode="single">
<p:ajax event="rowSelect" listener="#{tableBean.onRowSelect}"
update=":form" />
<p:column headerText="Model">
<p:graphicImage value="myImage.png"
style="width: 40px; height: 40px;" />
</p:column>
</p:dataTable>
</h:form>
+3
Aksel Willgert
source
to share
3 answers
You can try adding an onclick event to the image:
<p:dataTable rowIndexVar="rowIndex" widgetVar="scrollist"...
... onclick="scrollist.unselectAllRows(); scrollist.selectRow(#{rowIndex})"
+1
Samuel
source
to share
If the inline content is an image that will always appear in a column (like in the image below) and you want the image not to interfere with the row selection, you can do:
<p:column styleClass="my_icon">
And create a css class:
.my_icon {
background-image: url("myicon.png");
background-repeat: no-repeat;
background-position: center;
}
You will end up with something like this:
0
Cristian David Arteaga Sanchez
source
to share
just add css to embed img tag:
table tbody td img {event-pointer: no;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
user-select: none;
}
-1
Jerry chan
source
to share