Problem is short. I have created a p:datatable
but within the p:column
i actually have a div
element. Unfortunately the datatable should have selectable rows and the div just won't cooperate ;).
So the solution is to call it manually, on the div element there is onclick listener, but how should I call the rowSelection of the datatable? Is there some list of the functions of Primefaces' elements?
the code:
<p:dataTable var="user" value="#{rec.friends}" rowKey="#{user.id}" widgetVar="friendscrollist"
rendered="#{not empty rec.friends}" scrollable="true" rowIndexVar="findex"
scrollHeight="500" scrollWidth="220" selectionMode="single" selection="#{rec.chosenFriend}" styleClass="friendscroll">
<p:column width="198" id="friend#{findex}">
<div class="friendlist" onclick="friendscrollist.clickRow(#{findex})" />
</p:column>
<p:ajax update=":leftform" event="rowSelect" />
<p:ajax update=":leftform" event="rowUnselect" />
</p:dataTable>
Of course it is a simplified version, only things u need. So the question is what to call in the div onclick?
the <p:dataTable widgetVar>
has unselectAllRows()
and selectRow(index)
functions which are exactly what you need.
<div onclick="friendscrollist.unselectAllRows(); friendscrollist.selectRow(#{findex})">
There's unfortunately no documentation available for those functions, but in Chrome/Firebug you can see a list of all available functions in autocomplete list when you enter friendscrollist.
in JS console. Below is a screen from Chrome:
Looking in the JS source code or common sense based on the function name should tell/hint you what those functions do.
Update: I stand corrected, a few of those functions are actually documented in PrimeFaces 3.4 User's Guide. They're in the "Client Side API" section of chapter 3.26 "DataTable", on page 146.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With