CODEWITHSUNDEEP
jsf-2primefaces
ovonel
ovonel

Reputation: 242

Primefaces: On click on div inside p:column doesn´t call rowSelect method

In my p:column I have several divs with text, if I click on the text it doesn´t select the row and also doesn´t call rowSelect event.

Example:

...
<p:column>
         text1
    <div>text2</div>
<p:column>
...

I can click on text1 but not on text2. Where is the problem?

Upvotes: 2

Views: 4179

Answers (2)

Richard P.
Richard P.

Reputation: 723

It's true that div element prevent default 'on select' event but I think there is a easier and simply solution for it. Use a instead of a div element. Span doesn't prevent such event so you can use it or any other element expected to be inside td elemnts when a dataTable is rendered.

...
<p:column>
     text1
     <span style="display:block"> text2 </span>
<p:column>
...

Upvotes: 2

Cesar Zegarra
Cesar Zegarra

Reputation: 207

The problem is that div overwrite onclick event of column. I had that problem, my solution was overrite that event on div with functions like theses:

XHTML:

<p:datatable ..(properties)... widgetVar="dt" rowIndexVar"rowIndex" ...>
.......
<p:column>
   <div onclick="selectCurrentRow(dt,#{rowIndex});" > hola </div>
</p:column>
.......
<p:datatable/>

JS:

function selectCurrentRow_paginator(table,index){
table.unselectAllRows();
table.selectRow(index-(table.paginator.cfg.page*table.paginator.cfg.rows) ,false);

}

function selectCurrentRow(table,index){
table.unselectAllRows();
table.selectRow(index ,false);
}

if JS say dt is not defined just surround wingetVar name with PF() function like this:

<div onclick="selectCurrentRow(PF('dt'),#{rowIndex});" > hola </div>

Also this solution help with oncontextmenu event too:

<div oncontextmenu="selectCurrentRow(PF('dt'),#{rowIndex});" onclick="selectCurrentRow(PF('dt'),#{rowIndex});" > hola </div>

Upvotes: 3

Related Questions