<p:dataTable var="car" value="#{tableBean.carsSmall}" id="carList" editable="true">
<f:facet name="header">
In-Cell Editing
</f:facet>
<p:ajax event="rowEdit" listener="#{tableBean.onEdit}" update=":form:messages" />
<p:ajax event="rowEditCancel" listener="#{tableBean.onCancel}" update=":form:messages" />
<p:column headerText="Model" style="width:125px">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{car.model}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{car.model}" style="width:100%"/>
</f:facet>
</p:cellEditor>
</p:column>
Simple example from official site of primefaces does not work.
the error is
javax.faces.view.facelets.TagException: /faces/default.xhtml #36,106
Event:rowEditCancel is not supported.
I also faced the same problem. But I found the solution that I was using version 3.1 of primefaces. And this version not supports rowEditCancel event.
In-Cell Editing data table is supported in primefaces 3.5 and primefaces 4.0 upgrade needed
Make sure in your bean, you have a method defined like this:
public void onCancel(RowEditEvent event) {
//...put your logic here
}
Related
So, I've used example from showcase of PrimeFaces https://www.primefaces.org/showcase/ui/dnd/dataTable.xhtml. That's my code:
<div class="page_content">
<div class="header">Очередь рассылок</div>
<script type="text/javascript">
function handleDrop(event, ui) {
var droppedEmail = ui.draggable;
droppedEmail.fadeOut('fast');
}
</script>
<h:form>
<p:fieldset id="availableEmailsField" legend="Доступные рассылки">
<p:dataTable id="availableEmails" var="email" value="#{emailingQueueUI.customEmails}">
<p:column style="width: 20px;">
<h:outputText id="dragIcon" styleClass="ui-icon ui-icon-arrow-4"/>
<p:draggable for="dragIcon" revert="true" helper="clone"/>
</p:column>
<p:column headerText="ID">
<h:outputText value="#{email.id}"/>
</p:column>
<p:column headerText="Название">
<h:outputText value="#{email.name}"/>
</p:column>
<p:column headerText="Заголовок">
<h:outputText value="#{email.header}"/>
</p:column>
<p:column headerText="Количество порции">
<h:outputText value="#{email.chunkSize}"/>
</p:column>
</p:dataTable>
</p:fieldset>
<p:outputPanel id="selectedEmailsField">
<p:outputPanel id="dropArea">
<h:outputText value="Переместите сюда c доступных рассылок" rendered="#{empty emailingQueueUI.customEmailQueue}" style="font-size:16px;" />
<p:dataTable id="selectedEmails" var="email" value="#{emailingQueueUI.customEmailQueue}" rendered="#{not empty emailingQueueUI.customEmailQueue}"
rowIndexVar="index">
<!--<p:ajax event="rowReorder" listener="#{emailingQueueUI.onQueueReorder}" update=":form" />-->
<p:column headerText="Номер в очереди">
<h:outputText value="#{index}"/>
</p:column>
<p:column headerText="Рассылка">
<h:outputText value="#{email.id}"/>
</p:column>
<p:column headerText="Название">
<h:outputText value="#{email.name}"/>
</p:column>
<p:column headerText="Заголовок">
<h:outputText value="#{email.header}"/>
</p:column>
<p:column headerText="Количество порции">
<h:outputText value="#{email.chunkSize}"/>
</p:column>
</p:dataTable>
</p:outputPanel>
</p:outputPanel>
<p:droppable for="selectedEmailsField" tolerance="touch" activeStyleClass="ui-state-highlight" datasource="availableEmails" onDrop="handleDrop">
<p:ajax listener="#{emailingQueueUI.onEmailDrop}" update="dropArea availableEmails" />
</p:droppable>
</h:form>
</div>
There is a problem with d&d, I can drag and drop only one element from "availableEmailsField". When I try to drop another element it removes previous element and adds the dropped one.
I think the problem is in your bean.
Make sure that you initialize customEmailQueue inside #PostConstruct method and use the proper bean scope. In this case #ViewScoped.
It seems that an update function must be setted correctly in order to work properly. I faced the same issue and discovered that the ajax inside dropable has to update all drag-drop area elements, it seems that this action solves the issue.
The solution that worked is to put inside your form an:
<h:panelGroup id="elementsPanel">
....
...
...
...
....
</h:panelGroup>
, surrounding all drag-drop elements (if you dont want a panelgroup the idea is to update all the components)
and on the dropable update this panel:
<p:droppable id="dropHandler" for="selectedTable" tolerance="touch" activeStyleClass="ui-state-highlight" datasource="myDataSource" onDrop="handleDrop">
<p:ajax listener="#{dimensionsClass.onDimensionDrop2}" update="elementsPanel" />
</p:droppable>
I hope that helps!
I am not sure if it is supported as I cannot make the fileUploadListener working in the subTable. Only the basic file upload demo works in the nested table. Seems like the FileUploadEvent is not called. Upload progress bar shows and disappears but the listener method is not fired.
<p:dataTable var="parent" value="#{bean.parents}">
<p:columnGroup type="header">
<p:row>
<p:column>
<f:facet name="header">Parent name</f:facet>
</p:column>
<p:column>
<f:facet name="header">Child name</f:facet>
</p:column>
<p:column headerText="Actions"/>
</p:row>
</p:columnGroup>
<p:subTable var="child" value="#{parent.children}">
<f:facet name="header">#{parent.name}</f:facet>
<p:column>#{child.name}</p:column>
<p:column>
<p:fileUpload fileUploadListener="#{bean.handleFileUpload}"/>
</p:column>
</p:subTable>
</p:dataTable>
I am using PF 5.3, on (weblogic 11g/jsf2.0/java 1.6).
I thought the issue of not shown emptyMessage in Datatable is fixed in 5.3, but inspite of using the latest version, i still dont see the message. Below is my sample code.
<p:dataTable id="attaDt" var="fileRow" value="#{pendpaybean.selectedPayDetailsFiles}"
rowIndexVar="rowIndex"
emptyMessage="No Files Uploaded"
>
<p:column headerText="Uploaded Date"
width="15px;" style="text-align:center"
>
<h:outputText value="#{fileRow.columns[0]}" />
</p:column>
<p:column headerText="Uploaded By"
width="30px;" style="text-align:center"
>
<h:outputText value="#{fileRow.columns[3]}" />
</p:column>
</p:datatable>
Any help ?
Your code works well. NOTE I put attribute value to null for showing emptyMessage.
Your adapted code:
<h:body>
<h:form>
<p:dataTable id="attaDt" value="#{null}" var="fileRow" rowIndexVar="rowIndex" emptyMessage="No Files Uploaded">
<p:column headerText="Uploaded Date" width="15px;" style="text-align:center">
<h:outputText value="#{fileRow.columns[0]}" />
</p:column>
<p:column headerText="Uploaded By" width="30px;" style="text-align:center">
<h:outputText value="#{fileRow.columns[3]}" />
</p:column>
</p:dataTable>
</h:form>
</h:body>
I am using PrimeFaces 3.2 and want to export a dynamically created table as an .xls file. When i click on export, nothing seems to be happening.
Export Code
<h:commandLink id="Download_Excel_Format" ajax="false">
<p:graphicImage value="/resources/Excel_Icon.jpg" height="25" width="25" />
<p:dataExporter type="xls" target="dataTable" fileName="SomeFileName"/>
</h:commandLink>
dataTable
<p:dataTable id="dataTable" var="c" value="#{databaseSearch.customerList}"
paginator="true" rows="10" paginatorAlwaysVisible="false"
paginatorTemplate="Page {CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} Rows per page {RowsPerPageDropdown}"
rowsPerPageTemplate="5,10,15,30">
<p:column>
<f:facet name="header">
<h:outputText value="Machine" />
</f:facet>
<p:commandButton id="basic" value="#{c.machine}" action="#{updateEntry.setMachine(c.machine)}" oncomplete="dlg1.show();" styleClass="ui-Machinebutton" update=":Update_Entry"/>
<p:tooltip for="basic" value="Update/Delete Database Entry" showEffect="fade" hideEffect="fade" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Company" />
</f:facet>
<h:outputText value="#{c.company}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Contact" />
</f:facet>
<h:outputText value="#{c.contact}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Phone" />
</f:facet>
<h:outputText value="#{c.phone}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Email" />
</f:facet>
<!-- <h:outputText value="#{c.email}" />-->
<h:outputLink value="mailto:#{c.email}?Subject=Baseline Monitor Alert | Machine : #{c.machine}">#{c.email}</h:outputLink>
</p:column>
</p:dataTable>
Both the dataTable and the Export command are within one form, however the dataTable is in a output panel (within the form).
Form
<h:form prependId="false" id="Main_Form">
</h:form>
Output Panel
<p:outputPanel id="panel" autoUpdate="false">
</p:outputPanel>
I even updated to PrimeFaces 3.4.2 to see if the dataExporter would work, but no avail, as far as i remember 3.2 has a bug if the dataTable generates columns dynamically, but that is not the case here right? am i doing something wrong?
dataExporter option looks much simpler, but if there is an alternative which is simple enough i am up for it.
Update
I am using a GlassFish 3.1.2.2 (build 5) & NetBeans 7.2.1, i do not get any errors, just the page refresh's, has a '#' at the end of the URL and stops, no errors means that i am not lacking any dependencies either... so i am lost here ...
Ok, i found the answer ! Tricky one though ... i had a commandButton with the ID=submit...renamed it and that did the trick !
<p:commandButton id="xsubmit" icon="ui-icon-search" title="Search Database" update="panel" actionListener="#{databaseSearch.customerList}" />
I have Primefaces DataTable with in-cell editing:
<p:dataTable id="docsTable" editable="true" value="#{customer.docs}" var="doc" style="border-width:0px;" >
<p:growl id="docsMessages" showDetail="true"></p:growl>
<p:ajax event="rowEdit" update="docsMessages,docsTable" listener="#{customerController.onEditDocument}"></p:ajax>
<p:ajax event="rowEditCancel" update="docsMessages,docsTable" listener="#{customerController.onEditDocumentCancel}"></p:ajax>
<p:column headerText="Document Type">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{doc.docType}"></h:outputText>
</f:facet>
<f:facet name="input">
<p:inputText value="#{doc.docType}"></p:inputText>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Document Number">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{doc.docNum}"></h:outputText>
</f:facet>
<f:facet name="input">
<p:inputText value="#{doc.docNum}"></p:inputText>
</f:facet>
</p:cellEditor>
</p:column>
<p:column>
<p:rowEditor></p:rowEditor>
</p:column>
</p:dataTable>
Here is corresponding SWF view state definition:
<view-state id="enterDetails" view="/WEB-INF/views/tiles/customer/s3-custDetails.xhtml" model="customer"> <!-- tiles/customer/s3-custDetail -->
<secured attributes="ROLE_WEB" />
<var name="customerController" class="com.my.CustomerController"/>
<transition on="addNewDocument">
<evaluate expression="customer.docs.add(new com.my.CustomersDocs())"></evaluate>
<render fragments="custDetails"></render>
</transition>
</view-state>
The view renders fine, values are saved in backing bean, and rowEdit listener is called in my controller as well. However it never exits the editor mode no matter what user does. I did some network sniffing and it appears SWF is only sending back the viewstate, whereas Primefaces showcase also sends back rendered fragment.
How do I fix this?
This is a bug/deficiency in Spring webflow. It is mentioned in Spring docs (see http://static.springsource.org/spring-webflow/docs/2.3.x/reference/html/ch13s10.html) but in a rather obscure fashion and does not mention relation to partial rendering issues. The fix is simple, add the following in webflow:flow-executor tag:
<webflow:flow-execution-attributes>
<webflow:redirect-in-same-state value="false"/>
</webflow:flow-execution-attributes>