Merge Rows Dynamically at RichFaces Table Center - jsf

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>

Related

Put multi elements into a column in PanelGrid columns

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>

Generate Matrix Datatable with JSF Framework like Primefaces

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.

Adding a scrollbar to a panelgrid in JSF

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

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.

How to display two h:outputTexts in rich:extendedDataTable header column with different colors?

In the header column of <rich:extendedDataTable> I need to add two output texts in a single line as header label with different style class. How can I do this? I tried this different ways, but I can't achieve my goal.
<rich:extendedDataTable ...>
<rich:column label="Name">
<f:facet name="header">
<h:outputText value="Short Description" />
</f:facet>
<h:inputText ... />
</rich:column>
</rich:extendedDataTable>
I want display another label with a different color in the same line. I.e. "Short Description" is default style and next label in same line should be in different color.
For example, header column "Name" in black color and near this I want display * in red color like
-------------------------
Name * | Age
-------------------------
Here * should display in red color.
This is pretty straightforward. I think that your problem is caused by the fact that a <f:facet> cannot have more than one child. So the following wouldn't work:
<f:facet name="header">
<h:outputText value="Short Description" />
<h:outputText value="*" style="color:red;" />
</f:facet>
but the following should work:
<f:facet name="header">
<h:panelGroup>
<h:outputText value="Short Description" />
<h:outputText value="*" style="color:red;" />
</h:panelGroup>
</f:facet>

Resources