What I want to do is do this layout with RichTable in its header to have 3 columns:
+---+---+-------+
| | | 3 5 |
| 1 | 2 |-------+
| | | 4 6 |
+---+---+-------+
I got used this (8.2) resource to get it done. Rich-faces 4.0.0
But instead I end up having plain table-row with no any merging.
Could you please shed a light on this?
Update:
About the answer from Vasil Lukach. In my case (if I do copy paste of those code), I have this result (I use hard coded values to keep it simple):
My code looks like this:
<rich:dataTable id="mydatatable"
value="#{applicationListBean.data}" >
<f:facet name="header">
<h:outputText value="msg.txnLineItems" />
<rich:columnGroup>
<rich:column rowspan="2">
<h:outputText value="msg.item" />
</rich:column>
<rich:column rowspan="2">
<h:outputText value="msg.department" />
</rich:column>
<rich:column rowspan="2">
<h:outputText value="msg.purchaseAmount}" />
</rich:column>
<rich:column rowspan="2">
<h:outputText value="msg.quantity" />
</rich:column>
<rich:column colspan="5">
<h:outputText value="msg.promotions" />
</rich:column>
<rich:column breakRowBefore="true">
<h:outputText value="msg.promoName" />
</rich:column>
<rich:column>
<h:outputText value="msg.promoCode" />
</rich:column>
<rich:column>
<h:outputText value="msg.promoCategory" />
</rich:column>
<rich:column>
<h:outputText value="msg.discount" />
</rich:column>
<rich:column>
<h:outputText value="msg.points" />
</rich:column>
</rich:columnGroup>
</f:facet>
</rich:dataTable>
I use <rich:column rowspan="2"> and <rich:column breakRowBefore="true"> for similar table:
Code
<f:facet name="header">
<h:outputText value="#{msg.txnLineItems}" />
<rich:columnGroup>
<rich:column rowspan="2">
<h:outputText value="#{msg.item}" />
</rich:column>
<rich:column rowspan="2">
<h:outputText value="#{msg.department}" />
</rich:column>
<rich:column rowspan="2">
<h:outputText value="#{msg.purchaseAmount}" />
</rich:column>
<rich:column rowspan="2">
<h:outputText value="#{msg.quantity}" />
</rich:column>
<rich:column colspan="5">
<h:outputText value="#{msg.promotions}" />
</rich:column>
<rich:column breakRowBefore="true">
<h:outputText value="#{msg.promoName}" />
</rich:column>
<rich:column>
<h:outputText value="#{msg.promoCode}" />
</rich:column>
<rich:column>
<h:outputText value="#{msg.promoCategory}" />
</rich:column>
<rich:column>
<h:outputText value="#{msg.discount}" />
</rich:column>
<rich:column>
<h:outputText value="#{msg.points}" />
</rich:column>
</rich:columnGroup>
</f:facet>
Related
I am new to primefaces. I have one datatable in my application. In that for 3 columns i need to merge some rows. That row count will be generated dynamically based on the data. If I tried to use rowspan in that particular column tag, it additionally created blank cells and the total datatable format is changed. How to do merge that datarows in primefaces. For reference, I am attaching the design and code.
Xhtml code:
<f:facet name="header">
<h:outputText value="Date"></h:outputText>
</f:facet>
<h:outputText value="#{step2table.rs2_date}" />
</p:column>
<p:column style="font-size:12px;width:73px;" >
<f:facet name="header">
<h:outputText value="Slot"></h:outputText>
</f:facet>
<h:outputText value="#{step2table.rs2_slot}" />
</p:column>
<p:column style="font-size:12px;width:73px;" >
<f:facet name="header">
<h:outputText value="Number of Resources Required"></h:outputText>
</f:facet>
<h:outputText value="#{step2table.rs2_noresources}" />
</p:column>
<p:column headerText="Select" id="hSelect" style="font-size:12px;width:60px;">
<p:selectBooleanCheckbox id="Booleanchkbox" onclick="{dtstep2_tab1.select='true'}" >
<p:ajax listener="#{dtstep2_tab1.UpdateStatus}" update="panel1" />
</p:selectBooleanCheckbox>
</p:column>
<p:column style="font-size:12px;width:70px;">
<f:facet name="header">
<h:outputText value="Employee Name"></h:outputText>
</f:facet>
<h:outputText value="#{step2table.rs2_empname}" />
</p:column>
<p:column style="font-size:12px;width:120px;">
<f:facet name="header">
<h:outputText value="Contact Details"></h:outputText>
</f:facet>
<h:outputText value="#{step2table.rs2_contactdet}" />
</p:column>
<p:column style="font-size:12px;width:70px;">
<f:facet name="header">
<h:outputText value="Worked Hrs to Date"></h:outputText>
</f:facet>
<h:outputText value="#{step2table.rs2_totworkhours}" />
</p:column>
<p:column style="font-size:12px;width:50px;">
<f:facet name="header">
<h:outputText value="Agency Recruited"></h:outputText>
</f:facet>
<h:outputText value="#{step2table.rs2_recruitmode}" />
</p:column>
<p:column style="font-size:12px;width:70px;">
<f:facet name="header">
<h:outputText value="Priority"></h:outputText>
</f:facet>
<h:outputText value="#{step2table.rs2_priority}"/>
</p:column>
<p:column style="font-size:12px;width:90px;">
<f:facet name="header">
<h:outputText value="Type of Skill"></h:outputText>
</f:facet>
<h:outputText value="#{step2table.rs2_skilltype}" />
</p:column>
<p:column style="font-size:12px;width:120px;">
<f:facet name="header">
<h:outputText value="Restriction"></h:outputText>
</f:facet>
<h:outputText value="#{step2table.rs2_restriction}" />
</p:column>
<p:column style="font-size:12px;width:150px;">
<f:facet name="header">
<h:outputText value="Rest. Details"></h:outputText>
</f:facet>
<h:outputText value="#{step2table.rs2_restdet}" />
</p:column>
<p:column style="font-size:12px;width:70px;">
<f:facet name="header">
<h:outputText value="B2B Days"></h:outputText>
</f:facet>
<h:outputText value="#{step2table.rs2_b2bdays}" />
</p:column>
<p:column style="font-size:12px;width:70px;">
<f:facet name="header">
<h:outputText value="B2B Hrs"></h:outputText>
</f:facet>
<h:outputText value="#{step2table.rs2_b2bhrs}" />
</p:column>
<p:column headerText="Status" id="hStatus" style="font-size:12px;width:100px;">
<h:selectOneMenu id="cbo" value="#{step2table.rs2_status}" >
<f:selectItem itemLabel="Confirmed" itemValue="Confirmed"></f:selectItem>
<f:selectItem itemLabel="Selected" itemValue="Selected"></f:selectItem>
<f:selectItem itemLabel="Rejected" itemValue="Rejected"></f:selectItem>
</h:selectOneMenu>
</p:column>
<p:column style="font-size:12px;width:150px;">
<f:facet name="header">
<h:outputText value="Comments"></h:outputText>
</f:facet>
<h:inputText value="#{step2table.rs2_comments}" rendered="#{dtstep2_tab1.editable}"/>
</p:column>
Need to merge first three columns "date, Slot, and No of Resources Required" based on the employee column data. Guide me on this. Thanks in advance.
You can use p:summaryRow tag in p:dataTable. Example:
<h:form>
<p:dataTable var="car" value="#{dtSummaryRowView.cars}" sortBy="#{car.brand}">
<p:column headerText="Id" sortBy="#{car.id}">
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Year" sortBy="#{car.year}">
<h:outputText value="#{car.year}" />
</p:column>
<p:column headerText="Brand" sortBy="#{car.brand}">
<h:outputText value="#{car.brand}" />
</p:column>
<p:column headerText="Color" sortBy="#{car.color}">
<h:outputText value="#{car.color}" />
</p:column>
<p:summaryRow>
<p:column colspan="3" style="text-align:right">
<h:outputText value="Total:" />
</p:column>
<p:column>
<h:outputText value="#{dtSummaryRowView.randomPrice}">
<f:convertNumber type="currency" currencySymbol="$" />
</h:outputText>
</p:column>
</p:summaryRow>
</p:dataTable>
</h:form>
For more information, see the primefaces showcase link: http://www.primefaces.org/showcase/ui/data/datatable/summaryRow.xhtml
This is simply not possible in the datatable.
<p:column width="440">
<p:panelGrid rendered="#{someCondition}">
<f:facet name="header">
<p:row>
<p:column width="80"><h:outputText value="#{msg.isin}" /></p:column>
<p:column width="80"><h:outputText value="#{msg.wkn}" /></p:column>
<p:column width="200"><h:outputText value="#{msg.name}" /></p:column>
<p:column width="80"><h:outputText value="#{msg.amount}" /></p:column>
</p:row>
</f:facet>
<p:row>
<p:column><h:outputText value="#{savingsPlanPosition.isin}" /></p:column>
<p:column><h:outputText value="#{savingsPlanPosition.wkn}" /></p:column>
<p:column><h:outputText value="#{savingsPlanPosition.name}" /></p:column>
<p:column><h:outputText value="#{savingsPlanPosition.amount}" /></p:column>
</p:row>
</p:panelGrid>
<p:panelGrid rendered="#{!someCondition}">
<h:link id="savingsPlanPositionDetails${rowIndex}"
title="#{msg.assign_etf}"
outcome="portfolioPositionDetail">
<f:param name="portfolioId"
value="#{savingsPlanController.portfolioId}"></f:param>
<f:param name="portfolioPositionId"
value="#{savingsPlanPosition.portfolioPositionId}"></f:param>
<f:param name="from"
value="savingsPlan"></f:param>
<h:outputText value="#{msg.assign_etf}"/>
</h:link>
</p:panelGrid>
</p:column>
I am using PrimeFaces but I have problem with display <p:messages> for converterMessage.
When I use JSF tag <h:message>, it works correctly or even when I insert it into columns, but when I change to <p:message> it does not show. Can anybody helps me? My page is:
<h:form id="form2" prependId="false" style="direction:rtl;width: 600;top: 300px ;position: absolute" >
<p:messages for="count"/>
<p:outputLabel value="sum credit :#{shoppingBean.sumcredit}"/><br/>
<p:outputLabel value="shopping list :"/>
<p:dataTable id="dataTbl2" var="selectedProduct" value="#{shoppingBean.selectedProduct}" emptyMessage="no data"
paginatorAlwaysVisible="true" selection="#{shoppingBean.selection2}"
rowKey="#{selectedProduct.id}" disabledSelection="false" rows="5" paginator="true" pageLinks="5">
<p:column style="color: blue">
<f:facet name="header">
<h:outputText value="brand" />
</f:facet>
<h:outputText value="#{selectedProduct.tblShopProduct.brand}" />
</p:column>
<p:column style="color: blue">
<f:facet name="header">
<h:outputText value="price" />
</f:facet>
<h:outputText value="#{selectedProduct.tblShopProduct.price}" />
</p:column>
<p:column style="color: blue" >
<f:facet name="header">
<h:outputText value="date" />
</f:facet>
<h:outputText value="#{shoppingBean.tblShopOrder.created.toString().substring(0,11)}" />
<h:outputText value="#{shoppingBean.tblShopOrder.created.toString().substring(11,19)}" />
</p:column>
<p:column style="color: blue" >
<f:facet name="header">
<h:outputText value="number" />
</f:facet>
<h:outputText value="#{selectedProduct.number}" />
</p:column>
<p:column style="color: blue" >
<f:facet name="header">
<h:outputText value="amount" />
</f:facet>
<h:outputText value="#{selectedProduct.amount}" />
</p:column>
<p:column style="color: blue">
<f:facet name="header">
<h:outputText value="edit"/>**<h:inputText id="count" converterMessage="you allowed only for using number value="#{shoppingBean.count}"/>**
</f:facet>
<h:commandButton value="sum" rendered="#{selectedProduct.number==null}" action="#{shoppingBean.addProductCount(selectedProduct)}" />
<h:commandButton value="confirm" disabled="true" rendered="#{selectedProduct.number!=null}" />
</p:column>
<p:column style="color: blue" >
<f:facet name="header">
<h:outputText value="delete" />
</f:facet>
<h:commandButton value="delete" action="#{shoppingBean.deleteBuyed(selectedProduct)}" />
</p:column>
<f:facet name="footer">
<h:commandButton value="final shopping" action="#{shoppingBean.finalShop(selectedProduct)}" />
</f:facet>
</p:dataTable>
</h:form>
Tohid Makari.
<h:outputText value="edit"/>**<h:inputText id="count" converterMessage="you allowed only for using number value="#{shoppingBean.count}"/>**
This line could not work. Fix this first.
You do not update your messages tag.
Try something like this :
<p:messages for="count" autoUpdate="true" />
I have a SEAM 2, JSF 1.2 web application with a Java back end. Currently I have table that displays books (see below). What I need to add to this is a collapse-able table to each of these rows that would show previous versions of this book (#{_item.relatedVersions}). Each of these version are a book themselves (but don't have an expandable sub-version table, i.e only 1 level deep on a nested table). So what I am wondering is what is the cleanest way to display a list of books (#{bean.items}) in "Table A", and then foreach book dynamically generate another Table within a row in "Table A"?
...
<a:form id="bookList_results_form">
<rich:dataTable id="bookList_dt"
rendered="#{bean.itemCount gt 0}"
var="_item"
width="100%"
value="#{bean.items}">
<rich:column>
<f:facet name="header">ID</f:facet>
<h:outputText value="#{_item.bookId}"/>
</rich:column>
<rich:column>
<a:commandButton image="#{plusIcon}" size="15"
title="Expand version info."
action="#{bean. ???}"
ajaxSingle="true" bypassUpdates="true" immediate="true"/>
<f:facet name="header">Book Name</f:facet>
<h:outputText value="#{_item.bookName}" escape="true"/>
</rich:column>
<rich:column>
<f:facet name="header">Comments</f:facet>
<h:outputText value="#{_item.comments}"/>
</rich:column>
<rich:column>
<f:facet name="header">Actions</f:facet>
<a:commandLink
value="Edit"
title="View or Edit metadata for this book"
action="#{bean.edit(_item.bookId)}"/>
</rich:column>
</rich:dataTable>
</a:form>
...
Check out the
http://showcase.richfaces.org/richfaces/component-sample.jsf?demo=subTableToggleControl&skin=blueSky
<h:form>
<rich:dataTable value="#{carsBean.inventoryVendorLists}" var="list">
<f:facet name="header">
<rich:columnGroup>
<rich:column colspan="6">
<h:outputText value="Cars marketplace" />
</rich:column>
<rich:column breakRowBefore="true">
<h:outputText value="Model" />
</rich:column>
<rich:column>
<h:outputText value="Price" />
</rich:column>
<rich:column>
<h:outputText value="Mileage" />
</rich:column>
<rich:column>
<h:outputText value="VIN Code" />
</rich:column>
<rich:column>
<h:outputText value="Items stock" />
</rich:column>
<rich:column>
<h:outputText value="Days Live" />
</rich:column>
</rich:columnGroup>
</f:facet>
<rich:column colspan="6">
<rich:collapsibleSubTableToggler for="sbtbl" />
<h:outputText value="#{list.vendor}" />
</rich:column>
<rich:collapsibleSubTable value="#{list.vendorItems}" var="item" id="sbtbl" expandMode="client">
<rich:column>
<h:outputText value="#{item.model}" />
</rich:column>
<rich:column>
<h:outputText value="#{item.price}" />
</rich:column>
<rich:column>
<h:outputText value="#{item.mileage}" />
</rich:column>
<rich:column>
<h:outputText value="#{item.vin}" />
</rich:column>
<rich:column>
<h:outputText value="#{item.stock}" />
</rich:column>
<rich:column>
<h:outputText value="#{item.daysLive}" />
</rich:column>
<f:facet name="footer">
<h:outputText value="Total of #{list.vendor} Cars: #{list.count}" />
</f:facet>
</rich:collapsibleSubTable>
</rich:dataTable>
</h:form>
Have you already tried to use the <rich:subTable>?
Edit: I've updated main parts of my answer to show a more detailed example:
<rich:dataTable id="bookList_dt" [...] var="_item" value="#{bean.items}" >
<f:facet name="header">
<rich:column>
Header1
</rich:column>
<rich:column>
Header2
</rich:column>
</f:facet>
<rich:column>
<a4j:commandLink id="toggleIcon" action="#{bean.toggleRelatedVisible(_item)}" reRender="bookList_dt">
<h:graphicImage value="/img/plusIcon.gif" rendered="#{not bean.isRelatedVisible(_item)}" style="margin-right:4px;" />
<h:graphicImage value="/img/minusIcon.gif" rendered="#{bean.isRelatedVisible(_item)}" style="margin-right:4px;" />
</a4j:commandLink>
<h:outputText value="#{_item.bookId}"/>
</rich:column>
[...]
<rich:subTable value="#{_item.relatedVersions}"
var="_relatedItem"
rendered="#{bean.isRelatedVisible(_item)}">
<rich:column>
<h:outputText value="#{_relatedItem.bookId}"/>
</rich:column>
[...]
</rich:subTable>
</rich:dataTable>
In this solution I'm rerendering the whole table on collapse/expand of the subtable. Maybe you can find a more effective way.
Of course, the bean must have some collection of boolean-values containing the state (collapsed/expended) of the subtables.
I want to fill a rich:extendedDataTable with a static columns and dynamic columns in RichFaces 4.2
I tried following code,but it's not working for me :
<rich:extendedDataTable id="listDipRec"
iterationStatusVar="itDipRec" rows="200"
value="#{declarationReglementaireModel.detailCurrentDecReg.decReg.listLigneDipRecsDTO}"
var="ligneDipRec" frozenColumns="1"
style="height:300px; width:800px;" selectionMode="none">
<rich:column width="35px">
<h:panelGrid columns="1" cellpadding="2">
<a4j:commandLink render="editGridDipRec" execute="#this"
oncomplete="#{rich:component('modifDipRec')}.show()">
<span class="icone icone-edit icone-align-center" />
<a4j:param value="#{itDipRec.index}"
assignTo="#{declarationReglementaireModel.currentLigneDipRecIndex}" />
<f:setPropertyActionListener
target="#{declarationReglementaireModel.currentLigneDipRec}"
value="#{ligneDipRec}" />
</a4j:commandLink>
</h:panelGrid>
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Date ligne fichier Dip" />
</f:facet>
<h:outputText value="#{ligneDipRec.dtLigneDipRec}">
<f:convertDateTime pattern="dd/MM/yyyy" timeZone="Europe/Paris" />
</h:outputText>
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Référence titre" />
</f:facet>
<h:outputText value="#{ligneDipRec.rfTitre}">
</h:outputText>
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Origine titre" />
</f:facet>
<h:outputText value="#{ligneDipRec.lbOrigineLigne}">
</h:outputText>
</rich:column>
<c:forEach items="#{ligneDipRec.listDonneeDipRecDTO}" var="column"
varStatus="status">
<rich:column>
<f:facet name="header">
<h:outputText value="Valeur rubrique" />
</f:facet>
<h:outputText value="#{declarationReglementaireModel.getColumnData(ligneDipRec,column).lbValeurRubrique}" />
</rich:column>
</c:forEach>
</rich:extendedDataTable>
<c:forEach> doesn't have access to the table's variables (i.e. ligneDipRec), and unfortunately you can't do anything about it.
The good news is that whatever you put inside the forEach will have access to those variables. The only thing you need to do is to save the size of the list somewhere in the bean and then loop over it, rather than over the variable:
<c:forEach var="columnNumber" begin="0"
end="{declarationReglementaireModel.detailCurrentDecReg.decReg.listSize - 1}">
This is a base sample with 3 rows of data displayed under 1 columnGroup heading and 3 column headings and then the 3 columns of data:
<rich:dataTable value="Some Table">
<f:facet name="header">
<rich:columnGroup>
<rich:column colspan="3">
<h:outputText value="ColumnGroupHead"/>
</rich:column>
<rich:column breakBefore="true">
<h:outputText value="Col 1 head"/>
</rich:column>
<rich:column>
<h:outputText value="Col 2 head"/>
</rich:column>
<rich:column>
<h:outputText value="Col 3 Head"/>
</rich:column>
</rich:columnGroup>
</f:facet>
<rich:column>
<h:outputText value="Col1 Data"/>
</rich:column>
<rich:column>
<h:outputText value="Col2 Data"/>
</rich:column>
<rich:column>
<h:outputText value="Col3 Data"/>
</rich:column> <rich:column>
<h:outputText value="Col4 Data"/>
</rich:column>
<rich:column>
<h:outputText value="Col5 Data"/>
</rich:column>
<rich:column>
<h:outputText value="Col6 Data"/>
</rich:column>
</rich:dataTable>
Now in relaity, my dataTable contains 6 columns, and i want the same complex header as in example above for columns 4,5,6. I have tried the follwoing code, but what I am trying to apply as the next (visual) column group with a specific colspan in the table is starting on the broken line of the col1,2,3 Headers.
<rich:dataTable value="Some Table">
<f:facet name="header">
<rich:columnGroup>
<rich:column colspan="3">
<h:outputText value="ColumnGroupHead1"/>
</rich:column>
<rich:column breakBefore="true">
<h:outputText value="Col 1 head"/>
</rich:column>
<rich:column>
<h:outputText value="Col 2 head"/>
</rich:column>
<rich:column>
<h:outputText value="Col 3 Head"/>
</rich:column>
<rich:column colspan="3">
<h:outputText value="ColumnGroupHead2"/>
</rich:column>
<rich:column breakBefore="true">
<h:outputText value="Col 3 head"/>
</rich:column>
<rich:column>
<h:outputText value="Col 4 head"/>
</rich:column>
<rich:column>
<h:outputText value="Col 5 Head"/>
</rich:column>
</rich:columnGroup>
</f:facet>
<rich:column>
<h:outputText value="Col1 Data"/>
</rich:column>
<rich:column>
<h:outputText value="Col2 Data"/>
</rich:column>
<rich:column>
<h:outputText value="Col3 Data"/>
</rich:column>
<rich:column>
<h:outputText value="Col4 Data"/>
</rich:column>
<rich:column>
<h:outputText value="Col5 Data"/>
</rich:column>
<rich:column>
<h:outputText value="Col6 Data"/>
</rich:column>
Is it psossible to have maultiple column groups in a dataTable?
When I try and close the first columnGroup and then open a new columnGroup, the iital columnGroup is not applied to the dat table.
any assistance would be appreicated.
Rory
I got this figured out. Would delete if knew how.
I had my colspan ColumnGroupHEading sets out fo sequence.
<rich:dataTable value="Some Table">
<f:facet name="header">
<rich:columnGroup>
<rich:column colspan="3">
<h:outputText value="ColumnGroupHead"/>
</rich:column>
<rich:columnGroup>
iT IS THEN THAT I SHOULD HAVE ENTERED THE NEXT COLSPAN , ColumnGroupHeading Header.
<rich:column colspan="3">
<h:outputText value="ColumnGroupHead2"/>
</rich:column>
<rich:column breakBefore="true">
<h:outputText value="Col 1 head"/>
</rich:column>
aND THEN THE COLUMN HEADINGS
<rich:column breakBefore="true">
<h:outputText value="Col 1 head"/>
</rich:column>
<rich:column>
<h:outputText value="Col 2 head"/>
</rich:column>
<rich:column>
<h:outputText value="Col 3 Head"/>
</rich:column>
<h:outputText value="Col 4 head"/>
</rich:column>
<rich:column>
<h:outputText value="Col 5 head"/>
</rich:column>
<rich:column>
<h:outputText value="Col 6 Head"/>
</rich:column>
</rich:columnGroup>
</f:facet>
<rich:column>
<h:outputText value="Col1 Data"/>
</rich:column>
<rich:column>
<h:outputText value="Col2 Data"/>
</rich:column>
<rich:column>
<h:outputText value="Col3 Data"/>
</rich:column>
<rich:column>
<h:outputText value="Col4 Data"/>
</rich:column>
<rich:column>
<h:outputText value="Col5 Data"/>
</rich:column>
<rich:column>
<h:outputText value="Col6 Data"/>
</rich:column>
</rich:dataTable>