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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.