Clever Geek Handbook

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


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


source


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:

Result

0


source


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


source






More articles:


All Articles