Is it possible to place a button inside of a header of a panel?
What I've read the following should work, but I haven't been able to get it to work.
<p:panel id="panel">
<f:facet name="header">
<p:commandButton value="Click"/>
</f:facet>
<p:panel>
Thanks to all who can help
Replace header to actions
<p:panel>
<f:facet name="actions">
<p:commandButton value="Click"/>
</f:facet>
<p:panel>
<h:form>
<p:panel id="panel">
<f:facet name="header">
<p:commandButton value="Click"/>
</f:facet>
</p:panel>
</h:form>
Try this, in header or footer...
<f:facet name="footer">
<p:commandButton value="Update Total" update="tabla_gral" styleClass="ui-priority-primary" id="ajax2" actionListener="#{consumoMaterial.actualizarSaldos}"/>
</f:facet>
Related
I've made globalFilter in the header of dataTable and then added sorting to columns. But there is a problem: the columns becoming sortable after the first time I use the filter.
So when the program starts user need to clear already empty filter control and after that can sort data in the table.
Please,could someone recommend me how to solve the problem?
I've made filter like in example on PrimeFaces showcase.
<p:dataTable id="dtParkType"
widgetVar="w_dtParkType"
var="parkTypeWeb"
value="#{parkTypeHolder.data}"
selectionMode= "single"
selection="#{parkTypeController.selectedItem}"
rowKey="#{parkTypeWeb.id}"
emptyMessage="#{msg['common.NoValue']}"
rowStyleClass="#{parkTypeWeb.isDeleted? 'colored' : null}"
filteredValue="#{parkTypeController.filteredData}"
scrollable="true"
scrollRows="27"
paginator="true"
rows="27"
resizableColumns="true">
<f:facet name="header">
<div align="right">
<p:outputPanel>
<h:outputText value="#{msg['edit.Search']}"/>
<p:inputText id="globalFilter"
onkeyup="PF('w_dtParkType').filter()"
style="width:150px;margin-left:5px;"
placeholder="#{msg['common.PlaceHolder.KeyWord']}"/>
</p:outputPanel>
</div>
</f:facet>
<p:ajax event="rowSelect"
listener="#{parkTypeController.onRowSelect}"
update=":rightForm:panelbtnParkType"/>
<p:ajax event="rowDblselect"
listener="#{parkTypeController.callEditForm}"
update=":formEditParkType:pnlEditParkType"/>
<p:ajax event="rowUnselect" update=":rightForm:panelbtnParkType"/>
<p:column filterBy="#{parkTypeWeb.longName}"
filterMatchMode="contains"
filterStyle="display:none"
sortBy="#{parkTypeWeb.longName}">
<f:facet name="header">
<h:outputText value="#{msg['column.Title.Full']}"/>
</f:facet>
<h:outputText value="#{parkTypeWeb.longName}"/>
</p:column>
<p:column filterBy="#{parkTypeWeb.shortName}"
filterMatchMode="contains"
filterStyle="display:none"
sortBy="#{parkTypeWeb.shortName}">
<f:facet name="header">
<h:outputText value="#{msg['column.Title.Short']}"/>
</f:facet>
<h:outputText value="#{parkTypeWeb.shortName}" />
</p:column>
</p:dataTable>
I have a DataTable and edit a listing you have to open the Dialog component with the respective values that sends the selected object from theDataTable, but cannot open. I have noticed that the function is REQUIRED = "true" and also that no error is displayed, the only solution that helped me erase the function is REQUIRED.
How do I to bring up the Dialog component without taking the REQUIRED function. An example of the code:
<p:tab id="tab_listar" title="#{msg.labelListar}">
<h:form id="form_mostrar_listado">
<p:dialog id="ModificarLugar" header="Modificar Datos" widgetVar="LugarDialogo2"
modal="false" resizable="false" hideEffect="bounce" showEffect="explode">
<h:panelGrid id="ModificarLugar1" columns="2" cellpadding="5">
<h:outputText value="#{msg.labelCodigo}"/>
<h:outputText value="#{BeanLugar.objLugarMod.cod_lugar}"/>
<h:outputText value="#{msg.labelNombre}"/>
<p:inputText value="#{BeanLugar.objLugarMod.nombre}" id="nombre_lu_mod"
required="true" requiredMessage="#{msg.labelNoVacio}"
validatorMessage="#{msg.labelNoValido}"> </p:inputText>
<h:outputText value="#{msg.labelUbicacion}"/>
<h:panelGroup>
<p:selectOneMenu value="#{BeanLugar.objLugarMod.objPais.cod_pais}"
required="true" id="cod_pais_mod" effect="fade"
requiredMessage="#{msg.labelNoVacio}"
validatorMessage="#{msg.labelNoValido}">
<f:selectItem itemLabel="#{msg.labelEligePais}" itemValue=""/>
<f:selectItems value="#{Pais.cargarComboPais}"/>
</p:selectOneMenu>
<h:message showDetail="false" showSummary="true" for="cod_pais_mod"/>
</h:panelGroup>
<p:commandButton value="Cancelar" actionListener="#{BeanLugar.doiniciarModLugar()}"
update=":LugarTabView:form_mostrar_listado" icon="ui-icon-triangl-1-w"
immediate="true"> </p:commandButton>
<p:commandButton id="btn_actualizar" value="#{msg.btnActualizar}"
update=":LugarTabView:form_mostrar_listado"
actionListener="#{BeanLugar.doActualizaLugar()}"> </p:commandButton>
</h:panelGrid>
</p:dialog>
<p:panel id="datListadoLugar">
<h:outputText value="#{msg.labelListado}"/>
<h:panelGrid columns="3" cellspacing="10" width="100">
<p:commandButton value="#{msg.btnNuevo}" update="form_mostrar_listado"
actionListener="#{BeanLugar.doiniciarListadoLugar()}"/>
<p:commandButton value="#{msg.btnListar}" update="form_mostrar_listado"
actionListener="#{BeanLugar.doListarLugar()}"/>
</h:panelGrid>
<h:panelGrid columns="2" rendered="#{BeanLugar.sizeLugar ne '0'}">
<h:outputText value="#{msg.labelCantidad}"/>
<h:outputText value="#{BeanLugar.arrLugar.size()}"/>
</h:panelGrid>
<h:panelGrid columns="1" rendered="#{BeanLugar.sizeLugar ne '0'}">
<p:dataTable id="resListadoLugar" value="#{BeanLugar.doListarLugar()}" var="ls"
paginator="true" rows="5" paginatorPosition="both" rowsPerPageTemplate="5,10,15">
<p:column>
<f:facet name="header">
<h:outputText value="#{msg.labelLugar}"/>
</f:facet>
<h:outputText value="#{ls.nombre}"/>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="#{msg.labelUbicacion}"/>
</f:facet>
<h:outputText value="#{ls.objPais.nomb_pais}"/>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="#{msg.labelVer}"/>
</f:facet>
<p:commandLink title="Ver" action="#{BeanLugar.mostrarLugar(ls)}"
value="Ver" update=":LugarTabView:form_mostrar_listado:DetalleLugar"
oncomplete="LugarDialogo.show()"> </p:commandLink>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="#{msg.labelEditar}"/>
</f:facet>
<p:commandLink title="Editar" action="#{BeanLugar.editarLugar(ls)}"
value="Editar"
update=":LugarTabView:form_mostrar_listado:ModificarLugar"
oncomplete="LugarDialogo2.show()"> </p:commandLink>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="#{msg.labelEliminar}"/>
</f:facet>
<p:commandLink title="Eliminar" action="#{BeanLugar.eliminarLugar(ls)}"
value="Eliminar"
update=":LugarTabView:form_mostrar_listado:EliminarLugar"
oncomplete="LugarDialogo3.show()"> </p:commandLink>
</p:column>
</p:dataTable>
</h:panelGrid>
</p:panel>
</h:form>
</p:tab>
You are processing all form so JSF tries yo validate all components with required true. You have to tell commandLink what you want to process, for example:
<p:commandLink title="Editar" action="#{BeanLugar.editarLugar(ls)}"
value="Editar"
update=":LugarTabView:form_mostrar_listado:ModificarLugar"
oncomplete="LugarDialogo2.show()"
process="resListadoLugar"> // or the path of the component you want to process
</p:commandLink>
I would like to update a component showing data related to the info displayed in the current page of a primefaces dataTable but I couldn't find any info about intercepting ajax events like
onRowsPerPageChange or onPageChanged.
Is there any way to do that?
Using primefaces 3.0.M3 and Glassfish 3.1
Here is my table. The component I want to update is another dataTable inside the footer of the first one:
<p:dataTable id="timbrature_dt"
value="#{timbratureMBean.dataModel}"
paginator="true"
rows="12"
lazy="true"
paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
rowsPerPageTemplate="6,12,24"
currentPageReportTemplate="#{msgs.pagina} {currentPage} #{msgs.of} {totalPages}"
var="tdett"
widgetVar="ttable"
selection="#{timbratureMBean.selezione}"
selectionMode="single">
<p:ajax event="rowSelect" listener="#{timbratureMBean.onRowSelect}"
update="display :timbrature_dt:giustificativi_dt"
oncomplete="timbDialog.show()" />
<f:facet name="header">
<h:panelGrid columns="1" columnClasses="columnclass-noborders">
<p:outputPanel>
<h:outputText value="#{msgs.dal}: " />
<p:calendar value="#{timbratureMBean.daData}"
pattern="dd/MM/yyyy"
locale="it"
showButtonPanel="true"
navigator="true"
mindate="01/01/2003"
maxdate="#{timbratureMBean.oggi}">
<p:ajax event="dateSelect" listener="#{timbratureMBean.dataChangeListener}"
update="timbrature_dt :timbrature_dt:giustificativi_dt" />
</p:calendar>
<h:outputText value=" #{msgs.al}: " />
<p:calendar value="#{timbratureMBean.aData}"
pattern="dd/MM/yyyy"
locale="it"
showButtonPanel="true"
navigator="true"
mindate="01/01/2003"
maxdate="#{timbratureMBean.oggi}">
<p:ajax event="dateSelect" listener="#{timbratureMBean.dataChangeListener}"
update="timbrature_dt :timbrature_dt:giustificativi_dt" />
</p:calendar>
</p:outputPanel>
<h:outputText value="#{msgs.timbrature}"/>
</h:panelGrid>
</f:facet>
<p:column>
<f:facet name="header">
#{msgs.data_comp}
</f:facet>
<amp:outputData value="#{tdett.sDtComp}"/>
</p:column>
<p:column>
<f:facet name="header">
#{msgs.data_reale}
</f:facet>
<amp:outputData value="#{tdett.sDtTimb}"/>
</p:column>
<p:column>
<f:facet name="header">
#{msgs.terminale}
</f:facet>
<h:outputText value="#{tdett.nrTer}"/>
</p:column>
<p:column filterBy="#{tdett.eU}" filterOptions="#{timbratureMBean.euOptionList}">
<f:facet name="header">
#{msgs.verso}
</f:facet>
<h:panelGroup>
<h:outputText value="#{msgs.entrata}" rendered="#{tdett.eU == 'E'}"/>
<h:outputText value="#{msgs.uscita}" rendered="#{tdett.eU == 'U'}"/>
</h:panelGroup>
</p:column>
<p:column>
<f:facet name="header">
#{msgs.ora_valida}
</f:facet>
<h:outputText value="#{tdett.oraValida}"/>
</p:column>
<p:column>
<f:facet name="header">
#{msgs.ora_reale}
</f:facet>
<h:outputText value="#{tdett.oraReale}"/>
</p:column>
<f:facet name="footer">
<p:dataTable id="giustificativi_dt"
value="#{timbratureMBean.dataList}"
var="gius"
widgetVar="gtable">
<f:facet name="header">
<h:panelGrid columns="1" columnClasses="columnclass-noborders">
<h:outputText value="#{msgs.giustificativi}"/>
</h:panelGrid>
</f:facet>
<p:column>
<f:facet name="header">
#{msgs.voce}
</f:facet>
<h:outputText value="#{gius.voce}"/>
</p:column>
<p:column>
<f:facet name="header">
#{msgs.dal}
</f:facet>
<amp:outputData value="#{gius.sDtIGius}"/>
</p:column>
<p:column>
<f:facet name="header">
#{msgs.al}
</f:facet>
<amp:outputData value="#{gius.sDtFGius}"/>
</p:column>
<p:column>
<f:facet name="header">
#{msgs.nr_giorni}
</f:facet>
<h:outputText value="#{gius.nrGiorni}"/>
</p:column>
<p:column>
<f:facet name="header">
#{msgs.ora_inizio}
</f:facet>
<amp:outputNvl value="#{gius.oraIGius}" nullval="-"/>
</p:column>
<p:column>
<f:facet name="header">
#{msgs.ora_fine}
</f:facet>
<amp:outputNvl value="#{gius.oraFGius}" nullval="-"/>
</p:column>
<p:column>
<f:facet name="header">
#{msgs.nr_ore}
</f:facet>
<amp:outputNvl value="#{gius.nrOre}" nullval="-"/>
</p:column>
<p:column>
<f:facet name="header">
#{msgs.nr_minuti}
</f:facet>
<amp:outputNvl value="#{gius.nrMinuti}" nullval="-"/>
</p:column>
</p:dataTable>
</f:facet>
</p:dataTable>
<p:dialog header="Info" widgetVar="timbDialog" resizable="false"
width="200" showEffect="clip" hideEffect="clip">
<h:panelGrid id="display" columns="2" cellpadding="4">
<h:outputText value="Data:" style="font-weight: bold"/>
<amp:outputData value="#{timbratureMBean.selezione.sDtComp}" />
<h:outputText value="Pausa pranzo ridotta: " style="font-weight: bold"/>
<h:outputText value="#{timbratureMBean.gestPausaPranzo}" />
<h:outputText value="Timbratura non allineata: " style="font-weight: bold"/>
<h:outputText value="#{timbratureMBean.timbNonAllineate}" />
</h:panelGrid>
</p:dialog>
Hou,
there is an event for changing a page, see here
http://cagataycivici.wordpress.com/2011/06/10/datatable-hooks/
<p:datatable paginator="true" rows="10" value="#{bean.items}" var="item">
<p:ajax event="page" listener="#{bean.onPaginate}" update="othercomponents" oncomplete="alert('done')"... />
...
though I am still looking for an event for onChangeRows
but, my current problem is only storing user choices, in fact that page event solves storing both on what page I am and how many rows are selected. If onPaginate implements in this way:
public void onPaginate(PageEvent event){
logger.info("I am on page:"+event.getPage());
logger.info("Rows per page set:"+((org.primefaces.component.datatable.DataTable)event.getSource()).getRows());
}
You can see what page you are on and how many rows are selected. And this event is triggered both when you change a page or change how many rows shown.
My solution is using Primefaces 5.2.x.
I found a pretty easy way to implement this, one of the problems I had with udik's solution was that when the onPaginate() method was called, it didn't have the newest selected value.
So here's what I did to make sure you always had the latest value and could save/load it to the database or a cookie or something (we save to a cookie).
<p:dataTable
.....
paginator="true"
paginatorPosition="bottom"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
currentPageReportTemplate="Total records: {totalRecords}, showing page {currentPage} of {totalPages}"
rowsPerPageTemplate="25,50,100"
rows="#{controller.rowsPerPage}"
.....
>
.....
<p:ajax event="page" oncomplete="rowsPerPageUpdate()" />
.....
</p:dataTable>
<p:remoteCommand name="rowsPerPageUpdate" actionListener="#{controller.onPaginate}" />
and then our controller looks like this:
#Dependent
#Named
public class TableController implements Serializable {
private String rowsPerPage = "25"; //default value
.....
public void onPaginate() {
//save to the cookie
}
.....
}
Basically the magic happens in the remoteCommand, which will fire after the ajax event to insure that controller.rowsPerPage has been properly updated.
Hi
I have made an ajax call using primefaces [p:ajax]. The call to the listener was successful and it returned the required values. To update these properties in xhtml, I have checked the DOM source, to find out the exact ID of the column, using which the column or property would be updated. But, in this case the fields are not getting the values.
The code I used in this case is
<p:dataTable id="table1" var="recepit" rowIndexVar="rowIndex" value="#{ReceiptDetailsBean.iterativeList}" scrollable="true" height="120px" styleClass="leftTable">
<p:column style="background-color: #EFF2F9">
<f:facet name="header">
<h:outputText value="SL NO" />
</f:facet>
<h:outputText value="#{rowIndex+1}" />
</p:column>
<p:column >
<f:facet name="header">
<h:outputText value="Buss." />
</f:facet>
<h:selectOneMenu id="selectOneCb" value="#{ReceiptDetailsBean.bussCode}" >
<f:selectItem itemLabel="V_BUSS_CODE" itemValue=""/>
<f:selectItems value="#{ReceiptDetailsBean.rdetails}" var="model" itemLabel="#{model.buss}" itemValue="#{model.buss}"/>
<p:ajax update="mainForm:table1:#{rowIndex}:receiptCode, mainForm:table1:#{rowIndex}:referenceType" actionListener="#{ReceiptDetailsBean.obtainReceiptDatabasedOnBussCode}" event="change"/>
</h:selectOneMenu>
</p:column>
<p:column id="receiptCodeCol">
<f:facet name="header">
<h:outputText value="Receipt Code" />
</f:facet>
<h:inputText value="#{ReceiptDetailsBean.receiptCode}" id="receiptCode" style="font-family: verdana;font-size: 10px;width:80px;height:15px" />
</p:column>
<p:column id="receiptTypeCol">
<f:facet name="header">
<h:outputText value="Ref Type" />
</f:facet>
<h:inputText value="#{ReceiptDetailsBean.receiptType}" id="referenceType" style="font-family: verdana;font-size: 10px;width:80px;height:15px"/>
</p:column>
</p:dataTable>
</div>
</p:tab>
<p:tab title="Print">
</p:tab>
</p:tabView>
</h:form>
The id from the DOM view source was table1:0:receiptCodeHotKey:receiptCode
What would be the problem for the data to not get populated in the field.
I think the source of the problem is your usage of h:form. You don't need to put it around each single input element. Put one h:form around the datatable and then check again the generated ids.
Then it should be something like (example for first row with rowindex 0):
formId:table1:0:receiptCode
I have tried making an ajax call for a selectOneMenu using JSF 2 and primefaces 2.2. The actionListener method is being called. But the columns I specified in the update attribute are not getting updated. When I refersh the page, I could find the updated values. Please help me out in this.
The code I used was
<h:form id="mainForm" prependId="false">
<p>
<p:tabView>
<p:tab title="Receipt">
<p:dataTable id="table1" var="recepit" rowIndexVar="rowIndex" value="#{ReceiptDetailsBean.iterativeList}" scrollable="true" height="120px" styleClass="leftTable">
<p:column style="background-color: #EFF2F9">
<f:facet name="header">
<h:outputText value="SL NO" />
</f:facet>
<h:outputText value="#{rowIndex+1}" />
</p:column>
<p:column >
<f:facet name="header">
<h:outputText value="Buss." />
</f:facet>
<h:selectOneMenu id="selectOneCb4" value="#{ReceiptDetailsBean.bussCode}" >
<f:selectItem itemLabel="V_BUSS_CODE" itemValue=""/>
<f:selectItems value="#{ReceiptDetailsBean.rdetails}" var="model" itemLabel="#{model.buss}" itemValue="#{model.buss}"/>
<p:ajax update="table1:#{rowIndex}:receiptCode, table1:#{rowIndex}:referenceType" actionListener="#{ReceiptDetailsBean.obtainReceiptDatabasedOnBussCode}" event="change"/>
</h:selectOneMenu>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Receipt Code" />
</f:facet>
<h:inputText value="#{ReceiptDetailsBean.receiptCode}" id="receiptCode" style="font-family: verdana;font-size: 10px;width:80px;height:15px" onkeypress="return showForhotKey(event,'#{rowIndex}');"/>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Ref Type" />
</f:facet>
<h:inputText value="#{ReceiptDetailsBean.receiptType}" id="referenceType" style="font-family: verdana;font-size: 10px;width:80px;height:15px" onkeypress="return showForhotKey(event,'#{rowIndex}');"/>
</p:column>
</p:dataTable>
</p:tab>
<p:tab title="Print">
</p:tab>
Try f:ajax instead of p:ajax and re-render the whole form to get closer to the problem source :
<h:selectOneMenu id="selectOneCb4" value="#{ReceiptDetailsBean.bussCode}" >
<f:selectItem itemLabel="V_BUSS_CODE" itemValue=""/>
<f:selectItems value="#{ReceiptDetailsBean.rdetails}" var="model"
itemLabel="#{model.buss}" itemValue="#{model.buss}"/>
<f:ajax render="#form"
listener="#{ReceiptDetailsBean.obtainReceiptDatabasedOnBussCode}"/>
</h:selectOneMenu>
This should work as stated in my answer to your previous question.
Partial updates of dataTables and ajax updates of dataTables triggered from a component within the dataTable are not working in the 2.2 version of Primefaces. This is a known bug that may have been resolved in version 3.
One suggestion you can try is to use a single form for each dataTable and only update elements from within that one form.