I want to create a 2D Datatable Matrix with Primefaces.
I need to have fix columns and rows.
So far I'm here:
But that's not what I exactly want.
I want these kind:
My code looks like this one:
<p:dataTable value="#{testBean.zeilen}" var="zeile" style="width:75%;" editable="true" editMode="cell">
<p:column headerText="Exposition / Score"
styleClass="ui-widget-header" style="text-align:center;">
<h:outputText value="#{zeile}" />
</p:column>
<c:forEach items="#{testBean.werte}" var="w" >
<p:column headerText="#{w}">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{w.entscheidung}" />
</f:facet>
<f:facet name="input">
<h:inputText value="#{w.entscheidung}" />
</f:facet>
</p:cellEditor>
</p:column>
</c:forEach>
</p:dataTable>
As you can see I got the data from my Bean, but in a wrong way.
Each row with 16 elements but I want 4 in each row like in the second picture.
Related
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.
I don't want to use the row & column tags
A | B | C | D | E
<p:panelGrid columns = "5">
<h:outputText value="A"/>
<h:outputText value="B"/>
<h:outputText value="C"/>
<h:outputText value="D"/>
<h:outputText value="E"/>
</p:panelGrid>
If I wanna put B & C into a same column like this:
A | BC | D | E
the only way is using row and column tags?
<p:panelGrid>
<p:row>
<p:column>
<h:outputText value="A"/>
</p:column>
<p:column>
<h:outputText value="B"/>
<h:outputText value="C"/>
</p:column>
<p:column>
<h:outputText value="D"/>
</p:column>
<p:column>
<h:outputText value="E"/>
</p:column>
</p:row>
</p:panelGrid>
Is there any tag can grouping the B&C?
because I want the p:panelGrid responsive
but p:row & p:column not support
Thanks
Use h:panelGroup like
<p:panelGrid columns="4">
<h:outputText value="A" />
<h:panelGroup>
<h:outputText value="B" />
<h:outputText value="C" />
<h:panelGroup>
<h:outputText value="D" />
<h:outputText value="E" />
</p:panelGrid>
What I'm trying to do is do something to the first row, second row, etc. of the table.
<p:panel header="#{mat.description}">
<p:dataTable var="datarow" value="#{myBean.getDatarows(mat.itemId)}" emptyMessage="No materials" rowIndexVar="row">
<c:choose>
<c:when test="${row eq 0}">
<p:column headerText=""><h:outputText value="#{datarow.get(1)}" /></p:column>
</c:when>
<c:when test="${row eq 1}">
<p:column headerText=""><h:outputText value="#{datarow.get(1)}" /></p:column>
</c:when>
</c:choose>
<p:column headerText=""><h:outputText value="#{datarow.get(6)}" /></p:column>
<p:column headerText="Month 1"><h:outputText value="#{datarow.get(1)}" /></p:column>
<p:column headerText="Month 3"><h:outputText value="#{datarow.get(2)}" /></p:column>
<p:column headerText="Month4"><h:outputText value="#{datarow.get(3)}" /></p:column>
<p:column headerText="Month 5"><h:outputText value="#{datarow.get(4)}" /></p:column>
<p:column headerText="Month6"><h:outputText value="#{datarow.get(5)}" /></p:column>
</p:dataTable>
</p:panel>
But the c:choose and c:when is not displaying anything. Am I doing the test for row number wrongly?
This is bad design and will not work that way. You are mixing up JSTL and JSF tags in a wrong way.
The JSTL tags c:choose and c:when are evaluated during tree built, but the p:dataTable tag when the UI tree is rendered.
Just use the rendered-attribute on p:column instead, if you want to include/exclude complete columns of your datatable. If you want to achieve different behavior of what is beeing displayed inside the columns, you could for example use the ?-operator to decide what is beeing rendered:
<p:dataTable var="datarow" ... rowIndexVar="row">
<p:column>
<h:outputText value="#{row eq 0 ? datarow.get(1) : 'some other stuff'}"/>
</p:column>
</p:dataTable>
To render different kind of elements inside your column, just put both of them inside the column, but with different rendered-attribute:
<p:column>
<h:outputText rendered="#{row != 4}"/>
<p:inputText rendered="#{row eq 4}"/>
</p:column>
This will render an input-element in the 5th row (rowIndexVar is 0-based), and an output-element in all other rows.
I believe you always need the same number of columns.
Change your code to:
<c:when test="${row eq 0}">
<p:column headerText=""><h:outputText value="#{datarow.get(1)}" /></p:column>
</c:when>
<c:when test="${row ne 0}">
<p:column headerText=""><h:outputText value="#{datarow.get(1)}" /></p:column>
</c:when>
This way you still have the column when not in the first or second row.
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.
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>