based on showcases I wanted to use datatable with instant row select and row edit.
Problem:
Row select did not work as expected - row was selected and event fired only "time to time" (row edit was workig without problems)
- If I click column Test, everything works as exptected.
- If I click other named columns, rowSelect doesn't work - exception is when I click really close to the border of cell
- If I click to cell with editting controls, it again depends where exactly I click
Definition of datatable:
Code: Select all
<p:dataTable id="users"
var="user"
value="#{userBean.userDataModel}"
selection="#{userBean.selectedUser}"
selectionMode="single"
rowKey="#{user.id}"
dblClickSelect="false"
editable="true"
editMode="row"
>
<p:ajax event="rowSelect" listener="#{userBean.onRowSelect}" update=":tabView:form:messages" />
<p:ajax event="rowUnselect" listener="#{userBean.onRowUnselect}" update=":tabView:form:messages"/>
<p:ajax event="rowEdit" listener="#{userBean.onEdit}" update=":tabView:form:messages" />
<p:ajax event="rowEditCancel" listener="#{userBean.onCancel}" update=":tabView:form:messages" />
<p:column headerText="Test">
<h:outputText value="Test"/>
</p:column>
<p:column headerText="Name">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{user.name}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{user.name}" style="width:100%" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Email">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{user.email}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{user.email}" style="width:100%" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Password">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="*******" />
</f:facet>
<f:facet name="input">
<p:password value="#{user.pwd}" style="width:100%" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column style="width:6%">
<p:rowEditor />
</p:column>
</p:dataTable>
Main cause is rendering of <p:cellEditor> and handling of this in javascript datatable.js:
Rendering of column Test:
Code: Select all
<td role="gridcell">Test</td>
Code: Select all
<td role="gridcell" class="ui-editable-column">
<div id="tabView:form:users:1:j_idt39" class="ui-cell-editor">
<div class="ui-cell-editor-output">Test Name</div>
<div class="ui-cell-editor-input">
<input id="tabView:form:users:1:j_idt41" name="tabView:form:users:1:j_idt41" type="text" value="Test Name" style="width:100%" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" role="textbox" aria-disabled="false" aria-readonly="false" aria-multiline="false">
</div>
</div>
</td>
Code: Select all
onRowClick: function(event, rowElement, silent) {
//Check if rowclick triggered this event not a clickable element in row content
if($(event.target).is('td,span:not(.ui-c)')) {
Solution:
Change row 895 of datatable.js to accept also class ui-cell-editor-output:
from:
Code: Select all
if ($(e.target).is("td,span:not(.ui-c)")) {
Code: Select all
if ($(e.target).is("td,span:not(.ui-c),.ui-cell-editor-output")) {
Should I file bug report? Or do you consider current behaviour as correct per design?
I am new to PrimeFaces and I really like it. However, I was really confused before I have figured out where is the problem and why rowSelection on my test did not work.
With regards,
Honza