I have a dataTable in my page, and I need update in single row after any event. For example, one click in button. Please any tips?
I would like to do this using only the features of Primefaces and jsf is this possible?
<h:form id="formDtable" prependId="false">
<p:dataTable id="surveyDt"
value="#{surveyCtr.veicLazyDataModel}"
var="veiculos"
scrollRows="100"
scrollable="true"
liveScroll="true"
scrollHeight="430"
emptyMessage=""
rowKey="#{veiculos.seqID}"
rowIndexVar="row"
lazy="true"
style="font-size: 10px;" >
<f:facet name="header">
<p:outputLabel value="Teste Lazy BD" class="fontTituloTabela"/>
</f:facet>
<p:column headerText="Vehicle ID" >
<h:outputText value="#{veiculos.vehicleID}" />
</p:column>
<p:column headerText="Vehicle Type Code" >
<h:outputText value="#{veiculos.vehicleTypeCode}" />
</p:column>
<p:column headerText="Code" >
<h:outputText value="#{veiculos.fltCode}" />
</p:column>
<p:column headerText="Branch Code" >
<h:outputText value="#{veiculos.branchCode}" />
</p:column>
<p:column headerText="Air Steer" >
<h:outputText value="#{veiculos.AirSteer}" />
</p:column>
<p:column headerText="Rec Air Drive" >
<h:outputText value="#{veiculos.AirDrive}" />
</p:column>
<p:column headerText="Rec Air Free" >
<h:outputText value="#{veiculos.AirFree}" />
</p:column>
<p:column headerText="Rec Air Spare" >
<h:outputText value="#{veiculos.AirSpare}" />
</p:column>
<p:column headerText="Qtde Spare" >
<h:outputText value="#{veiculos.qtdSpares}" />
</p:column>
<p:column headerText="tipo de Controle" >
<h:outputText value="#{veiculos.vehicleMType}" />
</p:column>
<p:column headerText="Update" >
<p:commandButton id="btnupdatet" icon="ui-icon ui-icon-pencil"
update="formDtable:**row(index 0 ????)**">
</p:commandButton>
</p:column>
Related
Users just noticed a big bug in my datatable. When you use a datatable and a column toggler, unselecting a column just shift some rows, but it goes wrong when some cells are empty.
So i tried to refresh my data table with
`<p:columnToggler datasource="datalist" trigger="toggler">
<p:ajax event="toggle" update="datalist"/>
</p:columnToggler>`
but it goes wrong with :
`<p:columns value="#{consultationView.columns}" var="column" columnIndexVar="colIndex"
visible="#{column.property.matches('Z06|Z07|Z09')}" >`
Because if i unselected a visible column it makes it visible again...
here is the full datatable :
`
<f:facet name="header">
<p:commandButton process="listFDP" icon="ui-icon-file-pdf" value="Editer les fiches de paie" action="#{consultationView.printPaieAgent()}" escape="false" ajax="false" onclick="this.form.target='_blank'" />
<p:commandButton id="toggler" type="button" value="Colonnes"
style="float:right" icon="ui-icon-calculator" />
<p:columnToggler datasource="datalist" trigger="toggler">
<p:ajax event="toggle" update="datalist"/>
</p:columnToggler>
</f:facet>
<p:column selectionMode="multiple" style="width:16px;text-align:center" exportable="false" toggleable="false" />
<p:column style="width:60px;text-align:left"
sortBy="#{row.gestion.datePaiement}" headerText="Pér. Paie" groupRow="true" sortOrder="ASCENDING" >
<h:outputText value="#{row.gestion.datePaiement}">
<f:converter binding="#{dateConverterMoisAnnee}" />
</h:outputText>
</p:column>
<p:column style="width:60px;text-align:left"
sortBy="#{row.gestion.dateOrigine}" headerText="Pér. Origine">
<h:outputText value="#{row.gestion.dateOrigine}">
<f:converter binding="#{dateConverterMoisAnnee}" />
</h:outputText>
</p:column>
<p:column headerText="N° cont." style="width:25px;text-align:center;white-space:pre-line;">
<h:outputText value="#{row.gestion.matricule.substring(10)}" />
</p:column>
<p:column headerText="Statut" style="width:150px;text-align:left;white-space:pre-line;" sortBy="#{row.statut}">
<h:outputText value="#{row.statut}" />
</p:column>
<p:columns value="#{consultationView.columns}" var="column" columnIndexVar="colIndex"
visible="#{column.property.matches('Z06|Z07|Z09')}" >
<f:facet name="header">
<h:outputText value="#{column.header}" />
</f:facet>
<h:outputText value="#{row.getRubValue(column.property)}" />
</p:columns>
</p:dataTable>`
Sorry Long post xs
I am new to primefaces. I have one datatable in my application. In that for 3 columns i need to merge some rows. That row count will be generated dynamically based on the data. If I tried to use rowspan in that particular column tag, it additionally created blank cells and the total datatable format is changed. How to do merge that datarows in primefaces. For reference, I am attaching the design and code.
Xhtml code:
<f:facet name="header">
<h:outputText value="Date"></h:outputText>
</f:facet>
<h:outputText value="#{step2table.rs2_date}" />
</p:column>
<p:column style="font-size:12px;width:73px;" >
<f:facet name="header">
<h:outputText value="Slot"></h:outputText>
</f:facet>
<h:outputText value="#{step2table.rs2_slot}" />
</p:column>
<p:column style="font-size:12px;width:73px;" >
<f:facet name="header">
<h:outputText value="Number of Resources Required"></h:outputText>
</f:facet>
<h:outputText value="#{step2table.rs2_noresources}" />
</p:column>
<p:column headerText="Select" id="hSelect" style="font-size:12px;width:60px;">
<p:selectBooleanCheckbox id="Booleanchkbox" onclick="{dtstep2_tab1.select='true'}" >
<p:ajax listener="#{dtstep2_tab1.UpdateStatus}" update="panel1" />
</p:selectBooleanCheckbox>
</p:column>
<p:column style="font-size:12px;width:70px;">
<f:facet name="header">
<h:outputText value="Employee Name"></h:outputText>
</f:facet>
<h:outputText value="#{step2table.rs2_empname}" />
</p:column>
<p:column style="font-size:12px;width:120px;">
<f:facet name="header">
<h:outputText value="Contact Details"></h:outputText>
</f:facet>
<h:outputText value="#{step2table.rs2_contactdet}" />
</p:column>
<p:column style="font-size:12px;width:70px;">
<f:facet name="header">
<h:outputText value="Worked Hrs to Date"></h:outputText>
</f:facet>
<h:outputText value="#{step2table.rs2_totworkhours}" />
</p:column>
<p:column style="font-size:12px;width:50px;">
<f:facet name="header">
<h:outputText value="Agency Recruited"></h:outputText>
</f:facet>
<h:outputText value="#{step2table.rs2_recruitmode}" />
</p:column>
<p:column style="font-size:12px;width:70px;">
<f:facet name="header">
<h:outputText value="Priority"></h:outputText>
</f:facet>
<h:outputText value="#{step2table.rs2_priority}"/>
</p:column>
<p:column style="font-size:12px;width:90px;">
<f:facet name="header">
<h:outputText value="Type of Skill"></h:outputText>
</f:facet>
<h:outputText value="#{step2table.rs2_skilltype}" />
</p:column>
<p:column style="font-size:12px;width:120px;">
<f:facet name="header">
<h:outputText value="Restriction"></h:outputText>
</f:facet>
<h:outputText value="#{step2table.rs2_restriction}" />
</p:column>
<p:column style="font-size:12px;width:150px;">
<f:facet name="header">
<h:outputText value="Rest. Details"></h:outputText>
</f:facet>
<h:outputText value="#{step2table.rs2_restdet}" />
</p:column>
<p:column style="font-size:12px;width:70px;">
<f:facet name="header">
<h:outputText value="B2B Days"></h:outputText>
</f:facet>
<h:outputText value="#{step2table.rs2_b2bdays}" />
</p:column>
<p:column style="font-size:12px;width:70px;">
<f:facet name="header">
<h:outputText value="B2B Hrs"></h:outputText>
</f:facet>
<h:outputText value="#{step2table.rs2_b2bhrs}" />
</p:column>
<p:column headerText="Status" id="hStatus" style="font-size:12px;width:100px;">
<h:selectOneMenu id="cbo" value="#{step2table.rs2_status}" >
<f:selectItem itemLabel="Confirmed" itemValue="Confirmed"></f:selectItem>
<f:selectItem itemLabel="Selected" itemValue="Selected"></f:selectItem>
<f:selectItem itemLabel="Rejected" itemValue="Rejected"></f:selectItem>
</h:selectOneMenu>
</p:column>
<p:column style="font-size:12px;width:150px;">
<f:facet name="header">
<h:outputText value="Comments"></h:outputText>
</f:facet>
<h:inputText value="#{step2table.rs2_comments}" rendered="#{dtstep2_tab1.editable}"/>
</p:column>
Need to merge first three columns "date, Slot, and No of Resources Required" based on the employee column data. Guide me on this. Thanks in advance.
You can use p:summaryRow tag in p:dataTable. Example:
<h:form>
<p:dataTable var="car" value="#{dtSummaryRowView.cars}" sortBy="#{car.brand}">
<p:column headerText="Id" sortBy="#{car.id}">
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Year" sortBy="#{car.year}">
<h:outputText value="#{car.year}" />
</p:column>
<p:column headerText="Brand" sortBy="#{car.brand}">
<h:outputText value="#{car.brand}" />
</p:column>
<p:column headerText="Color" sortBy="#{car.color}">
<h:outputText value="#{car.color}" />
</p:column>
<p:summaryRow>
<p:column colspan="3" style="text-align:right">
<h:outputText value="Total:" />
</p:column>
<p:column>
<h:outputText value="#{dtSummaryRowView.randomPrice}">
<f:convertNumber type="currency" currencySymbol="$" />
</h:outputText>
</p:column>
</p:summaryRow>
</p:dataTable>
</h:form>
For more information, see the primefaces showcase link: http://www.primefaces.org/showcase/ui/data/datatable/summaryRow.xhtml
This is simply not possible in the datatable.
<p:column width="440">
<p:panelGrid rendered="#{someCondition}">
<f:facet name="header">
<p:row>
<p:column width="80"><h:outputText value="#{msg.isin}" /></p:column>
<p:column width="80"><h:outputText value="#{msg.wkn}" /></p:column>
<p:column width="200"><h:outputText value="#{msg.name}" /></p:column>
<p:column width="80"><h:outputText value="#{msg.amount}" /></p:column>
</p:row>
</f:facet>
<p:row>
<p:column><h:outputText value="#{savingsPlanPosition.isin}" /></p:column>
<p:column><h:outputText value="#{savingsPlanPosition.wkn}" /></p:column>
<p:column><h:outputText value="#{savingsPlanPosition.name}" /></p:column>
<p:column><h:outputText value="#{savingsPlanPosition.amount}" /></p:column>
</p:row>
</p:panelGrid>
<p:panelGrid rendered="#{!someCondition}">
<h:link id="savingsPlanPositionDetails${rowIndex}"
title="#{msg.assign_etf}"
outcome="portfolioPositionDetail">
<f:param name="portfolioId"
value="#{savingsPlanController.portfolioId}"></f:param>
<f:param name="portfolioPositionId"
value="#{savingsPlanPosition.portfolioPositionId}"></f:param>
<f:param name="from"
value="savingsPlan"></f:param>
<h:outputText value="#{msg.assign_etf}"/>
</h:link>
</p:panelGrid>
</p:column>
I have applied Global Filtering on a <p:dataTable> but that's not working at all. The getter is being called in the Bean but the <p:dataTable> is not being updated according to the search.
The code is:
<p:dialog id="searchStdentsDlg" header="Search Students" widgetVar="srchStdents" modal="true">
<h:form id="searchStdentsFrm">
<p:dataTable id="srchStdentsTble"
var="student"
value="#{viewStudentsBean.studentsList}"
widgetVar="srchStdentTbl"
emptyMessage="No students found with the given criteria"
filteredValue="#{viewStudentsBean.filteredStudents}">
<f:facet name="header">
<p:outputPanel>
<h:outputText value="Search Students:" />
<p:inputText id="globalFilterStdents" onkeyup="PF('srchStdentTbl').filter()" style="width:200px" placeholder="Enter keyword"/>
</p:outputPanel>
</f:facet>
<p:column id="stdentId" headerText="Id" filterBy="#{student.id}" filterStyle="display:none">
<h:outputText value="#{student.id}" />
</p:column>
<p:column id="stdentFirstName" headerText="Firstname" filterBy="#{student.firstName}" filterStyle="display:none">
<h:outputText value="#{student.firstName}" />
</p:column>
<p:column id="stdentLastname" headerText="Lastname" filterBy="#{student.lastName}" filterStyle="display:none">
<h:outputText value="#{student.lastName}" />
</p:column>
<p:column id="stdentFathername" headerText="Father name" filterBy="#{student.fatherName}" filterStyle="display:none">
<h:outputText value="#{student.fatherName}" />
</p:column>
<p:column id="stdentGender" headerText="Gender" filterBy="#{student.gender}" filterStyle="display:none">
<h:outputText value="#{student.gender}" />
</p:column>
<p:column id="stdentDOB" headerText="Date Of birth" filterBy="#{student.dob}" filterStyle="display:none">
<h:outputText value="#{student.dob}" />
</p:column>
<p:column id="stdentSkype" headerText="Skype/Email" filterBy="#{student.skypeOrEmailId}" filterStyle="display:none">
<h:outputText value="#{student.skypeOrEmailId}" />
</p:column>
<p:column id="stdentPhone" headerText="Phone No" filterBy="#{student.phoneNumber}" filterStyle="display:none">
<h:outputText value="#{student.phoneNumber}" />
</p:column>
<p:column id="stdentAddrs" headerText="Address" filterBy="#{student.address}" filterStyle="display:none">
<h:outputText value="#{student.address}" />
</p:column>
<p:column id="stdentCountry" headerText="Country" filterBy="#{student.country}" filterStyle="display:none">
<h:outputText value="#{student.country}" />
</p:column>
<p:column id="stdentJOD" headerText="Joining Date" filterBy="#{student.dateOfJoining}" filterStyle="display:none">
<h:outputText value="#{student.dateOfJoining}" />
</p:column>
<p:column id="stdentGenralRmrks" headerText="General Remarks" filterBy="#{student.generalRemarks}" filterStyle="display:none">
<h:outputText value="#{student.generalRemarks}" />
</p:column>
</p:dataTable>
</h:form>
</p:dialog>
I have another datatable in which Global Filtering is working absolutely fine.
That code is:
<p:dialog id="searchTchrsDlg" header="Search Teachers" widgetVar="srchTchrs" modal="true">
<h:form id="searchTchrsFrm">
<p:dataTable id="srchTechrsTble"
var="teacher"
value="#{viewTeachersBean.teachersList}"
widgetVar="srchTchrsTbl"
emptyMessage="No Teachers found with the given criteria"
filteredValue="#{viewTeachersBean.filteredTeachers}">
<f:facet name="header">
<p:outputPanel>
<h:outputText value="Search Teachers:" />
<p:inputText id="globalFilter" onkeyup="PF('srchTchrsTbl').filter()" style="width:200px" placeholder="Enter keyword"/>
</p:outputPanel>
</f:facet>
<p:column headerText="Id" filterBy="#{teacher.id}" filterStyle="display:none">
<h:outputText value="#{teacher.id}" />
</p:column>
<p:column headerText="Firstname" filterBy="#{teacher.firstName}" filterStyle="display:none">
<h:outputText value="#{teacher.firstName}" />
</p:column>
<p:column headerText="Lastname" filterBy="#{teacher.lastName}" filterStyle="display:none">
<h:outputText value="#{teacher.lastName}" />
</p:column>
<p:column headerText="Contact No" filterBy="#{teacher.contactNo}" filterStyle="display:none">
<h:outputText value="#{teacher.contactNo}" />
</p:column>
<p:column headerText="Address" filterBy="#{teacher.address}" filterStyle="display:none">
<h:outputText value="#{teacher.address}" />
</p:column>
<p:column headerText="Joining Date" filterBy="#{teacher.joiningDate}" filterStyle="display:none">
<h:outputText value="#{teacher.joiningDate}" />
</p:column>
<p:column headerText="Qualification" filterBy="#{teacher.qualification}" filterStyle="display:none">
<h:outputText value="#{teacher.qualification}" />
</p:column>
<p:column headerText="Subjects" filterBy="#{teacher.subjects}" filterStyle="display:none">
<h:outputText value="#{teacher.subjects}" />
</p:column>
<p:column headerText="Languages" filterBy="#{teacher.languagesProficiency}" filterStyle="display:none">
<h:outputText value="#{teacher.languagesProficiency}" />
</p:column>
<p:column headerText="Total Exp" filterBy="#{teacher.totalExperience}" filterStyle="display:none">
<h:outputText value="#{teacher.totalExperience}" />
</p:column>
<p:column headerText="Salary" filterBy="#{teacher.salary}" filterStyle="display:none">
<h:outputText value="#{teacher.salary}" />
</p:column>
<p:column headerText="Total Leaves" filterBy="#{teacher.totalLeavesLimit}" filterStyle="display:none">
<h:outputText value="#{teacher.totalLeavesLimit}" />
</p:column>
</p:dataTable>
</h:form>
</p:dialog>
I am using PrimeFaces 5.0 and JSF 2.2
PS: There are no exceptions on server side and no errors in browser console.
I would greatly appreciate any help. Thank you.
Below is code of xhtml page,
even i put dialog in a form or not i can see outputtexts below of the page.
I am running into such situation for the first time.
<h:form id="form">
<h:outputLabel value="Welcome #{loginBean.name}"></h:outputLabel>
<p:dataTable id="cars" var="book" value="#{indexView.mediumBooksModel}" paginator="true" rows="10"
selection="#{indexView.selectedBook}" rowKey="">
<f:facet name="header">
RadioButton Based Selection
</f:facet>
<p:column selectionMode="single" style="width:2%" />
<p:column headerText="Title" style="width:25%">
#{book.title}
</p:column>
<p:column headerText="ISBN" style="width:25%">
#{book.isbn}
</p:column>
<p:column headerText="Year" style="width:24%">
#{book.year}
</p:column>
<p:column headerText="Price" style="width:24%">
#{book.price}
</p:column>
<f:facet name="footer">
<p:commandButton id="viewButton" value="View" icon="ui-icon-search"
update=":displaySingle" oncomplete="singleBookDialog.show()"/>
</f:facet>
</p:dataTable>
</h:form>
<p:dialog id="dialog" header="Book Detail" widgetVar="singleBookDialog" resizable="false"
modal="true" >
<h:panelGrid id="displaySingle" columns="2" cellpadding="4">
<f:facet name="header">
<p:graphicImage value="/images/books/#{indexView.selectedBook.image}.jpg"/>
</f:facet>
<h:outputText value="Title:" />
<h:outputText value="#{indexView.selectedBook.title}" style="font-weight:bold"/>
<h:outputText value="Year:" />
<h:outputText value="#{indexView.selectedBook.year}" style="font-weight:bold"/>
<h:outputText value="ISBN:" />
<h:outputText value="#{indexView.selectedBook.isbn}" style="font-weight:bold"/>
<h:outputText value="Price:" />
<h:outputText value="#{indexView.selectedBook.price}" style="font-weight:bold"/>
</h:panelGrid>
</p:dialog>
<h:form id="main_form">
<p:treeTable var="catalog" value="#{catalogSelectBean.root}" lazy="true" selection="#{myView.selectedCatalogNode}" selectionMode="single">
<p:column>
<f:facet name="header">
<h:outputText value="Name" />
</f:facet>
<h:outputText value="#{catalog.name}" />
</p:column>
<p:column width="100">
<f:facet name="header">
<h:outputText value="Desc"/>
</f:facet>
<h:outputText value="#{catalog.description}"/>
</p:column>
</p:treeTable>
<!-- The problem commandButton below-->
<p:commandButton action="#{myView.updateProductListForSelectedCatalog}"
update=":main_form:selectProductTable" value="Bring products">
</p:commandButton>
<!-- The problem commandButton above-->
<p:dataTable id="selectProductTable" var="product" value="#{myView.productDataModel}" paginator="true" selection="#{myView.selectedProduct}" >
<f:facet name="header">
Product Selection
</f:facet>
<p:column selectionMode="single" />
<p:column headerText="name">
<h:outputText value="#{product.name}" />
</p:column>
</p:dataTable>
<p:commandButton action="#{myView.setSelectedProductToForm}"
update="main_form"
value="Set">
</p:commandButton>
</h:form>
the problem commandButton does not fire action, if i had selected something in selectproducttable.