rich:extendedDataTable with dynamic columns - jsf

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}">

Related

How to show minimum 10 rows in rich faces extendedDataTable with a vertical scrollbar?

Suppose I have more than 10 rows of data to display in a richfaces extendedDataTable component and I want to show minimum 10 rows on initial load. And if the user wants to see the remaining rows, the user have to scroll down using the vertical scrollbar.
The code which I used is given below.
<rich:layout position="center" style="overflow:hidden">
<rich:layoutPanel position="center" >
<rich:extendedDataTable enableContextMenu="false"
style="vertical-align: top; horizontal-align: center; "
id="filtertable" value="#{dynamicBean.selectedData.filterDetList}"
var="bdata" height="#{reportDesignerBean.height}"
showWhenRendered="false" rowClasses="datatable-odd,datatable-even"
selectedClass="grid-selection-style"
noDataLabel="#{msg['bnp.common.extendedDataTable.noDataLabel']}">
<rich:column width="110px">
<f:facet name="header">
<h:outputLabel value="#{msg['bnp.reortdesign.customreport.sqlreports.columnname']}" />
</f:facet>
<h:panelGrid id="filterName">
<h:outputText value="#{bdata.columnLabel}" />
</h:panelGrid>
</rich:column>
<rich:column width="110px" style="text-align:center;" >
<f:facet name="header">
<h:outputLabel value="#{msg['bnp.reortdesign.customreport.sqlreports.isafilter']}" />
</f:facet>
<h:selectBooleanCheckbox id="checkOne" value="#{bdata.rowSelected}" >
<a4j:support event="onclick" ajaxSingle="true" limitToList="true">
<f:setPropertyActionListener target="#{bdata}" value="#{bdata}"/>
</a4j:support>
</h:selectBooleanCheckbox>
</rich:column>
<rich:column width="320px">
<f:facet name="header"><h:outputLabel value="#{msg['bnp.reortdesign.customreport.sqlreports.filtervalue']}" /></f:facet>
<h:panelGrid width="380px" id="filtervalue" columns="3">
${bdata.columnDataType}
<c:if test="#{bdata.columnDataType != 'Date'}">
<h:inputText value="#{bdata.value}" maxlength="150"
style="width:240px">
<a4j:support event="onchange" ajaxSingle="true" limitToList="true">
<f:setPropertyActionListener target="#{bdata}" value="#{bdata}"/>
</a4j:support>
</h:inputText>
</c:if>
<c:if test="#{bdata.columnDataType == 'Date'}" >
<rich:calendar id="fixedDateValue" datePattern="#{loginBean.userPrefVO.preferredDateFmt}"
value="#{bdata.value}" buttonIcon="true" showWeeksBar="false"
weekDayLabelsShort="Su,Mo,Tu,We,Th,Fr,Sa"
oninputfocus="#{rich:component('fixedDateValue')}.doExpand();"
onclick="#{rich:component('fixedDateValue')}.doExpand()" width="20px"
buttonClass="calendar-button-style">
<f:convertDateTime type="date" pattern="#{loginBean.userPrefVO.preferredDateFmt}" />
<f:facet name="header">
<h:panelGrid columns="3" width="50%"
columnClasses="fake, width100 talign">
<h:outputText value="{previousMonthControl}"
style="font-weight:bold;" />
<h:outputText value="{currentMonthControl}"
style="font-weight:normal;padding-left:15px; text-align:center; cursor:pointer"
disabled="true" />
<h:outputText value="{nextMonthControl}"
style="font-weight:bold;" />
</h:panelGrid>
</f:facet>
<f:facet name="fixedDateValue" style=""></f:facet>
</rich:calendar>
</c:if>
<rich:spacer width="20px" />
</h:panelGrid>
</rich:column>
<rich:column width="205px">
<f:facet name="header">
<h:outputLabel value="#{msg['bnp.reortdesign.customreport.sqlreports.datatype']}"/>
</f:facet>
<h:panelGrid id="filterdatatype">
<h:outputText value="#{bdata.columnDataType}" style="color:green;font-style: italic;font-size:10px;"/>
</h:panelGrid>
</rich:column>
</rich:extendedDataTable>
<!-- <a4j:outputPanel id="fScrollerPanel">
<rich:datascroller id="filterScroller" for="filtertable" ></rich:datascroller>
</a4j:outputPanel> -->
</rich:layoutPanel>
</rich:layout>
From the Richfaces showcase:
In order to turn on Ajax loading - you should just specify clientRows attribute with number of rows to be loaded on the client. In the sample below it's set to 15 or to 0 according to checkbox value. 0 value means load all the rows (or attribute could be just not defined at all).

richfaces DataScroller not working

I am trying to implement datascroller in richfaces 3.1.4 with JSF 1.2 but the datascroller is not working properly though it is showing the no of pages.Here is the code :
<rich:dataTable width="150 px" id="listOfServiceId" rows="#{posManageOrderBean.count}" columnClasses="col"
value="#{posManageOrderBean.customerProjectServiceIds}" var="serviceIDs"
headerClass="dr-stglpnl-h" rowClasses="evenrow,oddrow">
<h:column>
<f:facet name="header">
<h:outputText value="Service Id" rendered="true" />
</f:facet>
<h:commandLink value="#{serviceIDs.serviceID}" action="#{posManageOrderBean.showAllServiceIdAttr}" >
<f:param name="serviceId" value="#{serviceIDs.serviceID}"> </f:param>
</h:commandLink>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Copf Id" rendered="true" />
</f:facet>
<h:outputText value="#{serviceIDs.copfID}" rendered="true" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Service Id" rendered="true" />
</f:facet>
<h:outputText value="#{serviceIDs.customerProjectName}" rendered="true" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Service Id" rendered="true" />
</f:facet>
<h:outputText value="#{serviceIDs.customerName}" rendered="true" />
</h:column>
<f:facet name="footer">
<h:panelGrid>
<rich:datascroller maxPages="20" id="sc1" for="listOfServiceId" reRender="listOfServiceId"></rich:datascroller>
</h:panelGrid>
</f:facet>
</rich:dataTable>

Issue in displaying p:messages for converterMessage

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" />

Rerendered components don't work properly

I am creating a view in JSF where after executing some action with a4j:commandButton some elements are rerendered. For example I click on a button which invokes a backing bean method such as executeProcess (this adds a process to a list), and when it finishes updates a data table (shows the available processes). The data table also has some other buttons to execute specific actions over every process, but when I press one of this the page seems to reload entirely without invoking the action, then if I press the same button again it works. What is happening?
Component List an execute:
<div class="line_left" style="float:right">
<a4j:outputPanel id="execProcessPanel" layout="block"
ajaxRendered="true">
<ui:fragment rendered="#{tapeTapeForm.size > 0}">
<h:form id="executeProcess">
<h:outputText value="Ejecuta Proceso" />
<br />
<h:outputLabel id="inputFilesLabel" for="inputFile" value="Archivo" />
<h:selectOneListbox id="inputFile" size="5" required="true"
requiredMessage="Debes seleccionar un archivo"
value="#{tapeTapeForm.inputFile}">
<f:selectItems value="#{tapeTapeForm.inputFiles}" var="file"
itemLabel="#{file}" itemValue="#{file}" />
</h:selectOneListbox>
<br />
<h:message for="inputFile" errorClass="" />
<br />
<a4j:commandButton value="Ejecutar" styleClass="button"
action="#{tapeTapeForm.executeProcess}"
render="resultListPanel execProcessPanel messages"
limitRender="true">
<f:setPropertyActionListener value="0"
target="#{tapeTapeForm.tipoProceso}" />
</a4j:commandButton>
<a4j:commandButton value="Revisión" styleClass="button"
action="#{tapeTapeForm.executeProcess}"
render="resultListPanel execProcessPanel messages"
limitRender="true">
<f:setPropertyActionListener value="1"
target="#{tapeTapeForm.tipoProceso}" />
</a4j:commandButton>
</h:form>
</ui:fragment>
</a4j:outputPanel>
</div>
Component Data Table:
<a4j:outputPanel id="resultListPanel" layout="block"
ajaxRendered="true">
<h2>
<h:outputText value="Listado de Procesos Tape to Tape" />
</h2>
<rich:dataTable id="resultList" var="item" rows="0"
value="#{tapeTapeForm.processes}" noDataLabel="Sin Procesos">
<rich:column sortable="true" sortBy="#{item.id}">
<f:facet name="header">
<h:outputText value="ID" />
</f:facet>
<center>
<h:outputText value="#{item.id}" />
</center>
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Nombre Archivo" />
</f:facet>
<center>
<h:outputText value="#{item.inputFileName}" />
</center>
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Archivo Salida" />
</f:facet>
<center>
<h:outputText value="#{item.outputFileName}"
title="Clic para descargar el archivo de salida" />
</center>
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Tipo Proceso" />
</f:facet>
<center>
<h:outputText value="Reporte"
title="Este proceso generará un reporte"
rendered="#{item.tipoProceso == 0}" />
<h:outputText value="Revisión"
title="Se realizará una revisión del archivo"
rendered="#{item.tipoProceso == 1}" />
</center>
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Estatus" />
</f:facet>
<center>
<h:outputText value="#{item.status.description}"
title="#{item.status.detail}" />
</center>
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Progreso" />
</f:facet>
<rich:progressBar value="#{item.avance}" minValue="0"
enabled="false" rendered="#{item.status.id == 3}"
maxValue="#{item.total}" label="#{item.avance} / #{item.total}" />
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Detener" />
</f:facet>
<h:form rendered="#{item.status.id == 2 or item.status.id==3}">
<h:commandLink action="#{tapeTapeForm.stopProcess}" value="STOP"
onclick="#{rich:component('ajaxLoadingModalBox')}.show()">
<f:setPropertyActionListener target="#{tapeTapeForm.id}"
value="#{item.id}" />
</h:commandLink>
</h:form>
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Eliminar" />
</f:facet>
<h:form rendered="#{item.status.id !=2 and item.status.id != 3}">
<h:commandLink action="#{tapeTapeForm.removeProcess}"
value="ELIMINAR">
<f:setPropertyActionListener target="#{tapeTapeForm.id}"
value="#{item.id}" />
</h:commandLink>
</h:form>
</rich:column>
</rich:dataTable>
</a4j:outputPanel>
I'm using RichFaces 4.2.2
Get rid of the multiple forms, wrap everything in one and then use if you need to limit the scope of execution.

Dynamically generate a table within a row of a table

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.

Resources