In my application I have a <p:dataTable> with pagination and LazyDatamodel, and at the bottom of the form I have a CommandButton
named update by which I can save the edited rows.
Problem is :
1. When from one page user want to leave the page with out saving edited rows then I want to propagate the fired page event and stay on the current page
not to leave the page , and if there are no change in the current page at that case user can leave the page.
Code of .xhtml is given below :
<h:form id="userListForm">
<p:panel id="userListPanel" header="#{adbBundle['userList.panel.header']}" toggleable="true">
<p:dataTable var="user" id="userTable" value="#{userDataModel}" lazy="true" paginator="true" rows="25" paginatorPosition="bottom"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="25,50,100" widgetVar="userDataTable" styleClass="userTable" selectionMode="single" >
<f:facet name="header">
<p:outputPanel>
<h:panelGroup layout="block" id="resetFiter" styleClass="dataTableResetFilter">
<p:outputLabel value="#{adbBundle['filter.resetText']}" />
<p:spacer width="10" />
<p:commandButton icon="ui-icon-circle-close" actionListener="#{userListController.resetUserTable}" />
</h:panelGroup>
</p:outputPanel>
</f:facet>
<p:column id="nameColumn" headerText="#{adbBundle['name']}" sortBy="#{user.fullName}" filterBy="#{user.fullName}" styleClass="userName">
<h:outputText value="#{user.fullName}" />
</p:column>
<p:column id="statusColumn" headerText="#{adbBundle['status']}" sortBy="#{user.active}" filterBy="#{user.statusText}" filterMatchMode="exact" styleClass="manageStatus"
filterOptions="#{userListController.statusOptions}" rendered="#{manageUser != null and manageUser != ''}">
<h:panelGroup layout="block">
<p:selectOneRadio id="userRadio" value="#{user.statusText}" styleClass="roleRadio">
<f:selectItem itemLabel="#{adbBundle['active']}" itemValue="Active" />
<f:selectItem itemLabel="#{adbBundle['inactive']}" itemValue="Inactive" />
<p:ajax listener="#{userListController.changeStatus}" />
<f:attribute name="user" value="#{user}" />
</p:selectOneRadio>
</h:panelGroup>
</p:column>
</p:dataTable>
</p:panel>
</h:form>
How it can be implemented? Any pointer will be very helpful to me. Thanks..
Related
I have a Primefaces 5.1 tabular UI on front-end.
Each row has upload button.
When browsed and selected file at a particular row, the upload button becomes active at the last row.
It needs to be active where the file is browsed and selected.
There seems to be a javascript bug while using the file uploader combined with tabular UI.
The upload button works(other than its UI at a different row) and the file is uploaded to the right row(the row that the file was browsed previously).
<h:panelGroup rendered="#{datas.attach_doc_ids==null}">
<p:growl id="uploadMSG" showDetail="true"/>
<p:fileUpload
previewWidth="0"
process="data_tab"
id="file_upper"
styleClass="fileUploadStyle"
onstart="showloader();"
oncomplete="hideloader();"
auto="false"
mode="advanced"
label=""
dragDropSupport="false"
widgetVar="fileUploader"
fileUploadListener="#{datasBean.submitUploadedFile}"
allowTypes="/(\.|\/)(gif|jpe?g|png|pdf|doc|docx|doc)$/"
onerror="console.log('bad file type!');"
update="uploadMSG"/>
<script>
registerRowClickForFileUpload(#{indexvar});
</script>
</h:panelGroup>
Would you know what might be causing this?
Also the datatable definition below:
styleClass="wr_datatable"
id="data_tab"
paginatorPosition="bottom"
var="datas"
value="#{datasBean.listDatas}"
widgetVar="dataTable"
emptyMessage="No data found. Please change the search criteria above."
paginator="true"
selection="#{datasBean.selectedData}"
rowKey="#{datas.data_pk}"
selectionMode="single"
rowIndexVar="indexvar"
draggableColumns="true"
resizableColumns="true"
paginatorTemplate="{CurrentPageReport}
{FirstPageLink}
{PreviousPageLink}
{PageLinks}
{NextPageLink}
{LastPageLink}
{RowsPerPageDropdown}"
rows="10"
rowsPerPageTemplate="5,10,15,20"
Datatable:
<p:column headerText="Status" width="150"
sortBy="#{datas.data_status}">
<p:selectOneMenu value="#{datas.data_status}" onchange="selectme(#{indexvar});">
<f:selectItem itemValue="0" />
<f:selectItem itemValue="1" />
<f:selectItem itemValue="2" />
<f:selectItem itemValue="3" >
<f:selectItem itemValue="5" />
<f:selectItem itemValue="4" />
<p:ajax event="change"
async="true"
process="#form"
global="true"
update="data_tab"
listener="#{datasBean.updatedataStatus}">
<f:setPropertyActionListener value="#{datas}"
target="#{datasBean.selecteddata}"/>
</p:ajax>
</p:selectOneMenu>
</p:column>
<p:column headerText=“name” sortBy="#{datas.name}" ><h:outputText value="#{datas.name}"/></p:column>
<p:column headerText=“dob"><h:outputText value="#{datas.date_of_birth}"/></p:column>
<p:column headerText=“number” sortBy="#{datas.number}" ><h:outputText value="#{datas.number}”/></p:column>
<p:column headerText=“date” sortBy="#{datas.data_datetime}"><h:outputText value="#{datas.data_datetime}"/></p:column>
<p:column headerText=“second name“ sortBy="#{datas.second_name}”>
<h:outputText value="#{datas.second_name}”/>
</p:column>
<p:column headerText="Institution" sortBy="#{datas.institution}">
<h:outputText value="#{datas.institution}"/>
</p:column>
<p:column headerText="Documents" >
<p:graphicImage library="images"
name="attach-doc-exist.png"
title="Open Attachement Document"
onclick="selectme(#{indexvar});
openDocJS(‘ATTACHEMET_DOCUMENT');"
rendered="#{datas.attach_doc_ids!=null}"/>
<h:panelGroup rendered="#{datas.attach_doc_ids==null}">
<p:growl id="uploadMSG" showDetail="true"/>
<p:fileUpload
previewWidth="0"
process="data_tab"
id="file_upper"
styleClass="fileUploadStyle"
onstart="showloader();"
oncomplete="hideloader();"
auto="false"
mode="advanced"
label=""
dragDropSupport="false"
widgetVar="fileUploader"
fileUploadListener="#{datasBean.submitUploadedFile}"
allowTypes="/(\.|\/)(gif|jpe?g|png|pdf|doc|docx|doc)$/"
onerror="console.log('bad file type!');"
update="uploadMSG"/>
<script>
registerRowClickForFileUpload(#{indexvar});
</script>
</h:panelGroup>
<p:remoteCommand name="openMedicalReport"
global="true"
async="true"
actionListener="#{datasBean.manageReport}"/>
<p:remoteCommand name="lockFile"
global="true"
async="true"
actionListener="#{datasBean.manageFilePermission}"/>
</p:column>
<p:column headerText="MOD" width="30">
<h:outputText value="#{datas.data_mods}"/>
</p:column>
<p:ajax event="rowSelect" async="true" global="false">
<f:setPropertyActionListener target="#{datasBean.selecteddata}" value="#{datas}" />
</p:ajax>
</p:dataTable>
Replaced the widgetVar with a dynamically generated value to get unique file upload widget which fixed the issue as suggested by the comments above :)
<h:panelGroup rendered="#{datas.attach_doc_ids==null}">
<p:growl id="uploadMSG" showDetail="true"/>
<p:fileUpload
previewWidth="0"
process="data_tab"
id="file_upper"
styleClass="fileUploadStyle"
onstart="showloader();"
oncomplete="hideloader();"
auto="false"
mode="advanced"
label=""
dragDropSupport="false"
widgetVar="#{datas.data_pk}"
fileUploadListener="#{datasBean.submitUploadedFile}"
allowTypes="/(\.|\/)(gif|jpe?g|png|pdf|doc|docx|doc)$/"
onerror="console.log('bad file type!');"
update="uploadMSG"/>
<script>
registerRowClickForFileUpload(#{indexvar});
</script>
</h:panelGroup>
jsf Code:
<p:dataTable styleClass="patientlistcolumns" id="patienttable" value="#{patientsBean.rows}" var="patientData"
emptyMessage="#{bundle.noRecordsFound}" paginator="true"
paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="20,50,100" rows="20" paginatorPosition="bottom" resizableColumns="true" resortMode="single"
draggableColumns="true" selection="#{patientsBean.selectedPatients}" rowKey="#{patientData.ID}"
paginatorAlwaysVisible="false" sortBy="#{patientsBean.sortField}">
<p:ajax event="sort" listener="#{patientsBean.onSort}"/>
<p:ajax event="rowSelect" listener="#{patientsBean.onRowSelect}" />
<p:ajax event="colReorder" listener="#{patientsBean.onReorder}" />
<p:ajax event="rowSelectCheckbox" update="#form" />
<p:ajax event="rowUnselectCheckbox" update="#form" />
<p:ajax event="toggleSelect" update="#form" />
<p:column selectionMode="multiple" style="width:16px;text-align:center" selectRow="false" resizable="false"
visible="#{patientsBean.multiSelectionEnabled}" />
<p:columns id="patientColumns" var="columnIndex" value="#{patientsBean.columnIndices}"
sortBy="#{patientData.getColumnValue(columnIndex).sortValue}">
<ui:param name="column" value="#{patientData.getColumnValue(columnIndex)}" />
<f:facet name="header">
<h:outputText value="#{patientsBean.getColumnName(columnIndex)}" />
</f:facet>
<p:column rendered="#{column.displayType == 'TEXT' or column.displayType == 'LINK'}">
<h:outputText value="#{column.value}" />
</p:column>
</p:columns>
</p:dataTable>
bean Code:
public void onSort(SortEvent event) {
onSort(event, MY_P);
}
as soon as I add the ajax event, sorting doesn't work anymore. Nothing happens and listener i not called.
Without ajax sorting works fine.
Any solution proposals? Would be great :)
I need to save the sorting, so I really need the ajax listener.
I got it solved by changing the onSort(SortEvent event) to onSort(AjaxBehaviourEvent event) in the backend.
You can cast it to SortEvent later on..
Sad that it's explained different on showCases
I want to implement a sort and/or filter-function for my datatable, and I have done everything the documentation says.
The problem is, that if I klick on a sort-header or fill in a filter, nothing happens (even the ajax-symbol is not shown to i assume that nothing happens at all).
What can be the problem?
I am using:
templates to show the p:datatable
primefaces 5.1
myfaces bundle 2.2.0-20131222.194304-2575.jar
code:
<ui:define name="content">
<h:form>
<p:dataTable var="user" value="#{logbookProjectMembersBean.projectMembers}"
filterDelay="100" widgetVar="userList" emptyMessage="No ProjectMembers found with given criteria"
filteredValue="#{logbookProjectMembersBean.filteredProjectMembers}" rowStyleClass="#{user.enabled? 'row' : 'inactiveUserRow'}" styleClass="userList">
<f:facet name="header">
<p:outputPanel>
<h:outputText>Overview</h:outputText>
<h:outputText value=" - Search:" />
<p:inputText id="globalFilter" onkeyup="PF('userList').filter()" style="width:150px" placeholder="Enter keyword" />
</p:outputPanel>
</f:facet>
<p:column headerText="Name" filterBy="#{user.name}" filterMatchMode="contains" >
<h:outputText value="#{user.name}" />
</p:column>
<p:column headerText="Surname" filterBy="#{user.surname}" filterMatchMode="contains" >
<h:outputText value="#{user.surname}" />
</p:column>
</p:dataTable>
</h:form>
</ui:define>
How can I update a primefaces datatable summary row after submitting a form (dialog)?
The datatable is already updated correctly after some CRUD operation, but the summary row doesn't. I'm using p:remoteCommand to update the summary row when filtering the datatable and it works fine.
The List.xhtml:
<h:form id="TreinamentosListForm">
<p:panel header="#{treinaBundle.ListTreinamentosTitle}" >
<p:remoteCommand name="updateFooterSumCountId" update="datalist:footerSumCountId" />
<p:dataTable id="datalist"
filteredValue="#{treinamentosController.filteredTreinamentos}"
value="#{treinamentosController.items}"
var="item"
rowKey="#{item.id}"
paginator="true"
selectionMode="single"
selection="#{treinamentosController.selected}">
<p:ajax event="filter" process="#form" update="#this" listener="#{treinamentosController.onFilter}" oncomplete="updateFooterSumCountId()" />
<p:ajax event="rowSelect" update=":TreinamentosListForm:createButton :TreinamentosListForm:viewButton :TreinamentosListForm:editButton :TreinamentosListForm:deleteButton :TreinamentosListForm:TreinamentosDataTableContextMenu" listener="#{treinamentosController.resetParents}"/>
<p:ajax event="rowUnselect" update=":TreinamentosListForm:createButton :TreinamentosListForm:viewButton :TreinamentosListForm:editButton :TreinamentosListForm:deleteButton :TreinamentosListForm:TreinamentosDataTableContextMenu" listener="#{treinamentosController.resetParents}"/>
<p:ajax event="rowDblselect" onsuccess="document.getElementById('TreinamentosListForm:viewButton').click();"/>
<p:column sortBy="#{item.id}" filterBy="#{item.id}" style="text-align: right">
<f:facet name="header">
<h:outputText value="#{treinaBundle.ListTreinamentosTitle_id}"/>
</f:facet>
<h:outputText value="#{item.id}"/>
</p:column>
<p:columnGroup id="totalGroup" rendered="true" type="footer" >
<p:row>
<p:column style="text-align:right">
<f:facet name="footer">
<!-- the summary row: -->
<h:outputText id="footerSumCountId" value="#{treinamentosController.sumCountId}" />
</f:facet>
</p:column>
</p:row>
</p:columnGroup>
</p:dataTable>
<f:facet name="header">
<p:commandButton id="createButton" icon="ui-icon-plus" value="#{treinaBundle.Create}" actionListener="#{treinamentosController.prepareCreate}" update=":TreinamentosCreateForm" oncomplete="PF('TreinamentosCreateDialog').show()"/>
<p:commandButton id="viewButton" icon="ui-icon-search" value="#{treinaBundle.View}" update=":TreinamentosViewForm" oncomplete="PF('TreinamentosViewDialog').show()" disabled="#{empty treinamentosController.selected}"/>
<p:commandButton id="editButton" icon="ui-icon-pencil" value="#{treinaBundle.Edit}" update=":TreinamentosEditForm" oncomplete="PF('TreinamentosEditDialog').show()" disabled="#{empty treinamentosController.selected}"/>
<p:commandButton id="deleteButton" icon="ui-icon-trash" value="#{treinaBundle.Delete}" actionListener="#{treinamentosController.delete}" update=":growl,datalist" disabled="#{empty treinamentosController.selected}">
<p:confirm header="#{treinaBundle.ConfirmationHeader}" message="#{treinaBundle.ConfirmDeleteMessage}" icon="ui-icon-alert"/>
</p:commandButton>
</f:facet>
</p:panel>
<ui:include src="/WEB-INF/include/confirmation.xhtml"/>
</h:form>
The Create.xhtml:
<p:dialog id="TreinamentosCreateDlg" widgetVar="TreinamentosCreateDialog" modal="true" resizable="false" appendTo="#(body)" header="#{treinaBundle.CreateTreinamentosTitle}" closeOnEscape="true" >
<h:form id="TreinamentosCreateForm">
<h:panelGroup id="display" rendered="#{treinamentosController.selected != null}">
<p:panelGrid columns="2" columnClasses="column">
<p:outputLabel value="#{treinaBundle.CreateTreinamentosLabel_id}" for="id" />
<p:outputLabel id="id" value="Value automatically generated from database." title="#{treinaBundle.CreateTreinamentosTitle_id}" />
</p:panelGrid>
<p:commandButton actionListener="#{treinamentosController.saveNew}" value="#{treinaBundle.Save}" update="#all,display,:TreinamentosListForm:datalist,:growl" oncomplete="handleSubmit(xhr,status,args,PF('TreinamentosCreateDialog'));">
<p:confirm header="#{treinaBundle.ConfirmationHeader}" message="#{treinaBundle.ConfirmCreateMessage}" icon="ui-icon-alert"/>
</p:commandButton>
<p:commandButton value="#{treinaBundle.Cancel}" onclick="PF('TreinamentosCreateDialog').hide()"/>
</h:panelGroup>
</h:form>
</p:dialog>
Thanks in advance.
After reading the Primefaces 5 documentation, what I did was to invoke (in the Create.xhtml) the Primefaces filter method, referencing through the widgetVar defined in the target datatable (in List.xhtml). Doing so, it triggers my p:remoteCommand, which in its turn, triggers the update for the summary row:
<p:commandButton actionListener="#{treinamentosController.saveNew}" value="#{treinaBundle.Save}" update="#this,display,:TreinamentosListForm:datalist,:growl" oncomplete="handleSubmit(xhr,status,args,PF('TreinamentosCreateDialog'),PF('treinamentosTable').filter());" >
<p:confirm header="#{treinaBundle.ConfirmationHeader}" message="#{treinaBundle.ConfirmCreateMessage}" icon="ui-icon-alert"/>
</p:commandButton>
If someone has a more elegant solution, please share. I had not time
I am using a complex datatable that can sort and filter with various filter. my problem is as I try to use column filter, global filter or sorting datatable pagination suddenly drops to 1 page and it doesn't turn back to first state with pagination. At the beginning I have 92 pages but after filtering/sorting it becomes a datatable with 1 page, even though I clear the textbox of filter it stays as 1 page.
Here is my datatable:
<h:panelGroup rendered="#{projectsController.items.rowCount > 0}">
<p:growl id="growl" />
<p:dataTable id="datatable" value="#{projectsController.items}" var="item" filterEvent="keyup"
paginator="true" rows="5" emptyMessage="Proje bulunamadı." paginatorPosition="bottom"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="4,5,6,7,8,9,10"
filteredValue="#{projectsController.filteredProjects}" style="font-size:11px;font-weight: bold;" widgetVar="proj" >
<f:facet name="header">
<p:outputPanel>
<h:outputText value="Tüm Alanlarda Ara: " />
<p:inputText id="globalFilter" onkeyup="proj.filter();" style="width:150px" />
</p:outputPanel>
</f:facet>
<p:column id="c1" headerText="Proje Adı" width="500" filterStyle="display:none" styleClass="wrap" sortBy="#{item.projectname}" filterBy="#{item.projectname}" filterMatchMode="contains" >
<h:outputText value="#{item.projectname}"/>
</p:column>
<p:column headerText="İlçe" width="150" styleClass="wrap" filterStyle="display:none" filterBy="#{item.district}" sortBy="#{item.district}" filterOptions="#{populator.districtsDD}" filterMatchMode="exact">
<h:outputText value="#{item.district}"/>
</p:column>
<p:column headerText="Sektör" width="150" styleClass="wrap" filterStyle="display:none" filterBy="#{item.sector}" sortBy="#{item.sector}" filterOptions="#{populator.sectorsDD}" filterMatchMode="exact">
<h:outputText value="#{item.sector}"/>
</p:column>
<p:column headerText="Başlangıç Tarihi" width="150" styleClass="wrap" filterStyle="display:none" sortBy="#{item.startdate}" filterBy="#{item.startdate}" filterMatchMode="contains">
<h:outputText value="#{item.startdate}"/>
</p:column>
<p:column headerText="Bitiş Tarihi" width="150" styleClass="wrap" filterStyle="display:none" sortBy="#{item.enddate}" filterBy="#{item.enddate}" filterMatchMode="contains">
<h:outputText value="#{item.enddate}"/>
</p:column>
<p:column headerText="İş Durumu" width="150" styleClass="wrap" filterStyle="display:none" sortBy="#{item.workstatus}" filterBy="#{item.workstatus}" filterMatchMode="contains">
<h:outputText value="#{item.workstatus}"/>
</p:column>
<p:column>
<p:commandButton id="selectButton" update=":display" oncomplete="carDialog.show()" icon="ui-icon-search" title="Detayları Gör">
<f:setPropertyActionListener value="#{item}" target="#{projectsController.selectedP}" />
<p:ajax event="click" update=":viewTabs:tabView:mapTab"/>
</p:commandButton>
<p:commandButton id="editButton" update=":displayEdit" oncomplete="editDialog.show()" icon="ui-icon-pencil" title="Düzenle">
<f:setPropertyActionListener value="#{item}" target="#{projectsController.selectedP}" />
</p:commandButton>
<p:commandButton update="growl" title="Projeyi Sil" id="confirm" action="#{projectsController.destroy}" icon="ui-icon-trash" ajax="false" onclick="if (!confirm('Bu projeyi gerçekten silmek istiyor musunuz?'))
return false;"/>
</p:column>
</p:dataTable>
After filtering or sorting how can I reset my datatable to first state? Thanks in advance.
Primefaces 3.5, Oracle WebLogic 10g, JSF 2.2
Here is the snapshot:
![enter image description here][1]
For those who want to know solution, I have removed both jsf-api.jar and jsf-impl.jar from the libraries instead I have put netbeans' own jsf2.1 library. Basically I have downgraded to jsf2.1. I just suspect if jsf-api and jsf-impl gives me the support of jsf2.2.
Hope this helps to someone.