I have a datatable with an input field on each row. I need to know how to get the cost values entered on each row when a save button is pressed?
<p:dataTable value="#{eventCreateEditCostModel.costEntities}" var="eventCost"
rowKey="#{eventCost.eventCostId}"
sortMode="multiple"
resizableColumns="true"
widgetVar="eventCostTable"
rows="10">
<f:facet name="header">
Event Costs Listing
</f:facet>
<p:column headerText="ID">
<h:outputText value="#{eventCost.eventCostId}" />
</p:column>
<p:column headerText="Name">
<h:outputText value="#{eventCost.name}" />
</p:column>
<p:column headerText="Cost">
<pe:inputNumber value="#{eventCost.cost}" decimalPlaces="2" label="Cost"
minValue="0" maxValue="999999999" thousandSeparator="true" title="Cost" symbol="$"/>
</p:column>
</p:dataTable>
Related
I am trying to capture the value of cell in a data table each time the user clicks it and update the same in a textbox. I referred this primefaces showcase url: https://www.primefaces.org/showcase/ui/data/datatable/edit.xhtml
CellEdit event doesn't work for me as I do not want the user to edit the cell and hence have disabled the input text box for the cell.
As there is no event for cell select, how can I make it work using javscript/jquery or anything.
<h:form id="form">
<p:dataTable id="cars2" var="car" value="#{dtEditView.cars2}"
editable="true" editMode="cell" widgetVar="cellCars">
<f:facet name="header">
Cell Editing with Click and RightClick
</f:facet>
<p:ajax event="cellEdit" listener="#{dtEditView.onCellEdit}" />
<p:column headerText="Id">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{car.id}" />
</f:facet>
<f:facet name="input">
<p:inputText id="modelInput" value="#{car.id}" disabled="true"
style="width:96%" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Year">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{car.year}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{car.year}" disabled="true"
style="width:96%" label="Year" />
</f:facet>
</p:cellEditor>
</p:column>
</p:dataTable>
<p:contextMenu for="cars2" widgetVar="cMenu">
<p:menuitem value="Edit Cell" icon="ui-icon-search"
onclick="PF('cellCars').showCellEditor();return false;" />
<p:menuitem value="Hide Menu" icon="ui-icon-close"
onclick="PF('cMenu').hide()" />
</p:contextMenu>
</h:form>
This is where I want the cell values to get updated as soon as the user clicks on any cell. This textarea is present in the same form as the data table.
<p:panel style="width:56%;height:56%;">
<p:inputTextarea id="notesTextArea" value="#{tree.result}"/>
</p:inputTextarea>
</p:panel>
Please help.
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 am using p:dataTable that contains another p:dataTable inside a row expansion.
My problem is that I can't edit the inner table since it's in a p:rowExpansion
Works fine without a p:rowExpansion, will stop where edit icon is not clickable.
<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}" />
</p:column>
<p:column headerText="Year">
<h:outputText value="#{car.year}" />
</p:column>
<p:rowExpansion>
<p:dataTable var="list" value="#{car.list}" editable="true" style="margin-bottom:20px">
<f:facet name="header">
Row Editing
</f:facet>
<p:column headerText="Id">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{list.id}" /></f:facet>
<f:facet name="input"><p:inputText id="modelInput" value="#{list.id}" style="width:100%"/></f:facet>
</p:cellEditor>
</p:column>
<p:column style="width:32px">
<p:rowEditor />
</p:column>
</p:dataTable>
</p:rowExpansion>
</p:dataTable>
</h:form>
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
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