I want to add one row(hard coding) in the beginning of both columns. Can someone help me on how to implement it?
I am new to JSF so unable to get it.
<p:dataTable var="DataTableValue" value="#{showTableBean.list}">
<p:column headerText="Attribute" >
<h:outputText value="#{DataTableValue.attribute}" />
</p:column>
<p:column headerText="Vehicle Data">
<h:outputText value="#{DataTableValue.value}" />
</p:column>
</p:dataTable>
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!
In mkyong example, they show How To Display DataTable Row Numbers In JSF. They use javax.faces.model.DataModel to get row index without using backing bean value. How to achieve this by using primfaces p:dataTable. Thanks.
In primefaces p:datatable component, the component has rowIndexVar attribute, which is used to iterate to refer each row index. Thus, you can do like my example below
<p:dataTable
var="cmr01Forms"
value="#{cmr01Bean.cmr01Forms}"
rowIndexVar="index">
<p:column>
<f:facet name="header">
<h:outputText value="index" />
</f:facet>
<h:outputText
value="#{index + 1}" />
</p:column>
</p:dataTable>
***
you can use rowindex. rowIndexVar="rowIndex". it starts with 0 so you
ve to plus 1 every row
<p:dataTable var="kat" value="#{kategoriBean.kategoriler}" rowIndexVar="rowIndex">
<!-- <p:column headerText="Kategori Id"> -->
<!-- <h:outputText value="#{kat.Id}" /> -->
<!-- </p:column> -->
<p:column headerText="NO">
<h:outputText value="#{rowIndex+1}"></h:outputText>
</p:column>
<p:column headerText="Kategori Adı">
<h:outputText value="#{kat.kategoriAdi}" />
</p:column>
<p:column>
<h:outputText value="#{kat.kategoriKisaAciklama}"></h:outputText>
</p:column>
</p:dataTable>
Given the code below (taken from the PrimeFaces ShowCase), what is the best way to change the functionality so that the text in the second column - <h:outputText value="#{car.id}" /> - acts as a link to expand/contract the row (rather than the <p:rowToggler> image)?
Not sure how easy this is/should be, but I'm pretty new to PrimeFaces and unsure of how this could be done. I've looked through the documentation and the PrimeFaces ShowCase), (and played with similar code for a few hours), but I've been unable to get it done.
ShowCase code:
<h:form>
<p:dataTable var="car" value="#{dtBasicView.cars}">
<f:facet name="header">
Expand rows to see detailed information
</f:facet>
<p:column style="width:16px">
<p:rowToggler />
</p:column>
<p:column headerText="Id">
<h:outputText value="#{car.id}" /> <!-- This text needs to be a link that expands the row -->
</p:column>
<p:column headerText="Year">
<h:outputText value="#{car.year}" />
</p:column>
<p:rowExpansion>
<p:panelGrid columns="2" columnClasses="label,value" style="width:300px">
<f:facet name="header">
<p:graphicImage name="demo/images/car/#{car.brand}-big.gif"/>
</f:facet>
<h:outputText value="Id:" />
<h:outputText value="#{car.id}" />
<h:outputText value="Year" />
<h:outputText value="#{car.year}" />
<h:outputText value="Color:" />
<h:outputText value="#{car.color}" style="color:#{car.color}"/>
<h:outputText value="Price" />
<h:outputText value="$#{car.price}" />
</p:panelGrid>
</p:rowExpansion>
</p:dataTable>
</h:form>
Edit - Found a simple solution, but not sure it's the most elegant. Any reason not to use this?
<p:column style="display:none !important">
<p:rowToggler />
</p:column>
<p:column>
<h:outputLink value="#">#{car.id}</h:outputLink>
</p:column>`
The default PrimeFaces configuration doesn't allow for anything else than a <p:rowToggler /> to toggle a <p:rowExpansion>.
One solution could be using some custom JS functions to add/remove CSS classes on generated HTML elements.
The other solution can be found here : http://forum.primefaces.org/viewtopic.php?f=3&t=11308&p=55114#p55114. It's about modifying PrimeFaces sources to match your needs.
There is a easy way to do that. Create a link in a div and modify the class of the div with "ui-row-toggler" which you can get from rowToggler html source. e.g.
<div class="ui-row-toggler">Test</div>
The reason you can do that is because if you check the html source for primefaces row toggler, you can find it is
<div class="ui-row-toggler ui-icon ui-icon-circle-triangle-e"></div>
So the only thing you need to do is putting the same class to your customized div which has a link inside.
Hi i am adding a textbox in a datatable where the user will input data in each row. I need help on how to save the data...because right now it's saving only the last row. Please see code below, can someone help on this? I think there should be some sort of array but i dont know if it is possible to store value in array using el expression. I implemented a nested datatable since i want the data to be side by side. If you have a better idea other than using datatable , I would be glad if you could share it and give proper instruction on how to proceed. ( but it should be side by side)
Thanks in advance
<p:dataTable id="dta" value="#{MyCarComponent.model}" var="cur" rows="15" >
<p:column>
<f:facet name="header">
<h:outputText value="Model:" />
</f:facet>
<h:outputText value="#{current.cptModel}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Type:" />
</f:facet>
<p:dataTable id="dta1" value="#{cur.type}" var="curType" rows="15" >
<p:column>
<h:outputText value="#{curType.cptType}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Origin:" />
</f:facet>
<h:form>
<p:dataTable id="dta3" value="#{curType.origins}" var="curOrigin" rows="15" >
<p:column>
<h:outputText value="#{curOrigin.origin}" />
</p:column>
<p:column>
<h:inputText
value="#{MyCarComponent.origindetails.country}"/>
</p:column>
</p:dataTable>
</h:form>
</p:column>
</p:dataTable>
</p:column>
<f:facet name="footer">
<p:commandButton image="save" ajax="false" value="Save" action=" #. {Mycar.saveMyCar(curOrigin.origin,MyCarComponent.origindetails)}" />
</f:facet>
You're currently binding the input field of all rows to one and same bean property. So when JSF processes the form submit in the same sequence as the component tree, the value of each input field will be set in this one and same property. Of course the property will end up being the one of the last row.
You just need to bind the value of the input field to the currently iterated row, the #{curOrigin}. E.g.
<h:inputText value="#{curOrigin.country}" />
Just create the property of there if it doesn't exist yet.
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.