I am having difficulties sorting a dynamic dataTable
dataTable
<h:form prependId="false" id="Main_Form">
<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" draggableColumns="True">
<p:column sortBy="#{c.machine}" headerText="Machine">
<h:outputText value="#{c.machine}" />
</p:column>
<p:column sortBy="#{c.company}" headerText="Company">
<h:outputText value="#{c.company}" />
</p:column>
<p:column sortBy="#{c.contact}" headerText="Contact">
<h:outputText value="#{c.contact}" />
</p:column>
<p:column sortBy="#{c.phone}" headerText="Phone">
<h:outputText value="#{c.phone}" />
</p:column>
<p:column sortBy="#{c.email}" headerText="Email">
<h:outputText value="#{c.email}" />
</p:column>
<p:column exportable="false" headerText="Modify">
<center>
<p:commandButton id="basic" value="Update"
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" />
</center>
</p:column>
</p:dataTable>
</h:form>
I am using a #SessionScoped bean where databaseSearch.customerList would query the database and populate the dataTable. When I click on the column name to sort, the sort arrow mark changes but the table contents do not sort.
I am using PF 3.4.2
If you are querying your database in your getCustomerList method in every request this will not work. You may try with a local variable
public class DatabaseSearch{
private List<C> customerList;
public List<C> getCustomerList () {
if (customerList == null)
customerList = dao.getcustomerList();
return customerList ;
}
}
Related
I use NetBeans 8.2, GlassFish 5.0, PrimeFaces 5.0.
I created a page with a cell editable data table. When I do the modification on one cell after the ajax event the whole data table replaced by the modified value. Just like the ajax respond does not send back the whole table contents. How can I correct it?
The facelet:
<h:form id="frmDemands">
<p:growl id="msgs" showDetail="true"/>
<div>
<p:dataTable
id="dtblDemands"
value="#{demandUtility.demands}"
var="demand"
editable="true"
editMode="cell"
paginator="true"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="5,10,15">
<p:ajax event="cellEdit" listener="#{applicantBean.onCellEdit}" update=":frmDemands :frmDemands:msgs"/>
<f:facet name="header">Demands</f:facet>
<p:column headerText="ID">
<h:outputText value="#{demand.id}"/>
</p:column>
<p:column headerText="Amount">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{demand.amount}"/></f:facet>
<f:facet name="input"><p:inputText value="#{demand.amount}"/></f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="State">
<h:outputText value="#{demand.state}"/>
</p:column>
<p:column>
<p:commandButton value="Delete" rendered="#{applicantBean.isDemandDeleteable( demand )}" actionListener="#{applicantBean.onDeleteDemand( demand.id )}" update="#form"/>
</p:column>
</p:dataTable>
</div>
</h:form>
The backing bean handle the cellEdit event:
#Named
#RequestScoped
#Data
public class ApplicantBean
{
#Inject
private DemandUtility demandUtility;
...
public void onCellEdit( CellEditEvent event_ )
{
int rowIndex = event_.getRowIndex();
double newValue = (Double) event_.getNewValue();
Demand demand = demandUtility.getDemands().get( rowIndex );
demand.setAmount( newValue );
Event event = new Event( demandUtility.getNextEventId(), new Date(), "Demand (" + demand.getId() + ") modified! New amount: " + newValue );
demandUtility.getEvents().add( event );
}
...
}
When I try to set the #parent value to the update attribute of the ajax event the dataTable disappears as well.
Can somebody help me, please?
Create a which updates you table and change your Scope to #ViewScoped
It worked for me.
<h:form id="frmDemands">
<p:growl id="msgs" showDetail="true"/>
<p:remoteCommand name="rcCellEditUpdate"
update=":frmDemands:dtblDemands :frmDemands:msgs" />
<div>
<p:dataTable
id="dtblDemands"
value="#{demandUtility.demands}"
var="demand"
editable="true"
editMode="cell"
paginator="true"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="5,10,15">
<p:ajax event="cellEdit" listener="#{applicantBean.onCellEdit}" oncomplete="rcCellEditUpdate();"/>
<f:facet name="header">Demands</f:facet>
<p:column headerText="ID">
<h:outputText value="#{demand.id}"/>
</p:column>
<p:column headerText="Amount">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{demand.amount}"/></f:facet>
<f:facet name="input"><p:inputText value="#{demand.amount}"/></f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="State">
<h:outputText value="#{demand.state}"/>
</p:column>
<p:column>
<p:commandButton value="Delete" rendered="#{applicantBean.isDemandDeleteable( demand )}" actionListener="#{applicantBean.onDeleteDemand( demand.id )}" update="#form"/>
</p:column>
</p:dataTable>
</div>
</h:form>
I added a global filter to the primefaces datatable. When I hit enter, the filter text is not being sent to the server for query. My code is as follows :
<h:form id="searchResultsForm">
<p:dataTable value="#{searchController.resultItems}"
var="item" editable="false"
id="searchResultsTable" lazy="true"
tableStyleClass="viewedHistoryTable"
emptyMessage="No items"
widgetVar="searchResultsTableVar"
currentPageReportTemplate="({startRecord} - {endRecord} of {totalRecords})"
paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown} {CurrentPageReport}"
paginator="true" rows="25" rowsPerPageTemplate="10,25,50,100"
rowKey="#{item.abbr}">
<f:facet name="header">
<p:outputPanel>
<h:outputText value="Search:" />
<p:inputText id="globalFilter" onkeyup="if (event.keyCode === 13){PF('searchResultsTableVar').filter();}" style="width:150px" placeholder="Filter results"/>
</p:outputPanel>
</f:facet>
<p:column rendered="true">
<h:outputText value="#{item.title}" />
<br />
<h:outputText value="#{item.abbr}" styleClass="searchResultsAbbr" />
</p:column>
</p:dataTable>
</h:form>
If I remove the if condition to check the event keycode of Enter, the filter string is sent to the server on every key press. Not sure why the client is sending a empty string on enter. Any ideas?
I wanted to share my working code :
<h:form id="searchResultsForm">
<p:dataTable value="#{searchController.resultItems}"
var="item" editable="false"
id="searchResultsTable" lazy="true"
tableStyleClass="viewedHistoryTable"
emptyMessage="No items"
widgetVar="searchResultsTableVar"
currentPageReportTemplate="({startRecord} - {endRecord} of {totalRecords})"
paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown} {CurrentPageReport}"
paginator="true" rows="25" rowsPerPageTemplate="10,25,50,100"
rowKey="#{item.abbr}" selectionMode="single" selection="#{searchController.currItem}">
<f:facet name="header">
<h:panelGroup>
<p:outputPanel style="padding-bottom: 4px;">
<p:inputText id="globalFilter" onchange="PF('searchResultsTableVar').filter();" style="width:60%;" placeholder="Filter results"/>
<p:commandButton id="Search" value="Search" process="#this" update="#this" style="font-size: 0.8em;"/>
</p:outputPanel>
</h:panelGroup>
</f:facet>
<p:column rendered="true">
......
</p:column>
</p:dataTable>
</h:form>
You could just use a jquery attachment so remove the 'onkeyup' altogether.
$(document).ready(function() {
$('#globalFilter').keypress(function(event) {
if ((event.keyCode || event.which) == 13) {
PF('searchResultsTableVar').filter();
}
});
});
Tested here: http://jsfiddle.net/Zcfga/3/
I need to update a tab’s disabled attribute when a user edits a dataTable using rowEditor.
I have a ajax tag in a dataTable listening for event="rowEdit" which calls a backing bean method that sets the tab's disabled attribute to true.
If I reference only the tab group with the tabView id as in update=”:tabView” the tab will update but only the edited row of the dataTable renders with no grid lines. If I reference the tab as in update=”:tabView:tab” IDs, the dataTable renders fine but the tab’s disabled attribute doesn't.
The tab being updated is not in the same tab as the dataTable being edited.
The dataTable is in the rates tab and he tab I'm trying to update is tbVSelRates
<p:tab id="rates" title="Select Rates" >
<p:panelGrid id="pnlMultiDealUpdate" header="Select Product Rates for Multipule Deal Update" style="margin-top:10px; border: 2px" >
<p:row>
<p:column>
<h:form id="frmSRDealRates" method="post" action="">
<p:outputLabel id="lblRateAgreed" for="txtRateAgreed" value="#{msgs['srDeal.rates.agreed']}:"/>
<p:inputText id="txtRateAgreed" value="#{dealManagedBean.txtRateAgreedVal}" style="width:40px;" readonly="#{dealManagedBean.readOnly}"/> %
<p:outputLabel id="lblRateCat" for="pklRateCat" value="#{msgs['srDeal.rates.cat']}:"/>
<p:pickList id="pklRateCat" value="#{dealManagedBean.rateCats}" var="cat" itemLabel="#{cat}" itemValue="#{cat}" disabled="#{dealManagedBean.readOnly}"/>
<p:commandButton id="btnApply" value="#{msgs['srDeal.rates.btn.apply']}" style="width:100px;" disabled="#{dealManagedBean.readOnly}"
actionListener="#{dealManagedBean.applyChangesMultiUpdate}" process="frmSRDealRates" update="productsTable,:tbVUpdateDeals"
/>
<p:commandButton id="btnUndo" value="#{msgs['srDeal.rates.btn.undo']}" style="width:100px;" disabled="#{dealManagedBean.readOnly}"
onstart="return confirm('Are you sure that you want to undo all recent changes?\nDoing so will remove all rates.');"
actionListener="#{dealManagedBean.undoMultiDealRateChanges}" process="frmSRDealRates" update="productsTable" />
<p:dataTable var="pr" value="#{dealManagedBean.products}" filteredValue="#{filteredValueManagedBean.filteredProducts}" paginator="true" rows="10"
id="productsTable" editable="true" rowKey="#{pr.molecule}" paginatorPosition="top"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="10,50, 100, 1000">
<!-- process=":tbVUpdateDeals:frmSRDealRates" -->
<p:ajax event="rowEdit" listener="#{dealManagedBean.applyRowChangesMassUpdate}" update=":tbVUpdateDeals:tbVSelRates" />
<f:facet name="header">
#{msgs['srDeal.rates.prod.header']}
</f:facet>
<p:column headerText="#{msgs['srDeal.rates.prod.cat']}" sortBy="#{pr.category}" filterBy="#{pr.category}" id="category"
filterOptions="#{dealManagedBean.categoryOptions}" filterMatchMode="exact" width="40" filterStyle="width:30px">
<f:facet name="header" >
<h:outputText value="#{msgs['srDeal.rates.prod.cat']}" />
</f:facet>
<h:outputText value="#{pr.category}" />
</p:column>
<p:column headerText="#{msgs['srDeal.rates.prod.molecule']}" sortBy="#{pr.moleculeDescription}" filterBy="#{pr.moleculeDescription}" filterMatchMode="contains" id="molecule"
width="180" filterStyle="width:160px">
<f:facet name="header" >
<h:outputText value="#{msgs['srDeal.rates.prod.molecule']}" />
</f:facet>
<h:outputText value="#{pr.moleculeDescription}" />
</p:column>
<p:column headerText="#{msgs['srDeal.rates.prod.planrate']}" sortBy="#{pr.plannedRate}" id="plannedRateCellEdit" width="60">
<p:cellEditor id="massUpdateRate" >
<f:facet name="output">
<h:outputText value="#{pr.plannedRate}" id="otxtRate">
<f:convertNumber maxFractionDigits="2" minFractionDigits="2"/>
</h:outputText>%
</f:facet>
<f:facet name="input">
<p:inputText value="#{pr.plannedRate}" style="width:100%" label="plndRate" id="txtRate" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column width="35" exportable="false">
<p:rowEditor/>
</p:column>
</p:dataTable>
<p:commandButton id="btnSelectRatesNext" value="Next" actionListener="#{dealManagedBean.goToConfirmRatesTab}" update=":tbVUpdateDeals" />
<p:commandButton value="Cancel" onclick="window.location='salesRepHome.jsf'" style="width:75px;" />
</h:form>
</p:column>
</p:row>
</p:panelGrid>
</p:tab>
<p:tab id="tbVSelRates" title="Confirm Rates" disabled="#{dealManagedBean.conRatesTabDisabled}">
<h:form id="frmSelProdRates" >
<p:panelGrid id="pnlConRates" columns="1">
<p:dataTable var="pr" value="#{dealManagedBean.selectedUpdateProducts}" filteredValue="#{filteredValueManagedBean.filteredProducts}" paginator="true" rows="10"
id="dtSelProductsTable" editable="true" rowKey="#{pr.molecule}" paginatorPosition="top"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="10,50, 100, 1000">
<f:facet name="header">
Confirm Selected Product Rates
</f:facet>
<p:column headerText="#{msgs['srDeal.rates.prod.cat']}" sortBy="#{pr.category}" filterBy="#{pr.category}" id="category"
filterOptions="#{dealManagedBean.categoryOptions}" filterMatchMode="exact" width="40" filterStyle="width:30px">
<f:facet name="header" >
<h:outputText value="#{msgs['srDeal.rates.prod.cat']}" />
</f:facet>
<h:outputText value="#{pr.category}" />
</p:column>
<p:column headerText="#{msgs['srDeal.rates.prod.molecule']}" sortBy="#{pr.moleculeDescription}" filterBy="#{pr.moleculeDescription}" filterMatchMode="contains" id="molecule"
width="180" filterStyle="width:160px">
<f:facet name="header" >
<h:outputText value="#{msgs['srDeal.rates.prod.molecule']}" />
</f:facet>
<h:outputText value="#{pr.moleculeDescription}" />
</p:column>
<p:column headerText="Planned Rate" sortBy="#{pr.plannedRate}" id="plannedRate" width="60">
<f:facet name="header" >
<h:outputText value="Planned Rate" />
</f:facet>
<h:outputText value="#{pr.plannedRate}" id="oTxtPlanedRate">
<f:convertNumber maxFractionDigits="2" minFractionDigits="2"/>
</h:outputText>%
</p:column>
</p:dataTable>
<div style="float:left; margin-top:10px">
<h:commandLink id="exAll" style="margin-left:10px;">
<spacer width="5"/> <h:outputText value="#{msgs['srDeal.bg.bgs.excelall']}" />
<p:dataExporter type="xls" target="dtSelProductsTable" fileName="Product Rates for Mutil Deal Update"/>
</h:commandLink>
</div>
<div style="margin-top:10px; float:right">
<p:commandButton id="btnNextDeals" value="Next" actionListener="#{dealManagedBean.goToSelectDealsTab}" update=":tbVUpdateDeals"/>
</div>
</p:panelGrid>
</h:form>
</p:tab>
PrimeFaces 3.4.2, JBoss 6.0.1 JSF 2.0
Hope this posts right, first time posting a question on StackOverflow
Thanks
public void applyRowChangesMassUpdate(RowEditEvent event){
DataTable dtRates = (DataTable) event.getSource();
Product dtRow = (Product)dtRates.getRowData();
logger.log(Level.FINE, "Molecule: {0}", dtRow.getMolecule());
logger.log(Level.FINE, "Projected Sales: {0}", dtRow.getYtdProjectedSales());
logger.log(Level.FINE, "Planned Rate: {0}", dtRow.getPlannedRate());
if(dtRow.getPlannedRate()!= null && dtRow.getYtdProjectedSales() != null){
dtRow.setPlannedPAProjected(new BigDecimal(0.01 * dtRow.getYtdProjectedSales().doubleValue() * dtRow.getPlannedRate().doubleValue()));
}
logger.log(Level.FINE, "Planned PA Projected: {0}", dtRow.getPlannedPAProjected());
conRatesTabDisabled = true;
tabIndex = 1;
}
The plan is to call applyRowChangesMassUpdate via p:remoteCommand and disable the tab
using the PrimeFaces Javascript API. Here's how it can be done:
Give a widgetVar attribute to your p:dataTable for example dataTableWV.
<p:dataTable widgetVar="dataTableWV" value="..." var="...">
Give a widgetVar also to your p:tabView for example tabViewWV.
<p:tabView widgetVar="tabViewWV">
Add the call to applyRowChangesMassUpdate:
<p:remoteCommand name="applyRowChanges" actionListener="#{dealManagedBean .applyRowChangesMassUpdate}" />
Then use this script:
<script>
$(document).ready(function() {
//bind a function on table value changes
dataTableWV.tbody.context.onchange = function() {
//disable the tab you want by index, assuming the tab
//is the second one, its index will be '1'
tabViewWV.disable(1);
//selects view back to the first tab.
tabViewWV.select(0);
//call the 'remoteCommand' function
applyRowChanges();
}
});
</script>
This way, the rowEdit event is no longer needed, so just remove
<p:ajax event="rowEdit" listener="#{dealManagedBean.applyRowChangesMassUpdate}" update=":tbVUpdateDeals:tbVSelRates" />
Also you can remove
conRatesTabDisabled = true;
tabIndex = 1;
from applyRowChangesMassUpdate method, as the tab gets disabled, and the view is moved to another tab with a client-side code, which is better preferred to server-side code when a matter of view that is needed.
This is my xhtml code containing a datatable using row expansion. Using primefaces 4.0, jsf mozarra 2.2.4
<p:dataTable id="myTable" value="#{myBean.lazyModel}" var="dd"
rowKey="#{dd.hashCode()}" paginator="true"
selection="#{myBean.myModel.selectedRecords}" rows="#{myBean.pageSize}"
paginatorPosition="top"
paginatorTemplate="{CurrentPageReport} {FirstPageLink}
{PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="5,10,20,50,100" widgetVar="dataTable"
currentPageReportTemplate="(Number of Records: {totalRecords})"
lazy="true">
<p:ajax event="rowToggle" listener="#{myBean.onRowToggle}" process="#this"/>
<p:column>
<p:rowToggler />
</p:column>
<p:column selectionMode="multiple" id="select" />
<p:column id="cpn" headerText="#{messages['cpn']}"
filterMatchMode="contains" sortBy="#{dd.cpn}" filterBy="#{dd.cpn}">
<p:inputText id="cpnid" value="#{dd.cpn}" />
</p:column>
<p:column id="user" headerText="#{messages['user']}"
filterMatchMode="contains" sortBy="#{dd.number}"
filterBy="#{dd.number}">
<p:inputText id="addid" value="#{dd.number}" />
</p:column>
:
:
<p:rowExpansion id="rowExpansion">
<p:panelGrid>
<p:row>
<p:column>
<h:outputText value="#{messages['name']}" />
</p:column>
<p:column>
<p:inputText id="name" name="txtBox" value="#{dd.name}" />
</p:column>
<p:column>
<h:outputText value="#{messages['ageGroup']}" />
</p:column>
<p:column id="agecol">
<p:selectOneMenu id="agegrp" value="#{dd.agegrp}">
<f:selectItem itemLabel="21-25" itemValue="21-25" />
<f:selectItem itemLabel="26-30" itemValue="26-30" />
</p:selectOneMenu>
</p:column>
</p:row>
</p:panelGrid>
</p:rowExpansion>
</p:dataTable>
Now I expanded a row and entered name and selected age group and collapsed the row. If I reexpand the same row I couldn't see the values I have entered. When I debugged on collapsing the row The name field and age grp fields setters are called with null parameters.
If I remove the ajax rowToggle event then there is no request is sent to the server on row collapse.
All the examples I found are showing only static data on row expansion.
Is there any way to process data user entered on row collapse?
Any help is highly appreciated.
I had the same problem. Do you use this datatable in a dialog?
Try set dynamic=false in parent dialog.
Dynamic dialog may override your ajax request
Try to add <p:ajax partialSubmit="true" /> inside each input forms
Just remove sortBy from child table.
It's works to me.
Or,
In xhtml file (MasterDataTable):
<p:ajax event="rowToggle" listener="#{superView.ontoggle()}" />
On View file:
public void ontoggle() {
UIComponent table = FacesContext.getCurrentInstance().getViewRoot().findComponent("form:MasterDataTable:ChildDataTable");
if (table != null) {
table.setValueExpression("sortBy", null);
}
}
I have a datatable inside another datatable. The nested table I need to have a multiple selection checkboxes, a button to fire actionlistener and a p:rowToggler to show more data in row. The toggler and commandbutton works fine without the selection column in the table, but when I add this column the commandButton doesn't go to the backing bean, toggler on click doesn't work properly, and setSelected isn't called. Both throw a NP. I'm using 3.4.2 is this feature on newer releases only?
SEVERE: FullAjaxExceptionHandler: An exception occurred during processing JSF ajax request. Error page '/error.xhtml' will be shown.
java.lang.NullPointerException
Table
<p:dataTable id="gro" var="g" value="#{requestBean.main.childRequest}" styleClass="veaGrid"
paginator="true" rows="1" paginatorTemplate="{CurrentPageReport}" >
<p:column>
<p:ajaxStatus >
<f:facet name="start">
<p:graphicImage value="/resources/images/ajaxloadingbar.gif" />
</f:facet>
<f:facet name="complete">
<h:outputText value="" />
</f:facet>
</p:ajaxStatus>
<p:dataTable id="group" var="g2" value="#{g.groups}" rowKey="#{g2.group_name}" selection="#{requestBean.selectedGroups}" >
<p:column selectionMode="multiple" style="width:2%" />
<p:column headerText="#{g.systemCd} - Groups" style="width:25%" >
#{g2.group_name}
</p:column>
<p:column style="width:2%">
View Users <p:rowToggler />
</p:column>
<p:rowExpansion>
<p:dataTable styleClass="veaGrid" var="g3" value="#{g2.group_members}" sortOrder="descending"
paginator="true" rows="10"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
filteredValue="#{requestBean.filteredMembers}">
<p:column filterBy="#{g3.first_name}">
<h:outputText value="#{g3.first_name}"/>
</p:column>
<p:column filterBy="#{g3.last_name}">
<h:outputText value="#{g3.last_name}"/>
</p:column>
<p:column filterBy="#{g3.signon}">
<h:outputText value="#{g3.signon}"/>
</p:column>
</p:dataTable>
</p:rowExpansion>
</p:dataTable>
<center>
<p:commandButton id="continue" value="Continue" actionListener="#{requestBean.saveGroups}"/>
</center>
</p:column>
</p:dataTable>
Found the problem.. I had the requestBean.selectedGroups set to
ArrayList<Group>
I changed the property to
Group[]
and now everything is functional again.