Summary row JSF DataTable - jsf

I have to put in summary many columns summarizing the results,
and in jsf datatable i cant do it, someone know how can i do it? without use primefaces
im got this result
<h:dataTable id="tableResult" value="#{managedBean.dataModel}"
var="obj" rows="15" layout="block" styleClass="table">
<h:column>
<f:facet name="header">Total abandonada</f:facet>
<h:outputText value="#{obj.totalAbandon}">
</h:outputText>
</h:column>
<h:column>
<f:facet name="header">Total</f:facet>
<h:outputText value="#{obj.total}" />
</h:column>
<h:column>
<f:facet name="header"> Atendidas %</f:facet>
<h:outputText value="#{obj.percentualAnswered}%" />
</h:column>
<h:column>
<f:facet name="header">Abandonos %</f:facet>
<h:outputText value="#{obj.percentualAbandon}%" />
</h:column>
<f:facet name="footer">#{obj.suumary}
</f:facet>
</h:dataTable>
to got this result im using
<f:facet name="footer">Total : 2</f:facet>
but i want this result
<tr>
<td>Total : 2</td>
<td>Total answered : 1</td>
<td>Total abandon : 1</td>
</tr>
</tfoot>
i have been tried use 2 footer facet and doesnt work

A plain JSF h:datatable does not have the notion of something like a summary per group of rows built in. So if this is what you want, you need to either switch to e.g. PrimeFaces or add the summary row to your model in the right place and be creative with the CSS for the rows and the content.
If you want a footer for the full datable, the footer facet is the right thing (a summary of the datatable). But in this footer you cannot use the variable you assigned in the var attribute, in your case obj Think of it, which obj should be used? The first? Second? Last? All (each)? So add a field to the managedBean that contains the 'summary' and display that.
<f:facet name="footer">#{manageBean.summary}</f:facet>
If summary is a list, you can iterate over it like mentioned in Iterate over nested List property inside h:datatable
The html you'll end up is
<tfoot>
<tr>
<td>
.... your content of the nested list
</td>
</tr>
</tfoot>
This contnt can be either a table, list, div's or whatever you want.

Related

rich:dataList vertically ordered between 2 columns

I have a dataGrid with 2 columns and a panelGrid inside it that shows the data correctly, but it fills both columns before changing row. I need it to fill first column, with half of list content and only then go to second column and fill it with rest. It is a static list with an even number right now, but it would be best if it could be done with a dynamic sized list with possible odd total number of values. There is an answer here in SO that shows that asp has a repeatcolumn tag that (if i understood correctly) does what i need. Is there a way to do that using richfaces in jsf?
<fieldset>
<legend>Select topics:</legend>
<rich:dataGrid value="#{registerForm.topics}"
var="topic"
columns="2">
<h:panelGrid columns="2" width="430px"
columnClasses="checkTopic,labelTopic" border="0">
<h:selectBooleanCheckbox id="checkTopic"
align="left"
value="#{registerForm.SelectedTopic}"
disabled="#{not registerForm.ActiveRegister}"/>
<h:outputLabel value="#{topic.description}"
for="checkTopic" />
</h:panelGrid>
</rich:dataGrid>
<h:panelGroup rendered="#{empty registerForm.topics}"
style="color: red;">
No topics registered.
</h:panelGroup>
</fieldset
I think I should use ui:repeat, but cant figure out how. I tried using dataList and dividing the list in 2 parts and each shown in a separed row, but didnt look good, also the code feels overcomplicated than it should be.
Also this question is the same as mine, but the answer doesnt correspond exctly to what is needed and i cant comment because 50 reputation.
I need:
Value1 Value3
Value2 Value4
With the code I have(and the answer) the result is:
Value1 Value2
Value3 Value4
Well you can't change the direction of the items, but you can reorder the list so instead of [1,2,3,4,5] you'll have [1,4,2,5,3].
Alternatively you could use the rendering index (rowKeyVar) and have your bean do the math figuring out what item should be displayed (essentially ignoring the list you're passing to the component).
Solved the issue using two DataTables and the "first" attribute. Had to create "getLines" class in backend, that returns listsize/2 (roundup), because I couddnt figure out how to do it in front end (but plan on doing).
<fieldset>
<legend>Select topic:</legend>
<h:panelGrid id="topicspanel" columnClasses="topicscol,topicscol" columns="2" border="0">
<rich:dataTable value="#{registerForm.topics}"
var="topic" columns="1" rows="#{registerForm.lines}"
border="0" id="table1">
<rich:column>
<h:panelGrid columns="2" width="430px"
columnClasses="checkTopic,labelTopic" border="0">
<h:selectBooleanCheckbox id="checkTopicCol1" align="left"
value="#{registerForm.selectedTopic}"
disabled="#{not registerForm.activeRegisters}" />
<h:outputLabel value="#{topic.name}"
for="checkTopicCol1" />
</h:panelGrid>
</rich:column>
</rich:dataTable>
<rich:dataTable value="#{registerForm.topics}"
var="topic" columns="1" rows="#{registerForm.lines}"
border="0" id="table2" first="#{registerForm.lines}"
align="right">
<rich:column>
<h:panelGrid columns="2" width="430px"
columnClasses="checkTopic,labelTopic" border="0">
<h:selectBooleanCheckbox id="checkTopicCol2" align="left"
value="#{registerForm.selectedTopic}"
disabled="#{not registerForm.activeRegisters}" />
<h:outputLabel value="#{topic.name}" for="checkTopicCol2" />
</h:panelGrid>
</rich:column>
</rich:dataTable>
</h:panelGrid>

Get an element from clicking a button in a table

I've got a problem getting a row element from a table in JSF. My goal is to create a table with elements taken from a database (order entity) which has some attributes (name, address, description etc.). All of that with a button on all single rows.
The task of the button is to delete the particular order from the database onClick, so i need to get the id of the order on the particular row.
I found somewhere on the way how to do it using setPropertyActionListener(). The problem is it works only for the first element of the table. If I click on the button assigned to another row but not first, the selectedId of the order is empty (not assigned).
I would really appreciate any help.
<h:form>
<h:dataTable id="orders" value="#{orderController.otherOrders}" var="order" border="2"
cellspacing="1" cellpadding="1">
<h:column>
<c:facet name="header">Name</c:facet>
#{order.name}
</h:column>
<h:column>
<c:facet name="header">Address</c:facet>
#{order.address}
</h:column>
<h:column>
<c:facet name="header">Description</c:facet>
#{order.description}
</h:column>
<h:column>
<c:facet name="header"> </c:facet>
<h:form>
<h:commandButton action="#{orderController.selectOrder}" value="delete">
<f:setPropertyActionListener target="#{orderController.selectedOrderId}" value="#{order.id}" />
</h:commandButton>
</h:form>
</h:column>
</h:dataTable>
</h:form>
In orderController I have function selectOrder() that takes actual selectedOrderId and deletes the order.

Column header not visible when column is conditionally rendered

I have a h:dataTable. I would like to render a row conditionally as follows:
<h:dataTable value="#{myController.entities}" var="entity">
<h:column rendered="#{entity.selected}">
<f:facet name="header">
<h:outputText value="header" />
</f:facet>
<h:outputText value="#{entity.name}" />
</h:column>
</h:dataTable>
In my controller there is variable List <Entity> entities which has getters and setters.
Entity class contains two variables : boolean selected and String name with its getters and setters.
When #{entity.selected} is false, then the row is hidden. When #{entity.selected} is true, then the row is shown, but without header. When I do not use the rendered attribute on the column my header becomes visible.
This question is similar to p:column header facet is not shown when rendered attribute is used on p:column
But none of the solution given works for me and Iam not using primefaces.
Can somebody help me with this? Iam new to JSF and the mistake might be something silly and fix fairly easy, but please help me figure it out. Thanks.
Iam posting the outputs that I get when I tried the above code.
**Header**
name 0
name 1
name 2
name 3
name 4
This output shows the datatable using simply <h:column> without trying to render it conditionally. The header can be seen.
Now when I use conditional rendering:
name 1
name 3
In this output Iam trying to use conditional rendering <h:column rendered="#{entity.selected}">. As you can see that for "name 0", "name 3" and "name 5" the #{entity.selected} is false and hence its not rendering.
This is exactly what I need but only if the header shows up.
I want to render my row invisible where the #{entity.selected} value is false. Also show the column header. Can this be possible?
You need to put the rendered condition on the cell, not on the column.
<h:dataTable value="#{myController.entities}" var="entity">
<h:column>
<f:facet name="header">
<h:outputText value="header" />
</f:facet>
<h:outputText value="#{entity.name}" rendered="#{entity.selected}" />
</h:column>
</h:dataTable>
Or, if you've multiple components or plain text representing cell content, wrap it in a <h:panelGroup> or <ui:fragment>.
<h:dataTable value="#{myController.entities}" var="entity">
<h:column>
<f:facet name="header">
header
</f:facet>
<h:panelGroup rendered="#{entity.selected}">
Blah blah #{entity.name} blah blah
</h:panelGroup>
</h:column>
</h:dataTable>
(note: you don't necessarily need h:outputText over all place, see also Is it suggested to use h:outputText for everything?)
Apply if necessary the following CSS on the table to hide empty cells in case you've applied e.g. borders or bgcolors on table cells:
table {
empty-cells: hide;
}
A completely different alternative is to provide a new model which contains only the desired entities:
<h:dataTable value="#{myController.selectedEntities}" var="entity">
<h:column>
<f:facet name="header">
header
</f:facet>
#{entity.name}
</h:column>
</h:dataTable>
Instead of
...
<f:facet name="header">
<h:outputText value="header" />
</f:facet>
...
try simply
...
<f:facet name="header">Header</f:facet>
...

jsf tabledata dynamic inputtext

I have a List in my backing bean. I want to present it in a table. I want table to have two rows - on left side, values from the list, and on the right side inputBoxes. It's the easy part. Here's my code:
<div class="table">
<h:dataTable id="korekty" styleClass="table table-hover"
value="#{searchBean.listX}" var="v">
<h:column>
<f:facet name="header">XXX</f:facet>
#{v.string}
</h:column>
<h:column>
<f:facet name="header">YYY</f:facet>
<h:inputText styleClass="form-control">
</h:inputText>
</h:column>
</h:dataTable>
</div>
The hard part of my problem is : in those inputtext user might put some numbers. Then after hitting SUBMIT button I want to create a list/map/whatever of inputed values. How can I do that? Thanks for help
First of all, prepare an array, or a list, containing placeholders for the given data alongside the list you've got:
List<String> initialData = ...;//initial data of n size
String[] submittedData = new String[initialData.size()];//array of the same size
Then, bind the <h:dataTable> component to the view to get access to the current row index of the iteration. This way you can finish your job by binding value of input elements to the corresponding objects in the array/list:
<h:dataTable binding="#{table}" ... >
<h:column>
<f:facet name="header">YYY</f:facet>
<h:inputText value="#{searchBean.submittedData[table.rowIndex]}" ... />
</h:column>
</h:dataTable>

JSFpanelGrid dynamically populated

I want to render a panelGrid with a fixed number of columns but elements are loaded from a list. The code should be as follows:
<h:panelGrid columns="3">
<h:outputText value="Header 1"/>
<h:outputText value="Header 2"/>
<h:outputText value="Header 3"/>
<ui:repeat value="#{bean.collection}" var="obj">
<p:panel>
<h:outputText value="#{obj.value}"/>
</p:panel>
</ui:repeat>
</p:panelGrid>
The problem is this code is not rendering as I expected, because all panels are enclosed in the first TD generated by panelGrid, and I want a row break every 3 elements. It seems all repeat block is executed prior the rendering. I'm sure I can obtain this behaviour. What I'm doing wrong?
Thanks
ui:repeat is a component and it is part of the component tree. To create what you are planning try using tag handler c:forEach instead.
<c:forEach items="#{bean.collection}" var="obj">
<p:panel>
<h:outputText value="#{obj.value}"/>
</p:panel>
</c:forEach>

Resources