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>
Related
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.
I am using Richfaces 4, and I need merge two rows in table center, such as:
+---+---+-------+
| | | | |
|---| |-------+
| | | | |
+---+---+-------+
I tried using the following code:
<rich:column >
<f:facet name="header">
<h:outputText value="col 1" />
</f:facet>
<h:outputText value="val 1" />
</rich:column>
<rich:column breakRowBefore="true">
<h:outputText value="Val 2" />
</rich:column>
<rich:column rowspan="2">
<f:facet name="header">
<h:outputText value="Col 2" />
</f:facet>
<h:outputText value="Val 2" />
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Col 3" />
</f:facet>
<h:outputText value="Val 3" />
</rich:column>
<rich:column breakRowBefore="true">
<h:outputText value="Val 4" />
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Col 4" />
</f:facet>
<h:outputText value="Val 5" />
</rich:column>
<rich:column breakRowBefore="true">
<h:outputText value="Val 6" />
</rich:column>
But using this way the third column breaks. If I do merge in columns at the end of the table, like this JSF RichTable merging rows / columns in a header , It will work fine. But this don't solve my problem.
You are making it more difficult than it needs to be, it works pretty much like the standard HTML. breakRowBefore simply starts a new row (and so all following columns will be on the same row or lower). Your example has two rows so you have to use it only once:
<column>
<column rowspan="2">
<column>
<column>
<column breakRowBefore="true">
<column>
<column>
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 a panel grid having 50 columns atleast but during display all the columns in the UI gets congested. I tried the properties which i could but to no avail.
Below is my code. any help is appreciated.
<p:panel>
<h:outputLabel value="Search Results" style="font-weight: bold;"></h:outputLabel>
<p:dataTable scrollWidth="100%" id="SearchResult" var="SearchResult"
value="beanId" style="width:100%;"
selection="beanId"
rowKey="beanId" scrollable="true"
rowSelectMode="multiple" scrollHeight="100%">
<p:column selectionMode="multiple" style="width:5%;" />
<p:column>
<f:facet name="header">
<h:outputText value="Year" />
</f:facet>
<h:outputText value="MbeanValue" />
</p:column>
|
|
|
|
similarly upto 50 columns
</p:panel>
A p:panel generates a <div/> so the overflow-y CSS style attribute will work :
<p:panel style="float:left;overflow-y: auto;height: 100px;">
The height attrbute specifies the point at which the div should break into a scrollbar
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.