Select rows via mouse clicks in Primefaces DataTables while in row edit mode
We use Primefaces DataTables with in table editing in row edit mode and single selection mode.<p:dataTable id="..." var="..." value="..." rowKey="..." selection="..." selectionMode="single" editable="true"> <p:column headerText="Options" style="width:50px"> <p:rowEditor /> </p:column> <p:column headerText="..."> <p:cellEditor> <f:facet name="output"> <h:outputText value="..." /> </f:facet> <f:facet name="input"> <p:inputText value="..." label="..."/> </f:facet> </p:cellEditor> </p:column> ... </p:dataTable>But we faced some problems with the row selection via mouse click in a row.
In columns with cellEditors it worked quite poorly.
The reason of this poor behaviour lies in the Primefaces JavaScript code
It does not process the clicks on cells with cell editors, because these cells contains a "div", which are not recognized by the "onRowClick" method of the DataTable object.
To see this you have to create a Primefaces jar with non minified JavaScript code as explained in a great blog post from Rudy De Busscher.
Armored with this and a Firebug it's easy to find that in
META-INF/resources/primefaces/primefaces.js
the div-element, which is used in the columns with cell editors, is blocked in the 'onRowClick' method of the DataTable:
if($(event.target).is('td,span:not(.ui-c)) { ... }Just add it an you are fine.
if($(event.target).is('td,span:not(.ui-c),div.ui-cell-editor-output')) { ... }