Is there any simple way to unify look of dataTable inside rowExpansion and main dataTable? Or dou you have any ideas to make it nice?
I want it to looks like hidden rows of the same dataTable.
Here is how it looks by default:
And here is default xhtml code:
<p:dataTable id="cars" var="car" value="#{carBean.someList}">
<f:facet name="header">
List of Cars
</f:facet>
<p:column style="width:16px">
<p:rowToggler />
</p:column>
<p:column headerText="Name">
<h:outputText value="#{car.user.name}" />
</p:column>
<p:columns value="#{scoresBean.otherList}" var="score" columnIndexVar="colIndex">
<f:facet name="header">
<h:outputText value="#{colIndex+1}" />
</f:facet>
<h:outputText value="#{car.scores[colIndex]}" />
</p:columns>
<p:rowExpansion>
<p:dataTable id="cycs" var="cyc" value="#{car.semiScoresList}">
<p:column>
<h:outputText value="#{cyc.partName}" />
</p:column>
<p:columns value="#{scoresBean.otherList}" var="score" columnIndexVar="col">
<h:outputText value="#{cyc.partsScores[col]}" />
</p:columns>
</p:dataTable>
</p:rowExpansion>
</p:dataTable>
You can't, not without a lot of css javascript etc. Use a p:treetable for this
Related
I am trying to show a total value on my dataTable, my code is similar to the primefaces showcase DataTable - SummaryRow and still not working.
<p:dataTable id="dtCaixa" var="list" value="#{caixaMB.list}" paginator="true" rows="7"
paginatorPosition="bottom" rowsPerPageTemplate="10,15,20" liveScroll="true"
paginatorAlwaysVisible="false" emptyMessage="Nenhuma entrada!" liveResize="true">
<p:column headerText="Nome" sortBy="#{list.produtoFK.nome}" style="width:15%;">
<h:outputText value="#{list.produtoFK.nome}" />
</p:column>
<p:column headerText="Funcionário" sortBy="#{list.funcionarioFK.nome}">
<h:outputText value="#{list.funcionarioFK.nome}" />
</p:column>
<p:column headerText="Quantidade" sortBy="#{list.quantidade}">
<h:outputText value="#{list.quantidade}" />
</p:column>
<p:column headerText="Preço" >
<h:outputText value="#{list.produtoFK.preco}" rendered="#{not empty list.produtoFK}">
<f:convertNumber pattern="R$ #0.00" locale="pt_BR"/>
</h:outputText>
</p:column>
<p:column headerText="Total" sortBy="#{list.total}" >
<h:outputText value="#{list.total}" >
<f:convertNumber pattern="R$ #0.00" locale="pt_BR"/>
</h:outputText>
</p:column>
<p:column headerText="Remover" class="centered">
<p:commandButton icon="ui-icon-trash" title="excluir" onclick="PF('confirmaExclusao').show();">
<f:setPropertyActionListener target="#{caixaMB.itemSelecionado}" value="#{list}" />
</p:commandButton>
</p:column>
<p:summaryRow>
<p:column colspan="3" style="text-align:right">
<h:outputText value="Total:" />
</p:column>
<p:column>
<h:outputText value="#{caixaMB.total}">
</h:outputText>
</p:column>
</p:summaryRow>
</p:dataTable>
Does anybody have any idea why is this happening?
You need to sort the dataTable using at least one column if you want to use summaryRow. Check the Primefaces documentation.
E.g. put the attribute sortBy="#{myList.myOrderValue}" on the <p:datatable> tag.
I think what you're trying to achieve is the overall total of the column showing up at the bottom. I was caught out by the summaryRow function too, until I realised it was a grouping function and not a totalling summary. What I did you get around this was for the last column I added some footerText. You will have to calculate your totals manually (iterate over your dataset etc), then you can use something like:
<p:column style="text-align: right" footerText="$ #{invoicesbean.total}">
<f:facet name="header">
<h:outputText value="Amount" />
</f:facet>
........ etc
This worked well for me but YMMV!
I try to make a data table group of PrimeFaces. All goes well. The number of columns is correct, colspan= "#{asignaturaController.nombrePruebasEscritas1.size()} but the name of each test does not show and the object pointed to is full. I tried everything.
Anyone have any idea?
This is my result.
but I need the names of "Pruebas" over the "pruebas"
<h:form id="form-tablapruebasescritas1"
renderer="#{asignaturaController.nombrePruebasEscritas1.size() != 0}">
<p:dataTable var="player"
value="#{asignaturaController.alumnos}"
id="tablapruebasescritas1"
style="margin-top:40px"
sortOrder="ascending">
<f:facet name="header">
1ª Evaluacion
</f:facet>
<p:columnGroup type="header">
<p:row>
<p:column rowspan="2" headerText="Alumno" />
<p:column colspan="#{asignaturaController.nombrePruebasEscritas1.size()}"
headerText="Pruebas" />
</p:row>
<p:row>
<ui:repeat value="#{asignaturaController.nombrePruebasEscritas1}"
var="yea">
<p:column headerText="#{yea}" />
</ui:repeat>
</p:row>
</p:columnGroup>
<p:column>
<h:outputText value="#{player.nombre}" />
</p:column>
<p:columns value="#{asignaturaController.nombrePruebasEscritas1}"
var="year">
<h:outputText value="#{player.getNotaParaTabla(year)}" />
</p:columns>
</p:dataTable>
</h:form>
I try to export some data loded from database.
With the code below, the exported file shows empty values in all columns althought my variable marchebean.selectedmarche.marchetraveau contains values.
Is there anything wrong in my code ?
I'm using Primefaces 4.0 and this is my xhtml page
<h:form id="form">
<p:tabView>
<p:tab title="Visualiser ">
<p:panel>
<h:commandLink >
<p:commandButton value="exporter" />
<p:dataExporter type="xls" target="crs" fileName="prixde" pageOnly="true" />
</h:commandLink>
<p:dataTable id="crs" var="marche" value="#{marchebean.selectedmarche.marchetraveau}" >
<f:facet name="header">
Tbaleau des travaux
</f:facet>
<f:facet name="footer">
<h3> Total HTVA = #{marchebean.calculdetotaltravhtva()}</h3>
<h3> Total TTC = #{marchebean.calculdetotaltravttc()} </h3>
</f:facet>
<p:column headerText="article" width="10%" >
<h:outputText value="#{marche.traveaux.article}"/>
</p:column>
<p:column headerText="Désignation des traveaux" width="40%" >
<h:outputText value="#{marche.traveaux.designation}"/>
<h:outputText value="#{marche.traveaux.paragraph}"/>
</p:column>
<p:column headerText="Unité">
<h:outputText value="#{marche.traveaux.unite}"/>
</p:column>
<p:column headerText="PUHTVA">
<h:outputText value="#{marche.prixunitaire}"/>
</p:column>
<p:column headerText="PUTTC">
<h:outputText value="#{marchebean.calcultva(marche.prixunitaire)}" />
</p:column>
<p:column headerText="Qtt">
<h:outputText value="#{marche.quantite}"/>
</p:column>
<p:column headerText="MHTVA">
<h:outputText value="#{marchebean.calculmonthtva(marche.prixunitaire ,marche.quantite)}" />
</p:column>
<p:column headerText="MTTC">
<h:outputText value="#{marchebean.calculmontttc(marche.prixunitaire ,marche.quantite)}" />
</p:column>
</p:dataTable>
</p:panel>
</p:tab>
</p:tabView>
</h:form>
we need to provide the
<f:facet name="header>
<h:outputText value="aricle"/>
</f:facet>
then exporter will add the headers to your exported document.
<p:column headerText="article" width="10%" >
<f:facet name="header">
<h:outputText value="article" />
</f:facet>
<h:outputText value="#{car.traveaux.article}"/>
</p:column>
This works for me. Maybe it needs validation and that's why it's empty at the end. Adding immediate="true" skips the validation.
<h:form id="confColaForm" .....>
<p:dataTable id="tablacolas" ... >
<f:facet name="header">
<h:commandLink id="exportar" update=":confColaForm:tablacolas" style="align:right;" immediate="true" >
<h:graphicImage library="images" name="iconexcel.png" style="width:30px;height:30px; "
title="Exportar" />
<p:dataExporter type="xls" target="tablacolas" fileName="ConfiguracionColas" />
</h:commandLink>
</f:facet>
...(columns here)
</p:dataTable/>
</h:form>
possible reason may be the "managedbean scope"...
1)change scope to "view"
2)serialize managedbean
this worked for me
What is the filter match mode for global filter (not the individual column filter which defaults to 'startsWith') and how to change it?
The reason I ask is, when I use the global filter with match mode set to 'startsWith' in all my columns, still I get values with 'contains' filter mode. See screenshot below.
I shouldn't be getting the rows other than the first row as I specified 'startsWith' in all columns.
Here is my datatable,
<h:form id="countryTable">
<p:dataTable rowKey="" value="#{countryBean.countriesList}"
var="country" selection="#{countryBean.selectedCountries}"
styleClass="data-table-style" widgetVar="countryTableWVar"
filteredValue="#{countryBean.filteredCountries}">
<f:facet name="header">
<div class="align-left">
<p:outputPanel>
<h:outputText value="Search all fields:" />
<p:inputText id="globalFilter" onkeyup="countryTableWVar.filter();"
style="width:150px" />
</p:outputPanel>
</div>
</f:facet>
<p:column selectionMode="multiple" style="width:2%;" />
<p:column headerText="Numeric Code" filterMatchMode="startsWith"
filterStyle="display:none" filterBy="numericCode">
<h:outputText value="#{country.numericCode}"></h:outputText>
</p:column>
<p:column headerText="Alpha_2 Code" filterMatchMode="startsWith"
filterStyle="display:none" filterBy="alpha2">
<h:outputText value="#{country.alpha2}"></h:outputText>
</p:column>
<p:column headerText="Alpha_3 Code" filterMatchMode="startsWith"
filterStyle="display:none" filterBy="alpha3">
<h:outputText value="#{country.alpha3}"></h:outputText>
</p:column>
<p:column headerText="Name" filterMatchMode="startsWith"
filterStyle="display:none" filterBy="name">
<h:outputText value="#{country.name}"></h:outputText>
</p:column>
</p:dataTable>
</h:form>
How to change the datatable global filter match mode?
If you look at the source code of primefaces
org.primefaces.component.datatable.feature.FilterFeature.java
At line 133 you can see primefaces uses contains method of String
if(columnValue.toLowerCase(filterLocale).contains(globalFilter)){
globalMatch = true;
}
So for now there is no way other than changing code according to your needs and building your own primefaces jar.
From Primefaces 4.0 docs:
Filter located at header is a global one applying on all fields, this is implemented by calling client
side API method called filter(), important part is to specify the id of the input text as globalFilter
which is a reserved identifier for datatable.
The use case would be:
<p:dataTable var="car" value="#{carBean.cars}"
filteredValue="#{carBean.filteredCars}" widgetVar="carsTable">
<f:facet name="header">
<p:outputPanel>
<h:outputText value="Search all fields:" />
<h:inputText id="globalFilter" onkeyup="PF('carsTable').filter()" />
</p:outputPanel>
</f:facet>
<p:column filterBy="model" headerText="Model" filterMatchMode="contains">
<h:outputText value="#{car.model}" />
</p:column>
<p:column filterBy="year" headerText="Year" footerText="startsWith">
<h:outputText value="#{car.year}" />
</p:column>
<p:column filterBy="manufacturer" headerText="Manufacturer"
filterOptions="#{carBean.manufacturerOptions}" filterMatchMode="exact">
<h:outputText value="#{car.manufacturer}" />
</p:column>
<p:column filterBy="color" headerText="Color" filterMatchMode="endsWith">
<h:outputText value="#{car.color}" />
</p:column>
</p:dataTable>
It doesn't tell anything about startsWithor endsWith specific cases for global filter. It could be interesting to open a thread on the issue tracker.
My web page looks like this:
<h:form>
<p:dataTable var="car" value="#{tableBean.carsSmall}">
<f:facet name="header">
Expand rows to see detailed information
</f:facet>
<p:column style="width:16px">
<p:rowToggler />
</p:column>
<p:column style="width:250px">
<f:facet name="header">
Model
</f:facet>
<h:outputText value="#{car.model}" />
</p:column>
<p:column style="width:250px">
<f:facet name="header">
Year
</f:facet>
<h:outputText value="#{car.year}" />
</p:column>
<p:rowExpansion>
<p:fieldset legend="Detail">
<p:dataTable value="#{car.colors}" var="color">
<p:column>
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{color.disable}" />
</f:facet>
<f:facet name="input">
<h:selectBooleanCheckbox value="#{color.disable}" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Edit">
<p:rowEditor />
</p:column>
</p:dataTable>
</p:fieldset>
</p:rowExpansion>
</p:dataTable>
</h:form>
This component is automatically updating the wrong values in database, for example it is setting false for the color.disable property upon just expanding the row.
I am using:
JSF 2.0.9
Primefaces 2.2.1