Board index JavaServer Faces General dataTable, row select, row edit => error in datatable.js?

dataTable, row select, row edit => error in datatable.js?

Components, Ajax Framework, Utilities and More.


Posts: 2
Hello,

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


Cause of problem:
Main cause is rendering of <p:cellEditor> and handling of this in javascript datatable.js:

Rendering of column Test:
<td role="gridcell">Test</td>


Rendering of column Name:
<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>


Handling of onRowClick in datatable.js, starting at row 894 (SVN r8770):
 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)')) {


From code snippets above is visible, that <p:cellEditor> renders text into div elements. However, onRowClick reacts only to td and span elements.

Solution:
Change row 895 of datatable.js to accept also class ui-cell-editor-output:

from:
if ($(e.target).is("td,span:not(.ui-c)")) {


to:
if ($(e.target).is("td,span:not(.ui-c),.ui-cell-editor-output")) {


This would be still only partial solution, since rowSelect would not work for rows in editing mode. Still, this could be solved via extension of accepted elements/classes in mentioned row.


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
PrimeFaces 3.5, Mojarra 2.1.6 (SNAPSHOT 20111206), Glassfish 3.1.2.2


Posts: 5826
jan.cejka wrote:
based on showcases I wanted to use datatable with instant row select and row edit.

This would be still only partial solution, since rowSelect would not work for rows in editing mode. Still, this could be solved via extension of accepted elements/classes in mentioned row.

Should I file bug report? Or do you consider current behaviour as correct per design?

In short, here is my 2 part answer:

1. editable datatable is working as designed
2. datatable with row selection is working as designed

Next, if one 'based' their design/implementation on 'showcase', then they would keep the two 'separate' as showcase kept the two (test) cases, separate; editable and (many use cases of) row selection, but not one (show) case demonstrated editable and row selection. So, if you're going to use datatable, then develop according to what you see in showcase, or read user guide and see if it is possible for you to 'merge' the two use cases.

editable datatable gives you plenty of features, built-in, for those that are a bit lazy and prefer not to develop their own implementation for editing data presented in the datatable. why would you (and others) want to have row selection with an 'editable' (non-row-selectable) datatable? this is a common question/issue that people have here.

User guide states,
Incell editing provides an easy way to display editable data.


With all of that said, I would 'not' recommend to add this as a bug.

Read the user guide and learn how to use built-in row-selection features of an 'editable' datatable, and make sure your implementation uses 'editable' datatable (alone or) without 'row selection' datatable.
Howard

PrimeFaces 5.0, Extensions 2.0.0, Push (Atmosphere 2.1.8)
TomEE 1.7.0 (Tomcat 7.0.55), MyFaces Core 2.2.4, JDK8
JUEL 2.2.6 | OmniFaces | EclipseLink-JPA/Derby | Chrome

Java EE 6 Tutorial|NetBeans|Google|Stackoverflow|PrimeFaces|Apache


Posts: 424
Maybe you could drop feature request in tracker if you want this kind of behavior? Or then describe here why you would want such behavior so somebody might have an alternative way for doing stuff you want to do?
Server: Wildfly 8.0.0
JSF: Mojarra 2.2.5
PF version: PrimeFaces 5.0 + Extensions 1.2.1
Other: OmniFaces 1.7.0
Browser: Firefox 2x


Posts: 2
My usecase for using rowSelect and rowEdit is user management application and assignment of users into roles:

- First datatable is showing list of users with basic characteristics of user (full name, user name, password, email, ...) - master
- Second datatable shows assignment of user into roles - detail

From my point of view, usage of rowSelect and rowEdit together is ideal:
- rowEdit allows me to edit basic characteristics of user (activated via row editing buttons) - yes, I am lazy to do editing in separate form (and to be frank I don't see big reason to do so if there is such a great feature as in-cell row editing)
- rowSelect is used to populate second datatable (user assignment into roles) by selecting user in master table


Also I know that I have combined 2 different showcases and did not see any exact usage of what I wanted. I also don't expect showcases to show all possible combinations of all the features. Also, I did not see in documentation that datatable is not designed to combine certain features. Mostly I try to ask myself why something shouldn't be possible rather than why something should be possible. And to me it seems that having rowEdit and rowSelect working together, both as they were designed, is pretty much modification of one selector in PrimeFaces source code.

Anyway, I will have a look into documentation at what you refer as "built-in row-selection features of an 'editable' datatable".
PrimeFaces 3.5, Mojarra 2.1.6 (SNAPSHOT 20111206), Glassfish 3.1.2.2


Posts: 5826
Nice response.

Please refer to the following and consider using PrimeFaces Extensions' master detail component; click use cases in the upper right corner of the page.

http://fractalsoft.net/primeext-showcas ... Detail.jsf

This is why you should develop your own implementation. I developed my own implementation of such a use case via buttons, p:selectBooleanCheckbox, and p:outputPanel rendered="#{bean.aboutToEditARow}".

You might consider updating your view (and rendered="#{...}" tags) via p:ajax rowedit event. Right?
Howard

PrimeFaces 5.0, Extensions 2.0.0, Push (Atmosphere 2.1.8)
TomEE 1.7.0 (Tomcat 7.0.55), MyFaces Core 2.2.4, JDK8
JUEL 2.2.6 | OmniFaces | EclipseLink-JPA/Derby | Chrome

Java EE 6 Tutorial|NetBeans|Google|Stackoverflow|PrimeFaces|Apache


Posts: 230
@smithh032772

He is talking about the same bug like in following threads, where its hard to select row with cell-editor usage:


I created an issue:

viewtopic.php?f=3&t=28402
viewtopic.php?f=3&t=28319
Primefaces: 5.0
Primefaces-Mobile: 0.9.4
Jsf: Mojarra 2.2.4
Server: Glassfish Web 4.0


Return to General