p:dataTable: Trigger rowSelect event when click embedded content (image)

Question

In the example below the rowSelect-event will be triggered if I click a row, but not if clicking the image in the row.

I understand why this happening, but i'm wondering if there is some elegant way to include the subcomponents also (possibly nested subcomponents also)?

<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>

Related: stackoverflow.com/questions/14294968/…

BalusC
– BalusC

2013-02-17 03:30:14 +00:00
Commented Feb 17, 2013 at 3:30 — BalusC
– BalusC, Commented Feb 17, 2013 at 3:30

Samuel · Accepted Answer · 2013-08-14 13:50:36Z

1

You can try to add an onclick event on the image:

<p:dataTable rowIndexVar="rowIndex" widgetVar="scrollist"...

... onclick="scrollist.unselectAllRows(); scrollist.selectRow(#{rowIndex})"

answered Aug 14, 2013 at 13:50

Samuel

87910 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

If the embedded content is an image that will be always displayed in a column (like in the picture below) and you want the image not interfering with the row selection, you can do:

<p:column styleClass="my_icon">

And create the css class:

.my_icon {
   background-image: url("myicon.png");
   background-repeat: no-repeat;
   background-position: center;
}

You will get something like this:

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Mar 4, 2018 at 0:08

Cristian Arteaga

5509 silver badges13 bronze badges

Comments

Jerry Chan · Accepted Answer · 2014-04-03 01:43:25Z

-1

just add the css to embeded img tag:

table tbody td img { pointer-events: none;

  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;

}

answered Apr 3, 2014 at 1:43

Jerry Chan

1171 silver badge3 bronze badges

Collectives™ on Stack Overflow

p:dataTable: Trigger rowSelect event when click embedded content (image)

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related