How to use c:forEach with p:dataTable and p:columnGroup? - jsf

I want to use a special form of grouping 'dynamic' columns. This is however not supported as stated in my other question. Using c:forEach was suggested as a possible solution
Which is correct way to use c:forEach for defining table header and colums.
My code BEFORE:
<p:dataTable id="resultTable" var="result" value="#{myBean.searchResults}" scrollable="true">
<p:columns value="#{myBean.columns}" var="column" columnIndexVar="colIndex">
<f:facet name="header" >
<h:outputText value="#{column.header}"/>
</f:facet>
<h:outputText value="#{result[column.property]}"/>
</p:columns>
</p:dataTable>
and code AFTER transformation (didn't work - table is not displayed):
<p:dataTable id="resultTable" var="result" value="#{myBean.searchResults}" scrollable="true">
<p:columnGroup type="header">
<p:row>
<c:forEach items="#{myBean.columns}" var="column">
<p:column headerText="#{column.header}"/>
</c:forEach>
</p:row>
</p:columnGroup>
<c:forEach items="#{myBean.columns}" var="column" >
<p:column>
<h:outputText value="#{result[column.property]}"/>
</p:column>
</c:forEach>
</p:dataTable>
PrimeFaces version 3.4.1

The "by the book" way to create dynamic columns would be to use the "Dynamic Columns" feature of the data table.
Any way, I did something very similar to what you are trying to do in the past, using c:forEach. The only difference was that I was not using p:columnGroup at the same time.
So, code like
<p:dataTable id="resultTable" var="result" value="#{myBean.searchResults}" scrollable="true">
<c:forEach items="#{myBean.columns}" var="column" >
<p:column headerText="#{column.header}">
<h:outputText value="#{result[column.property]}"/>
</p:column>
</c:forEach>
</p:dataTable>
should really work. When you do this way, you add p:column objets in the component tree before the p:datatable analyze the tree. So, this does the trick.
Beware that this can lead to problems in edge, ajax cases. So, if you can, just stick to the built-in dynamic columns feature.

Related

primefaces editable datable with autocomplete stuck up on edit or edit cancel [duplicate]

I am using JSF 2.2 with Primefaces 5.1. There is an editable primefaces datatable with pagination enabled.
<p:dataTable editMode="row"
editable="true"
value="#{usersBean.users}"
var="user" paginator="true" rows="20">
<p:ajax event="rowEditInit" onstart="handleRowEditInit(event,this);"/>
<p:column>
<p:rowEditor/>
</p:column>
<p:column headerText="Real name">
<p:cellEditor rendered="true">
<f:facet name="input">
<p:inputText value="#{user.realName}"/>
</f:facet>
<f:facet name="output">
<h:outputText value="#{user.realName}"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="User name">
<p:cellEditor>
<f:facet name="input">
<p:inputText value="#{user.userName}"/>
</f:facet>
<f:facet name="output">
<h:outputText value="#{user.userName}"/>
</f:facet>
</p:cellEditor>
</p:column>
</p:dataTable>
Every time the page is changed the datatable does an AJAX POST with all the data of the current page. As you can partly see in the image below.
For big tables with much data this results in huge requests. This is not neccessary right? Is there a way to change this behavior?
Indeed, when you submit a form in HTML, by default every single HTML input element will be sent as request parameter. PrimeFaces ajax components therefore offer the partialSubmit="true" attribute which will then send only the HTML input elements covered by the process attribute, which defaults in <p:ajax> to #this and in <p:commandXxx> to #form.
So, just add this to the data table in case to optimize pagination performance:
<p:ajax event="page" partialSubmit="true" />
And add this to any command button which only needs to access the current row in the data table (e.g. to show it in a dialog) to optimize action processing performance:
<p:commandButton ... process="#this" partialSubmit="true" />
You can also configure it globally via below context param in web.xml:
<context-param>
<param-name>primefaces.SUBMIT</param-name>
<param-value>partial</param-value>
</context-param>
And then for cases where you actually need a full submit, explicitly use partialSubmit="false".

PrimeFaces - Relationship between <p:rowExpansion> and <p:rowToggler>?

I'm using Primefaces 4.0. I'm starting to get a feel for this, but can't seem to get it straight, and the documentation hasn't helped much with this specific question.
Can someone explain the relationship between these two components? Does <p:rowExpansion> dictate what is displayed when <p:rowToggler> is used?
Don't know what confuses you, but inside <p:rowExpansion> you put the content which will be displayed when <p:rowToggler> is clicked. You've probably seen examples, but I'll put one here just for reference (taken from primefaces showcase)
<p:dataTable var="car" value="#{dtBasicView.cars}">
<f:facet name="header">
Expand rows to see detailed information
</f:facet>
<p:column style="width:16px">
<p:rowToggler />
</p:column>
<p:column headerText="Id">
...
</p:column>
<p:rowExpansion>
<p:panelGrid columns="2" columnClasses="label,value" style="width:300px">
<f:facet name="header">
<p:graphicImage name="demo/images/car/#{car.brand}-big.gif"/>
</f:facet>
<h:outputText value="Id:" />
<h:outputText value="#{car.id}" />
...
</p:panelGrid>
</p:rowExpansion>
</p:dataTable>

Is there any way to update PrimeFaces data table without updating the table headers?

This is a clumsy question!!! :)
Can this be made possible somehow? Can <p:dataTable> (whatever lazily loaded or otherwise) be updated without updating its headers (The contents (rows) inside the table along with the footer should be updated without updating the table headers)?
Updating of <p:dataTable> may be triggered by any UICommand like <p:commandButton>, <p:commandLink> and alike.
Something like this can be visualized, when we edit/update rows using <p:cellEditor> in conjunction with <p:rowEditor/> in <p:dataTable> (not sure about single cell editing).
<p:dataTable id="dataTable" var="row" value="#{bean}" ...>
<p:column headerText="Header 1" sortBy="#{row.property1}" filterBy="#{row.property1}">
....
</p:column>
<p:column>
<!--They may be our own headers-->
<f:facet name="header">
Header 2
...
</f:facet>
....
</p:column>
...
</p:dataTable>
Easiest way is to use PrimeFaces Selectors (PFS) for this. This only requires the desired cell content being wrapped in another component with an ID and a style class — so that jQuery can find and collect them.
E.g.
<p:dataTable ...>
<p:column>
<f:facet name="header">...</f:facet>
<h:panelGroup id="col1" styleClass="cell">...</h:panelGroup>
</p:column>
<p:column>
<f:facet name="header">...</f:facet>
<h:panelGroup id="col2" styleClass="cell">...</h:panelGroup>
</p:column>
<p:column>
<f:facet name="header">...</f:facet>
<h:panelGroup id="col3" styleClass="cell">...</h:panelGroup>
</p:column>
...
</p:dataTable>
<p:commandButton value="update" update="#(.cell)" />
That wrapping is clumsy, yes, but that's best you can get without homebrewing a custom renderer. You can always create a <my:column> tagfile to reduce the boilerplate.
See also:
How do PrimeFaces Selectors as in update="#(.myClass)" work?

Primefaces: PanelGrid in Datatable LiveScroll

Is there anyone who tried that? When it loads more panelGrid, table just duplicates them.
this picture result of that simple code block. Upper side shows how should it be rendered in a proper way but it goes wrong like at the down side.
<p:dataTable liveScroll="true" value="#{PanelController.panelList2}" var="GridPanel" scrollable="true" scrollRows="20" scrollHeight="100" rows="5">
<p:column>
<p:panelGrid>
<p:row>
<p:column>
<h:outputText value="ehehe"></h:outputText>
</p:column>
</p:row>
</p:panelGrid>
</p:column>
</p:dataTable>
If it was up to me I'd use the p:dataScroller und then use the panelgrid inside that. Take a look at this: http://www.primefaces.org/showcase/ui/data/datascroller/inline.xhtml

PrimeFaces panelGrid

Is there any alternative for panelGrid in PrimeFaces components? I need something more fixable to design forms. Something which supports colspan attribute someway!
If all you want is colspan, then just use plain vanilla HTML or use Tomahawk's <t:panelGrid> with <t:panelGroup> which supports the colspan attribute.
RichFaces has also components supporting colspan, but that doesn't always work flawlessly together with PrimeFaces.
You can achieve this by using "p:row and p:column" in panel Grid
example:
<p:panelGrid style="margin-top:20px">
<f:facet name="header">
<p:row>
<p:column colspan="7">1995-96 NBA Playoffs</p:column>
</p:row>
<p:row>
<p:column colspan="2">Conf. Semifinals</p:column>
<p:column colspan="2">Conf. Finals</p:column>
<p:column colspan="2">NBA Finals</p:column>
<p:column>Champion</p:column>
</p:row>
</f:facet>
<p:row>
<p:column style="font-weight: bold;">Seattle</p:column>
<p:column style="font-weight: bold;">4</p:column>
<p:column rowspan="2" style="font-weight: bold;">Seattle</p:column>
<p:column rowspan="2" style="font-weight: bold;">4</p:column>
<p:column rowspan="5">Seattle</p:column>
<p:column rowspan="5">2</p:column>
<p:column rowspan="11" style="font-weight: bold;">Chicago</p:column>
</p:row>
</p:panelGrid>
For Complete Example please visit prime faces show case
Sadly there is no alternative for <h:panelGrid> yet.
But hopefully you can use the <p:layout> and <p:layoutUnit> to more fixable form design.
And there are no restrictions using <table> and <div> with little CSS. Personally I would stick to the panelGrid because it is a JSF component, with more JSF-ish attributes.
I don't know why my previous answer was deleted by admins but PrimeFaces 3.1 will have a panelGrid component. http://www.primefaces.org/showcase-labs/ui/panelGrid.jsf

Resources