I had a perfectly working accordion with forms and datatables, until I decided to hide some tabs according to a get param. For example /editarContrato.jsf?id=19
Now the rendered tabs appear but empty. I now the boolen is correctly evaluated, and that the tab header is showing when it should, but not the content.
Thanks!
<p:accordionPanel multiple="true" dynamic="true" cache="false"
id="mainAccordion">
<p:tab title="#{msg['label.contrato']}" id="mainTab">
<h:form styleClass="form-horizontal" id="form">
</h:form>
</p:tab>
<p:tab title="Plan de Pagos" rendered="#{not empty param.id}">
<h:form styleClass="form-horizontal" id="formPago">
<p:dataTable id="dataPagos" value="#{pagoMB.dataPagos}" var="pago"
editable="true" ajax="true" royKey="#{pago.id}" scrollable="true"
scrollWidth="100%" rows="10" paginator="true"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="5,10,15" style="table-layout: auto">
<f:facet name="header">Plan de Pagos
</f:facet>
</p:dataTable>
</h:form>
</p:tab>
Try:
<p:tab title="Plan de Pagos" rendered="#{not empty param['id']}">
Param is a map of values and id can't be resolved this way.
Related
How to unselected a selected row on a dataTable primefaces using only a click, the same way that it work to select the row.
This is the code I am using to select and unselect at the moment, but the unselect needs to press the Ctrl or CMD (on mac) key.
<p:dataTable
value="#{adminiClubReconManager.bankMovementsFound}" var="movs"
style="width:90%;border: 0px;"
selection="#{adminiClubReconManager.selectedBankMovement}"
rowKey="#{movs.id}" editable="true" styleClass="rowStyle"
paginator="true" rowsPerPageTemplate="5,10,15" rows="10"
selectionMode="mutiple"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}">
<p:ajax event="rowSelect"
listener="#{adminiClubReconManager.onBankRowSelect()}"
update="#form:reconMessages" />
<p:ajax event="rowUnselect"
listener="#{adminiClubReconManager.onBankRowUnselect()}"
update="#form:reconMessages" />
<p:column
style="background:transparent;border:0px;text-align:left">
<c:facet name="header">
<h:outputText
value="#{msg['admini.common.movement.recon.number']}" />
</c:facet>
<h:outputText value="#{movs.id}"
style="background:transparent;border:0px" />
</p:column>
...
</p:dataTable>
We've 2 possibilities for solve this issue.
First
Create commandButton and call primefaces method unselectAllRows();
<p:dataTable id="dataTableId" var="p" value="#{myBean.dataModel}" paginator="true" rows="50" paginatorPosition="bottom" emptyMessage="Empty results" rowKey="#{p.attribute}" selection="#{myBean.atributeList}" widgetVar="dataTableWidgetVar">`
<p:commandButton widgetVar="buttonClear" value="Clear selection" onclick="dataTableWidgetVar.unselectAllRows();"/>
</p:dataTable>
After the click you have the rows deselected
Second
Via ajaxEvent call primefaces method unselectAllRows();
<p:dataTable id="dataTableId" var="p" value="#{myBean.dataModel}" paginator="true" rows="50" paginatorPosition="bottom" emptyMessage="Empty results" rowKey="#{p.attribute}" selection="#{myBean.atributeList}" widgetVar="dataTableWidgetVar">`
<p:ajax event="page" update="dataTableId" oncomplete="dataTableWidgetVar.unselectAllRows();"/>
...
</p:dataTable>
In this case you selected the data of the first page when you click another page for example page 3, the ajax execute the method
UnselectAllRows (); And you clear you have selected.
For solve this i finded this material at primefaces forum in: https://forum.primefaces.org/viewtopic.php?f=3&t=24144
I use primefaces to display a list in a datatable with pagination.
The layout for the Page DropDown is not correct.
Screenshot:
How can I set this layout?
It now stretches along the whole width of the table. This is not good.
<p:dataTable id="dataTable" value="#{bean.lazyModel}" var="item"
paginator="true"
rows="10"
paginatorTemplate="{CurrentPageReport} {FirstPageLink}
{PreviousPageLink} {PageLinks} {NextPageLink}
{LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="5,10,15,50,100"
lazy="true"
selectionMode="single"
selection="#{orderEntrySearchBacking.selected}"
rowKey="#{item.id}">
<f:facet name="header">
Patients
<p:commandButton id="toggler" type="button" value="Columns"
style="float:right" icon="ui-icon-calculator" />
<p:columnToggler datasource="dataTable" trigger="toggler" />
</f:facet>
<p:column>
<h:outputText value="#{item.name}"/>
</p:column>
<p:column>
<h:outputText value="#{item.date}"/>
</p:column>
....
This problem is related to the {RowsPerPageDropdown}, but I can't get the style correct. Help is appreciated.
That's all folks!
It looks like your <select> element has style width: 100%.
Inspect dropdown and find where style rule come from.
To fix it you should override this rule. One of the ways is to add following style rule to your .css file.
select.ui-paginator-rpp-options{
width:auto;
}
I have nested overlay panels inside nested datatables. In the code below ajax is not working properly. The same ajax call work sometimes and does not work next time. Sometimes it works perfectly and sometimes it does not.
<p:dataTable
id="MultipleDataTable"
var="MultipleDiseasedDetail"
rendered="#{diseasePatientDetailController.radioButtonSelect == 2}"
value="#{diseasePatientDetailController.groupedMultiDiseasedPatientsByDiseaseIdList}"
scrollable="true"
scrollHeight="235"
rows="20"
paginator="true"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="10,20,30"
paginatorPosition="bottom"
style="float:left;width:500px;"
>
<p:column styleClass="DiseaseNameTableColumn" sortBy="#{MultipleDiseasedDetail.disease_Name}">
<f:facet name="header">
<h:outputText value="Diseases"/>
</f:facet>
<h:commandLink id="patient" value="#{MultipleDiseasedDetail.disease_Name}">
<f:param id="diseaseIdParam" name="diseaseIdParam" value="#{MultipleDiseasedDetail.disease_Id}"/>
<f:ajax
listener="#{diseasePatientDetailController.MultiDataTable_RowClickEvent}"
execute ="patient diseaseIdParam"
event="click"
render ="drDiseasesByCountTable"
/>
</h:commandLink>
<p:overlayPanel
id="MultipleDiseasePanel"
appendToBody="true"
for="patient"
hideEffect="fade"
dynamic="true"
style="width:600px"
showCloseIcon="true"
>
<p:dataTable
id="drDiseasesByCountTable"
var="drDiseasesByCount"
value="#{diseasePatientDetailController.groupedMultiDiseasedPatientsByDiseaseGroupList}"
scrollable="true"
scrollHeight="175"
rows="20"
paginator="true"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="10,20,30"
paginatorPosition="bottom"
>
<p:column styleClass="DiseaseNameTableColumn" sortBy="#{drDiseasesByCount.grp_disease_names}">
<f:facet name="header">
<h:outputText value="Diseases"/>
</f:facet>
<h:commandLink id="groupedDiseasesLink" value="#{drDiseasesByCount.grp_disease_names}">
<f:param id="grpDiseaseIdsParam" name="grpDiseaseIdsParam" value="#{drDiseasesByCount.grp_disease_ids}"/>
<f:ajax
listener="#{diseasePatientDetailController.drDiseasesByCountTable_RowClickEvent}"
execute ="groupedDiseasesLink grpDiseaseIdsParam"
event="click"
render="groupedDiseasesPatientsTable"
/>
</h:commandLink>
<p:overlayPanel
id="MultipleDiseasePatientPanel"
appendToBody="true"
for="groupedDiseasesLink"
hideEffect="fade"
dismissable="false"
showCloseIcon="true"
dynamic="true"
style="width:600px">
<p:dataTable
id="groupedDiseasesPatientsTable"
var="drGroupPatient"
value="#{diseasePatientDetailController.multiPatientsByGroupDiseaseIDList}"
scrollable="true"
scrollHeight="150"
rows="20"
paginator="true"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="10,20,30"
paginatorPosition="bottom"
>
<p:column styleClass="DiseaseNameTableColumn" sortBy="#{drGroupPatient.patientName}">
<f:facet name="header">
<h:outputText value="Patient"/>
</f:facet>
<h:outputLink value="#{drGroupPatient.patientDashboardUrl}">
<h:outputText id="patient" value="#{drGroupPatient.patientName}" />
</h:outputLink>
</p:column>
</p:dataTable>
</p:overlayPanel>
</p:column>
</p:dataTable>
</p:overlayPanel>
</p:column>
</p:dataTable>
Am I doing anything wrong with the ajax call. I have well tested my backend controllers. They are working fine. Is it not a good practice to work with overlaypanel with nested datatables.
Thank you for your precious time.
For the complete answer, your f:ajax should go from
<f:ajax
listener="#{diseasePatientDetailController.MultiDataTable_RowClickEvent}"
execute ="patient diseaseIdParam"
event="click"
render ="drDiseasesByCountTable"/>
to
<p:ajax
listener="#{diseasePatientDetailController.MultiDataTable_RowClickEvent}"
process="patient diseaseIdParam"
event="click"
update="drDiseasesByCountTable"/>
I am unable to update input text with the globalFilter data.
I can see the globalFilter value in the bean and I also check with Firebug that I am using the correct id but still the play value is empty.
<p:dataTable id="osTable"
var="object"
value="#{bean.lazyModel}"
selection="#{bean.selectedObject}"
selectionMode="single"
rowKey="#{object.ID}"
paginator="true"
paginatorPosition="bottom"
paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
rowsPerPageTemplate="5,10,15"
rows="10"
widgetVar="tableWidgetVar">
<p:ajax event="filter" listener="#{bean.onFilter}" update="osTable:play"/>
<f:facet name="header">
<p:outputPanel id="panel" style="float: left">
<h:panelGrid columns="3">
<p:inputText id="globalFilter" onkeypress="if (event.keyCode == 13) {tableWidgetVar.filter()}" style="width: 100px"/>
<p:commandButton value="Clear Filter" ajax="true" action="#{bean.update}" onclick="document.getElementById('osTable:globalFilter').value = ''"/>
</h:panelGrid>
</p:outputPanel>
<h:inputText id="play" value="#{bean.filter}"/>
</f:facet>
Any idea why ?
Thanks
I have the following requirement:
In case the user push one of the paginator buttons and there is a value in the globalFilter inputText then the value should be deleted.
This is the table (lazy loading):
<p:dataTable id="osTable"
var="os"
value="#{bean.lazyModel}"
selection="#{bean.selectedObjectSet}"
selectionMode="single"
rowKey="#{os.ID}"
paginator="true"
paginatorPosition="bottom"
paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
rowsPerPageTemplate="5,10,15"
rows="10"
widgetVar="table">
<f:facet name="header">
<p:outputPanel style="float: right">
<h:outputText value="Search all fields:" />
<p:inputText id="globalFilter"
value="#{bean.find}"
onkeypress="if (event.keyCode == 13) {table.filter()}"
style="width:150px">
</p:inputText>
</p:outputPanel>
</f:facet>
I guess I need to do that via javascript but I don’t know how to implement this kind of functionality.
try this :
<p:ajax event="page" oncomplete="jQuery('#yourFormID\\:yourDataTableID\\:globalFilter').val('')"/>
this should clean the filter on pagination complete....