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
Related
I am currently developing an application where the user can use a picklist to make certain associations.
I would like to display the object's attributes in different columns inside the picklist, for example the object car would display its id, year and color. However, the headerText of the column is not working. The column only displays the data but PrimeFaces seems to ignore the attribute headerText among others like sortBy. Is there any workaround? What am I doing wrong? p:column seems to work fine on a DataTable but not on a PickList and I really need to use a PickList or at least something with very similar functionalities.
Below is my code:
<p:pickList id="pickListAssociacao" value="#{associacaoPickListView.carsPickListView}" var="car" itemLabel="#{car.brand}" itemValue="#{car}">
<p:column headerText="Header1">
<h:outputText value="#{car.brand}" />
</p:column>
<p:column headerText="Header2" sortBy="#{car.year}">
<h:outputText value="#{car.year}" />
</p:column>
<p:column headerText="Header3">
<h:outputText value="#{car.year}" />
</p:column>
</p:pickList>
Thanks for your time.
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.
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>
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?
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