JSF: Empty space caused by rendered attribute - jsf

How can I get rid of the empty space by components not rendered via rendered attribute?
I want to display a list of objects in a dataTable and sort them by a property they have. I do it likes this:
view plaincopy to clipboardprint?
<t:dataTable value="#{someBean.values}" var="value">
<h:column>
<f:facet name="header">
<t:outputText value="X" />
</f:facet>
<h:panelGroup rendered="#{value.property eq 'X'}">
<!-- some stuff -->
</h:panelGroup>
</h:column>
<h:column>
<f:facet name="header">
<t:outputText value="Y" />
</f:facet>
<h:panelGroup rendered="#{value.property eq 'Y'}">
<!-- some stuff -->
</h:panelGroup>
</h:column>
</t:dataTable>
It will display one item every row only, because of the rendered thingy. How can I avoid this? I stumpled upon this also on other occasions...
Thank you!

It is obvious to display one item every row with datatable.
You can better have two different datatables, one rendering for x and other rendering for y and adjust your css accordingly that looks like two column of the same table. Or else using richfaces, <rich:subTable> would help you, such as having two subTable in a single dataTable

Use a single column and render in there.
<t:dataTable value="#{someBean.values}" var="value">
<h:column>
<f:facet name="header">
<t:outputText value="#{value.property}" />
</f:facet>
<h:panelGroup rendered="#{value.property eq 'X'}">
<!-- some stuff -->
</h:panelGroup>
<h:panelGroup rendered="#{value.property eq 'Y'}">
<!-- some stuff -->
</h:panelGroup>
</h:column>
</t:dataTable>

Related

Primefaces table with editable rows generateds duplicate gridcells

Using PF 6.1, I have a Primefaces data table where I need to make certain cells editable. Most things are working fine, but when the page is refreshed, a duplicate empty element is inserted for each cell, and those elements disappear if I edit a row (even if I cancel editing). If I have normally 5 columns, I see 5 with class ui-editable-column and correct content, but when I refresh the page, I see additional 5 with class ui-panelgrid-cell that contain the data, and the original 5 with class ui-editable-column which are empty and make the table misaligned.
<p:panel>
<h:form>
<p:dataTable id="myTable" editable="true"
var="var"
value="#{ManagementBean.values}"
paginator="true"
paginatorPosition="top" rows="25"
paginatorTemplate="..."
tableStyle="table-layout: auto">
<p:ajax event="rowEdit" listener="#{ManagementBean.onRowEdit}" update="myTable"/>
<p:ajax event="rowEditCancel" listener="#{ManagementBean.onRowCancel}" update="myTable"/>
<!-- cells that dont need to be edited, have duplicate input and output fields-->
<p:column headerText="..." sortBy="...">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{var.name}"/></f:facet>
<f:facet name="input"><h:outputText value="#{var.name}"/></f:facet>
</p:cellEditor>
</p:column>
<!-- Example of cell that gets edited -->
<p:column headerText="...">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="..."/>
</f:facet>
<f:facet name="input">
<p:selectCheckboxMenu label="..." value="...">
<f:selectItems value="..." var="..."
itemLabel="..." itemValue="..."/>
</p:selectCheckboxMenu>
</f:facet>
</p:cellEditor>
</p:column>
</p:dataTable>
</h:form>
</p:panel>
</p:panelGrid>
Not sure if this is relevant to the issue OP is facing, but I also encountered duplicated cells and I fixed it by changing:
<p:panelGrid></p:panelGrid>
to
<h:panelGrid></h:panelGrid>
this solves the duplication issue on my end.
Sample of my view page looks like the following:
<h:panelGrid>
<p:column>
<p:row>
<!-- contents... -->
</p:row>
</p:column>
</h:panelGrid>
Might be helpful to future readers.

display images in a datatable according to the value of an attribute in tha database JSF

I want to display icons with colors (green, orange,red) in a column of a jsf datatable showing the urgency of a chirurgical operations. depending on an attribute in the database this icon will be displayed.
hwo can I do this?
Your question doesn't have much details, but you can simply do something like this using the rendered attribute and some state getter/setter on your operation Object.
<h:dataTable value="#{yourBean.list}" var="item">
<h:column>
<f:facet name="header">
Urgency
</f:facet>
<h:graphicImage rendered="#{item.state eq 1}" value="images/icon1.png" />
<h:graphicImage rendered="#{item.state eq 2}" value="images/icon2.png" />
<h:graphicImage rendered="#{item.state eq 3}" value="images/icon3.png" />
</h:column>
</h:dataTable>

How to generate a table with dynamic columns using rich:dataTable?

I have to generate a dynamic table using JSF. I have a arraylist containing headers and another list containing list of strings for holding the actual data - each entry in the main list representing a row. Is it possible to generate a dynamic table using rich:datatable? Is rich:columns an option to be considered?
This code works -
<rich:dataTable
value="#{dataBean.getAttributeDetail().getAttributeRows()}"
var="dataValues" width="100%" border="1">
<rich:columns
value="#{dataBean.getAttributeDetail().getAttributeHeaders()}"
var="columns" index="ind" id="column#{ind}">
<f:facet name="header">
<h:outputText value="#{columns}" />
</f:facet>
<h:outputText value="#{warningValues[ind]} " />
</rich:columns>
</rich:dataTable>
If you are using RichFaces 4, it still does not support "rich:columns", so instead use "c:forEach", like this:
<rich:dataTable value="#{teamHandler.mitarbeiter}" var="m">
<rich:column>
<f:facet name="header">Mitarbeiter</f:facet>
<h:outputText value="#{m.name}" />
</rich:column>
<c:forEach items="#{datumsHandler.span}" var="d">
<rich:column>
<f:facet name="header">
<h:outputText value="d" />
</f:facet>
<h:outputText value="-" />
</rich:column>
</c:forEach>
</rich:dataTable>
More information here.

Dynamic Columns into ui:define

I have a data table in an xhtml with "ui:insert" space...
In another xhtml i use ui:define to add some columns... the problem is that i have dynamic columns to insert..
i've already tryed with a4j:repeat, ui:repeat, c:foreach and rich:columns...
<rich:columns value="#{entity.dadosAdicionais}" var="col" >
<h:outputText value="#{col.valor}" escape="false" />
<h:outputText value="#{col.nome}" />
</rich:columns>
someone knows whats the problem with ui and rich components?
may be you can try like this.
<rich:columns value="#{entity.dadosAdicionais}" var="col" index="index">
<f:facet name="header">
<h:outputText value="#{col.valor}" />
</f:facet>
<h:outputText value="#{model[index].model}" />
</rich:columns>
value= the modelValue for column.

JSF two-colum repeatable table inside panelgrid or equivalent

I have List of items that needs to be displayed as a table. That table need to be repeated as a two-column grid where each cell contains the same table side by side where the right side is a continuation of the right side table, like so:
a|b|c a|b|c
-+-+- -+-+-
1|2|3 5|6|7
x|y|z n|m|o
..... .....
How can I achieve this?
Maybe you could make your managed bean return list of lists and use <ui:repeat> and <h:dataTable>. Each of your internal list is for one table, and contains table rows.
<ui:repeat value="#{bean.tablesLists}" var="tableList">
<h:dataTable var="tableRow" value="#{tableList}">
<h:column>
<f:facet name="header">
<h:outputText value="a" />
</f:facet>
<h:outputText value="#{tableRow.data1}" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="b" />
</f:facet>
<h:outputText value="#{tableRow.data2}" />
</h:column>
</h:dataTable>
</ui:repeat>

Resources