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

UI Components for JSF
jan.cejka
Posts: 2
Joined: 11 Feb 2013, 00:53

11 Feb 2013, 01:57

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:

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

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

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)')) {
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:

Code: Select all

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

Code: Select all

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

smithh032772
Posts: 6144
Joined: 10 Sep 2011, 21:10

11 Feb 2013, 13:11

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 6.0, Extensions 6.0.0, Push (Atmosphere 2.4.0)
TomEE+ 1.7.4 (Tomcat 7.0.68), MyFaces Core 2.2.9, JDK8
JUEL 2.2.7 | OmniFaces | EclipseLink-JPA/Derby | Chrome

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

rikup
Posts: 459
Joined: 29 Jan 2013, 14:27

11 Feb 2013, 14:08

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?
PrimeNG 2.0.0
Angular 2.4.5

jan.cejka
Posts: 2
Joined: 11 Feb 2013, 00:53

11 Feb 2013, 17:17

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

smithh032772
Posts: 6144
Joined: 10 Sep 2011, 21:10

11 Feb 2013, 17:28

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 6.0, Extensions 6.0.0, Push (Atmosphere 2.4.0)
TomEE+ 1.7.4 (Tomcat 7.0.68), MyFaces Core 2.2.9, JDK8
JUEL 2.2.7 | OmniFaces | EclipseLink-JPA/Derby | Chrome

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

djmj
Posts: 400
Joined: 16 Dec 2011, 01:23

11 Feb 2013, 23:37

@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: 11.0.0 RC2
Primefaces-Extension: 11.0.0
PrimeFaces-Mobile: 11.0
OmniFaces: 3.11
Jsf: Mojarra 2.3.8
Server: Glassfish 5.1.0

marco.delpercio
Posts: 7
Joined: 04 Feb 2015, 13:59

05 Nov 2015, 13:51

Hi,

I just bumped into this thread because I have exactly the same issue. When trying to click to select a row nothing happens because some columns have their cells containing divs or other markup therefore the click event target is different and the row selection never happens.

I fixed it with the following workaround:

Code: Select all

jQuery(function () {
         jQuery('.ui-datatable-data').on('click', "td[role='gridcell']", function(event) {
		if (event.target.tagName.toLowerCase() != 'td')
		{
			jQuery(event.target).parents('td:first').trigger("click");
		}
	});
});
Currently using PF 5.2 community, on WildFlly 9.0.1, JSF Impl. Oracle Mojarra 2.2.11
Cheers

kukeltje
Expert Member
Posts: 9605
Joined: 17 Jun 2010, 13:34
Location: Netherlands

05 Nov 2015, 20:55

Tried a newer PF release? Iirc, something like this was 'fixed' in an elite release and might have found its way to 5.3

marco.delpercio
Posts: 7
Joined: 04 Feb 2015, 13:59

09 Nov 2015, 10:29

Just tried with PF 5.3 community, same problem

JavaFlint
Posts: 13
Joined: 21 May 2015, 18:56

04 Dec 2015, 21:02

Marco,
Thanks for the fix!
DataTable row selection now works even if I surround text with DIV (to limit height of the cell).
PrimeFaces 5.3 community, JBoss EAP6.3, JSF 2.1, JDK 1.7, IE11

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 26 guests