Primefaces table with editable rows generateds duplicate gridcells - jsf

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.

Related

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.

Dynamic DataTable, Columns , Colomn 'Spans problem' [richfaces]

I'm a new developer in jsf1.2 & richfaces 3.3.3, i have a problem with my jsf page, when viewing a dynamic dataTable, i can't build the head with a group column, knowing that i use columns in ColumnGroup, column Span and Row have no effect even if i give values or not!
the code for the head part of the table:
<rich:dataTable cellpadding="0" cellspacing="0" width="700" border="0">
<f:facet name="header">
<rich:columnGroup>
<rich:columns var="column" value="#{xmlBean.tableModele.head.column}">
<rich:column breakBefore="#column.breakBefore}" rowspan="#{column.rowSpan}" colspan="#{column.colSpan}">
<h:outputText value="#{column.libelle}" rendered="#{column.champ.type=='text'}" />
</rich:column>
</rich:columns>
</rich:columnGroup>
</f:facet>
</rich:dataTable>
I solved the problem :), it was necessary that i remove the "column" without 's', because the "columns" generate "column")
the code :
<f:facet name="header">
<rich:columnGroup>
<rich:columns var="column" value="#{xmlBean.tableModele.head.column}" rowspan="#{column.rowSpan}" colspan="#{column.colSpan}" breakBefore="#{column.breakBefore}">
<h:outputText value="#{column.champ.valeur}" rendered="#{column.champ.type=='text'}" />
</rich:columns>
</rich:columnGroup>
</f:facet>
thanks, its my fist post, i'm glad to be here ;)

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