I have a datatable which contains items to be quoted on, and so has columns for quantity, unit price, etc and for which I want to display the total price for the item when the unit price is entered. My code looks like this:
<p:column styleClass="tdasheader" style="text-align:center" width="80" headerText="Unit Price">
<pe:inputNumber id="unitPrice" value="#{quotedItem.quotedPrice}"
minValue="0.01" maxValue="999999999.99" decimalPlaces="2"
style="text-align: right;" size="10">
<p:ajax event="change"
listener="#{supplierQuotationBean.onAmountChange}"
process="#this" update="totalPrice" />
<f:attribute name="quotedItem" value="#{quotedItem}" />
</pe:inputNumber>
</p:column>
<p:column styleClass="tdasheader" style="text-align:center" width="60" headerText="Disc" footerText="Total (inc Dly)">
<pe:inputNumber id="discount" value="#{quotedItem.quotedDiscount}"
minValue="1" maxValue="100" />
</p:column>
<p:column styleClass="tdasheader" width="80" id="totalPriceCol">
<f:facet name="header" style="text-align:center">
<h:outputText value="Total" />
</f:facet>
<p:outputPanel id="totalPrice" style="text-align:right; padding-right:10px">
<h:outputText value="#{quotedItem.totalPrice}">
<f:convertNumber pattern="#,##0.00"/>
</h:outputText>
</p:outputPanel>
<f:facet name="footer">
<p:outputPanel style="text-align:right; padding-right:10px">
<h:outputText value="x#{supplierQuotationBean.quotationTotalAsString}x" />
</p:outputPanel>
</f:facet>
</p:column>
As you may have guessed as I'm posting for help, the ajax update doesn't work - well, actually it works for the first row only. I've tried changing the value in the update parameter to "#{p:component('totalPrice')}" which does the same thing. I've even tried using the listener to do the update as follows:
String clientId = event.getComponent().getClientId();
String totalPriceClientId = clientId.substring(0, clientId.lastIndexOf(":"))+":totalPrice";
RequestContext requestContext = RequestContext.getCurrentInstance();
requestContext.update(totalPriceClientId);
... but this doesn't work either. More significantly I guess, even if I update the whole datatable I still get the same result, but additionally lose the value in the unit price field (even with a process="#this")!
Can anyone please suggest how I might be able to overcome this problem?
I'm using PrimeFaces 5.1.15 and MyFaces 2.2.6.
Many thanks,
Neil
Related
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.
Hello guys I have a problem with my datatable I want to filter it, but if i put something into the text field nothing is shown and also if i clear the input also nothing.
It is possible if i have more than one statment in a column?
So I use primefaces 3.5 and jsf 2.1
Here is the code and if you need more code post an comment. thx
<p:dataTable id="inboxTable" var="task" value="#{taskboxBean.taskboxInboxList}" paginator="true"
widgetVar="inboxTable" rows="10" selection="#{taskboxBean.selectedTaskbox}"
selectionMode="single" rowKey="#{task.ID}" emptyMessage="" paginatorPosition="bottom"
filteredValue="#{taskboxBean.inboxList}">
<p:ajax event="rowSelect" update=":contentForm, :postForm:tabViewPosts:inboxTable"
listener="#{taskboxBean.onTaskboxRowSelect}" />
<f:facet name="header">
<p:outputPanel>
<h:outputText value="Suchen:" />
<p:inputText id="globalFilter" onkeyup="inboxTable.filter()"
style="margin-left:5px;width:150px" />
</p:outputPanel>
</f:facet>
<p:column headerText="Post">
<h:outputText
value="#{task.FROM_USER.FIRST_NAME} #{task.FROM_USER.LAST_NAME} (#{task.FROM_USER.EMAIL})" />
<div align="right">
<h:panelGroup rendered="#{!task.IS_SEEN}" class="fa fa-envelope fa-2x" />
<h:panelGroup rendered="#{task.IS_SEEN}" class="fa fa-envelope-o fa-2x" />
</div>
<h:outputText value="#{task.TASKTYPE.NAME}" />
<br />
<h:outputText value="#{task.CREATE_TIMESTAMP}" />
</p:column>
</p:dataTable>
It is not explicitely written in documentation, but as mentioned on PrimeFaces forum, you need to declare filterBy attribute on columns you want to make searchable via global filter.
It is also suggested here to add filterStyle="display:none" to columns if you don't want a filter to be visible on individual columns.
The example from documentation has filterBy:
<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="carsTable.filter()" />
</p:outputPanel>
</f:facet>
<p:column filterBy="#{car.model}" headerText="Model" filterMatchMode="contains">
<h:outputText value="#{car.model}" />
</p:column>
</p:dataTable>
however, as typical for PrimeFaces documentation, it's not written that it won't work without filterBy.
You must add getter and setter of your taskboxInboxList in the taskboxBean class. But it filters just the first statement placed in the column.
i am currently using a pannel grid to display some data retrived from a database, this is working fine, the layout is not perfect but it displays all of the correct data, however i am wanting to use a datatable for looks more than anything, i have tried to use the outputText from the pannel grid but when i run the page it just says no data found, but on the same page the same code displays the data in the pannel grid
what am i doing wrong ?
this is the code for the working pannel grid
<!-- heading -->
<f:facet name="header">
User Details
</f:facet>
<h:outputText value="#{bundle.ViewUserdetailsLabel_id}"/>
<!-- adding in a small effect here that will fade a message when a user hovers over the id number or username -->
<h:outputLink id="id1" value="#">
<h:outputText id="id" value="#{userdetailsController.selected.id}" title="#{bundle.ViewUserdetailsTitle_id}"/>
</h:outputLink>
<p:tooltip for="id" value="This is your I.D. Number" showEffect="fade" hideEffect="fade" />
<h:outputText value="#{bundle.ViewUserdetailsLabel_username}"/>
<h:outputLink id="username1" value="#">
<h:outputText id="username" value="#{userdetailsController.selected.username}" title="#{bundle.ViewUserdetailsTitle_username}"/>
</h:outputLink>
<p:tooltip for="username" value="Your registered username, this can be changed" showEffect="fade" hideEffect="fade" />
</p:panelGrid>
and here is the not working datatable
<p:dataTable>
<p:column >
<f:facet name="header">
<h:outputText value="{bundle.ViewUserdetailsLabel_id}"/>
</f:facet>
<h:outputText value="{userdetailsController.selected.id}" />
</p:column>
<p:column headerText="username" >
<f:facet name="header">
<h:outputText value="{bundle.ListUserdetailsTitle_username}"/>
</f:facet>
<h:outputText value="{userdetailsController.selected.username}" />
</p:column>
</p:dataTable>
as you can see the outputText values are the same so it should work right ?
thanks
If you happen to have only few hardcoded values to display in a form of a table, then you are better off using <h:panelGrid>. If you however have a list of objects that you want to iterate over and display them quickly then use <p:dataTable>.
Let's say we have a List of employees
<p:dataTable var="employee" value="#{tableBean.employees}">
<p:column headerText="Name">
<h:outputText value="#{employee.name}" />
</p:column>
<p:column headerText="Age">
<h:outputText value="#{employee.age}" />
</p:column>
<p:column headerText="Sex">
<h:outputText value="#{employee.sex}" />
</p:column>
</p:dataTable>
then your table would look like this. var in this case is completely arbitrary, you could for instance call it 'fluffy' if you wanted. There are a lot of settings you can use with dataTable like pagination, export, sorting etc. But I suggest you familiarize yourself with Primefaces showcase
I'm implementing a p:dataTable component, based on the Primefaces Showcase
The code is:
<p:dataTable
id="newDataTable"
editable="true"
editMode="cell"
var="item"
value="#{myBean.listNewDataTable}">
<p:ajax event="cellEdit" listener="#{myBean.newCellEditListener}" update="#this"/>
<p:column width="150" >
<p:cellEditor>
<f:facet name="output">
<h:inputText value="#{item.description}" readonly="true"/>
</f:facet>
<f:facet name="input">
<p:selectOneMenu value="#{item.id}" style="width: 90%;">
<f:selectItems value="#{myBean.productsMap.entrySet()}" var="entry" itemValue="#{entry.key}" itemLabel="#{entry.value}" />
</p:selectOneMenu>
</f:facet>
</p:cellEditor>
</p:column>
-- More Data --
</p:dataTable>
And the backing bean method:
public void newCellEditListener(CellEditEvent event){
... Some work here ...
}
When the value on the editable cell is changed, the p:cellEditor works as expected.
The problem is:
When the value on the editable cell remains unchanged, the p:cellEditor shows the item.id when it should actually be showing the item.description.
Am I missing something obvious? Do I need additional configuration?
I have been googling for a tip or an answer, without success.
UPDATE
Same problem persists on the following code:
<p:column headerText="Money" width="150" >
<p:cellEditor >
<f:facet name="output">
<h:inputText value="#{actual.money}" readonly="true">
<f:convertNumber type="currency" />
</h:inputText>
</f:facet>
<f:facet name="input">
<h:inputText value="#{actual.money}">
</h:inputText>
</f:facet>
</p:cellEditor>
</p:column>
The value on the backing bean its the same for input and output, the difference between each other should be the 'currency' format.
UPDATE
As a workaround I used "p:commandButton" to update the Datatable.
<p:commandButton icon="ui-icon-refresh" update="newDataTable" value="Update" />
The app is running on:
Primefaces 3.5
Primefaces Extensions 0.7.1
Mojarra 2.1.22
Tomcat 7
Thanks for your help.
Kind regards.
Values in output and input should be the same. Try to fix that.
Found the issue reported and fixed on the Primefaces issue site: http://code.google.com/p/primefaces/issues/detail?id=6116
I downloaded the 4.0.RC1 and I do see the issue as being resolved as reported but there are some major differences in 4.0 versus 3.5 so I'm going to be waiting for 3.5.15 to be released.
I'm trying to achieve external filtering using rich:dataTable which has sorting ability.
Here's what I have tried:
<rich:column sortBy="#{data.name}" id="name" filterMethod="#myBean.filter}">
<f:facet name="header">
<h:outputText value="Name" />
<h:inputText value="#{myBean.currentName}"
id="nameFilterInput" onclick="Event.stop(event)" onkeypress="searchNameOnEnter(event, this);">
<a4j:support event="onkeyup" reRender="dataTable , ds"
ignoreDupResponses="true" requestDelay="700" />
</h:inputText>
</f:facet>
<h:outputText value="#{data.name}" />
</rich:column>
Problem: The input text field is overwriting the output text (the header name)
I've tried using h:panelGroup inside the f:facet, but the problem is the sort icon is rendered in the third row seperately.
What am I missing here?
Any help would be great.
Updated: #Christophe Roussy, here's the screenshot
As seen the inputText is overwriting the outputText.
Update 2: I saw a post here: https://community.jboss.org/thread/13046 which explains to use <f:facet name="filter"> for inputText, but that seems to work only for rich:extendedDataTable.
Any way to make it work with rich:dataTable?
The <f:facet> can have only one child. Wrap them in a <h:panelGroup>.
<f:facet name="header">
<h:panelGroup>
<h:outputText ... />
<h:inputText ... />
</h:panelGroup>
</f:facet>