PF 3.5.10, Mojarra 2.1.21, JBoss 7.1.1, PE 7.1, Omnifaces 1.5
I want to use datatable row editing in a p:Dialog.
I have a datatable with a row editing in a Dialog. (Showcase: http://www.primefaces.org/showcase/ui/datatableRowEditing.jsf)
If I click "OK" on the Dialog the changes should be saved, and if I click "Cancel" the changes will be dismissed. If row editing for a row is activated and I can change the values in a row, and then I click "Ok" on a Dialog, the active changes in a row will be lost.
How can I retrieve an actual status of editing ? How can I know if a row in a datatable is currently edited ? If i know that I can warn User that the changes will be lost.
Edit: link to PF sources Grepcode: PF sources isEditingRow()
<p:dialog>
<h:form>
<p:tabView cache="false" id=.. binding=..>
<p:tab>
<p:dataTable binding=.. id=... widgetVar=... var=.. >
</p:dataTable>
</p:tab>
</p:tabView>
<p:commandButton process="#form" action="myBean.listener()" value="OK" update="#form"
onstart="anotherTable.filter()" />
</h:form>
</p:dialog>
Edit: I accepted the answer because I implemented the required feature myself.
Either you bind the component to your backing bean, or write your own buttons that trigger editing mode which will also set a flag in the backing bean that you can use to determine the status of editing.
Binding the component is probably the easier option...
Related
We have a JSF project with the following versions of JARs:
Prime Faces 5.1
JSF 2.0
Javaee-api 5
But the Project Facets(in eclipse) defines JSF 2.2, we never changed it.
JPA 2 ( javaee-api 5)
Ejb 3.0
Our ajax is not working.
<p:selectOneRadio id="enrolledInPlanFlag" value="#{phInfoBean.enrldPlanFlag}" label="Action" >
<f:selectItem itemLabel="Yes" itemValue="Yes" />
<f:selectItem itemLabel="No" itemValue="No" />
<p:ajax process="enrolledInPlanFlag" update="#form"/>
</p:selectOneRadio>
<p:dialog id="dialog" header="APTC Warning" widgetVar="dlg1" modal="true" height="200" width="500" resizable="false" rendered="#{phInfoBean.enrldPlanFlag eq 'Yes'}">
I am trying to display dialog based on the selectOneRadio. But the AJAX is not working and we have the wierd situation where sometimes it works and sometimes it not.
We have annotated managed bean with #ViewScoped.
Please help.
Make it work
You never show your dialog in your code. You could attach an oncomplete event to your p:ajax
<p:ajax process="enrolledInPlanFlag" update="#form" oncomplete="PF('dlg1') != null ? PF('dlg1').show() : ''" />
The condition PF('dlg1') != null is required as if you choose "No" your dialog is no longer rendered in your page, therefore PF('widgetVarOfDialog') is unreachable.
Additional notes
I would improve this code by:
Changing enrldPlanFlag to a boolean instead of a string (cleaner IMO)
Display the dialog programatically in an listener (called from your p:ajax) if the boolean is true
Why? To leave the logic in your bean instead of your .xhtml page
I am using Primefaces 5.1 and I have a dashboard where I can drop components onto it.
But, when I drop a component on I want a different component to be rendered.
Here is my dashboard, and the panel component that is cloned and dropped onto the dashboard.
<p:dashboard id="board" model="#{dashboardBean.model}" binding="#{dashboardBean.dashboard}">
<p:ajax event="reorder" listener="#{dashboardBean.handleReorder}" update="msgs" />
</p:dashboard>
<p:panel id="draggable">
<h:outputLabel value="Drag Panel Into Dashboard"></h:outputLabel>
</p:panel>
<p:draggable for="draggable" helper="clone" dashboard="board"/>
Now I can trigger a capture the 'reorder' event and change the 'model' to replace it with the correct component on the java side. But the Dashboard does not get re-rendered at this point.
I can add a command button to trigger the re-render...
<h:commandButton value="Refresh" action="#{dashboardManagedBean.refreshChart}"/>
But I want this to happen automatically.
Can anyone offer some advice please.
(comment promoted to answer)
What if you referesh the component from handleReorder() using this RequestContext.getCurrentInstance().update("foo:bar")?
I'm using PrimeFaces dataTable and rowEditor in pretty default way:
<p:dataTable id="payments-table" var="apayment" value="#{payment.payments}" editable="true">
<p:ajax event="rowEdit" listener="#{payment.update}"/>
...
</p:dataTable>
I'd like a confirmation dialog to show itself on clicking to the 'check' button of rowEditor.
I know it's possible using JS confirm function (thanks to Show a confirm message before <p:rowEditor> updates the model on click of "OK" button):
<p:ajax event="rowEdit" listener="#{payment.update}" onstart="return confirm('Save changes?')"/>
But I would like the dialog to conform to the UI theme, confirmDialog component being the best candidate. Alas, I don't know how to use it here. I tried the following and it won't work (simply no confirmation occurres):
<p:ajax event="rowEdit" listener="#{payment.update}">
<p:confirm header="Remove payment" message="Remove payment?" icon="ui-icon-trash"/>
</p:ajax>
....
<p:confirmDialog global="true">
<h:form id="form-payment-confirm">
<p:commandButton value="Yes" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check"/>
<p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close"/>
</h:form>
</p:confirmDialog>
Any ideas?
I think you can use in this case simple widgetVar and call show() or hide() functions. Here is your modified code:
<p:ajax event="rowEdit" listener="#{tableBean.onRowEdit}" oncomplete="myDialog.show()"/>
I use PF 3.5 and can't find global parameter in p:confirmDialog. May be it is new feature. So I simple deleted it of my code. Here is modified confirmDialog:
<p:confirmDialog widgetVar="myDialog" closeOnEscape="true" appendToBody="true" closable="true">
<h:form id="form-payment-confirm">
<p:commandButton value="Yes" type="button" update="#form" styleClass="ui-confirmdialog-yes" icon="ui-icon-check"/>
<p:commandButton value="No" type="button" onclick="myDialog.hide()" styleClass="ui-confirmdialog-no" icon="ui-icon-close"/>
</h:form>
</p:confirmDialog>
Please try and adjust this confirm dialog code! May be unnecessary code for update form or hide()...
EDIT:
If you want to dynamically adjust text message of confirmDialog, you can adjust from server-side. Perhaps it is not best solution. I think the second way is it adjust from client-side by JQuery.
Server-side:
The ajax event is same. It call onRowEdit listener which adjust simple String attribute. For example the bean containt:
String myDialogMessage = "Default message";
//getter and setter
public void onRowEdit(RowEditEvent event) {
myDialogMessage="Are you sure?";
}
and the dialog containt message property:
<p:confirmDialog widgetVar="myDialog" closeOnEscape="true" appendToBody="true" closable="true" message="{tableBean.myDialogMessage}">
Client-side:
You can use repleaceWith function of JQuery:
<script>
jQuery("myDialog.p").replaceWith(....
</script>
Of course need to develop more business logic to client-side, more functions. Maybe the server-side solution is faster.
Please try it!
Based on your comment, I edited:
I find this in 4.0 user' guide:
When pencil icon is clicked, row is displayed in editable mode meaning
input facets are displayed and output facets are hidden. Clicking
tick icon only saves that particular row and cancel icon reverts the
changes, both options are implemented with ajax interaction. Another
option for incell editing is cell editing, in this mode a cell
switches to edit mode when it is clicked, losing focus triggers an
ajax event to save the change value.
So ajax event works when row is change. Here is dataTable events which can you catch:
I hope this answer help to you find solution!
I have one problem, data is not getting refresh in datatable.I am opening a dialoge box in which I have accordian panel in acordian panel I have tab in tab I have datatable.
<p:dialog id="dlgAddEditFundsCustFinAcct"
widgetVar="dlgAddEditFundsCustFinAcctWidget" modal="true"
'
.
<p:accordionPanel id="accAEFCFA" widgetVar="accWidget">
<p:tab id="tabDocuments" widgetVar="tabDocumentsWidget">
<p:panel id="pnlDocuments" widgetVar="pnlDocumentsWidget" >
<p:panelGrid id="pgDocumentTable" columns="5">
<p:dataTable id="dtDocumentTable" var="documentRecord" value="#addEditFundsCustFinAcctManagedBean.documentDetails}" widgetVar="documentTable">
And I have properly close all the tab.
And I am trying to call this dialogue box using
<p:commandButton value="Yes" styleClass="button-green"
id="btnAddSellerAccountSsr" oncomplete="confirmAccountDialog.hide(),dlgAddEditFundsCustFinAcctWidget.show()" update=":parentForm:dlgAddEditFundsCustFinAcct" />
"parentForm" is my form name.
The one thing is that if I call update inside the on some event like filtering on column or on rowclick then data is getting refresh in datatable.
<p:commandButton value="Yes" styleClass="button-green" id="btnAddSellerAccountSsr"
oncomplete="confirmAccountDialog.hide(),dlgAddEditFundsCustFinAcctWidget.show()"
update="dtDocumentTable" >
<f:ajax render="dtDocumentTable"/>
</p:commandButton>
use two forms. one for dialog box and other for parentform, and then update dialogbox datatable using its id
Thank You Saurabh and Zaido.
Unfortunatly both solution has not worked for me.
But I have solved the issue by calling clearfilter methode of datatable (this is client side methode).
<p:commandButton value="Yes" styleClass="button-green" id="btnAddSellerAccountSsr"
oncomplete="confirmAccountDialog.hide(),**documentTable.clearFilters();"**
update="dtDocumentTable" >
<f:ajax render="dtDocumentTable"/>
</p:commandButton>
where documentTable is widgetVar of datatable.
Hope this solution will help any one who has same issue :)
JSF-2.1 Primefaces 3.5 I have a datatable with Filter. I need to update only data on datatable(without Filter). Because everytime when i update the datatable, i lost the text in Filter Field.
I have one dialog, and the confirm button is outside the datatable's form
How can i fix it?
Thanks
<h:form id="form">
<p:dataTable id="cm_dataTable_#{cc.clientId}" widgetVar="cm_dataTableWidget_#{cc.clientId}" var="adr" value="#{cc.attrs.addresses}"rowIndexVar="rowIndex" filterDelay="1000" binding="#{cc.dataTable}" rowKey="#{adr.mailingadresseid}" selection="#{mailingadressenBean.selectedAddresses}">
<p:column id="colistuploadmeinedaten" filterBy="#{adr.firstname}" filterMatchMode="exact" filterOptions="#{mailingadressenBean.siTrueFalse}" sortBy="#{adr.istuploadmeinedaten}">
<h:outputText value="#{adr.anrede}" />
</p:column>
</p:datatable>
</h:form>
and the Dialog's confirmbutton
<p:commandButton id="dm_yesBttn" value="#{langs.yes}" update=":form" actionListener="#{deleteMailingadresseBean.delete}" oncomplete="hideDeleteDialog(xhr, status, args)"/>
You can't (PrimeFaces 3.5) directly bind datatable filters with JSF bean, so they will not be preserved when you update the whole component.
But if you call filter() on datatable widget, the data will be reloaded from server, without re-rendering the whole datatable component (so the filters will be preserved)
<p:dataTable .... widgetVar="myTable"> ...</p:dataTable>
<p:commandButton action="#{myBean.doSth}" .... oncomplete="myTable.filter()"/>