I am creating components dynamically using rich:dataTable and the components in each row are checkbox, text1, text2. I am able to create/delete rows. I added validators for text1 and text2.
I need to validate text2 based on chars enetered in text1. Suppose in text1 component if 3 is entered then in text2 component I need to allow max 3 chars. And this need to be done for all the dynamically generated rows for the entire table.
<rich:dataTable id ="outtable" value="#{bean.Items}" var="row">
<rich:column>
<f:facet name="header">
<h:outputText id="selectrow" value="select" style="font-weight: bold; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px;" />
</f:facet>
<h:selectBooleanCheckbox value="#{row.selected}" />
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText size="15" value="Bean Value"
style="font-weight: bold; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px;"/>
</f:facet>
<s:decorate id="valueDecoration" template="layout/edit.xhtml">
<h:inputText size="8" maxlength="4" value="#{row.beanValue}" required="true" >
<f:validator validatorId="beanValueValidator"/>
<s:validate/>
<a:support event="onblur" reRender="valueDecoration" bypassUpdates="false" ajaxSingle="true"/>
</h:inputText>
</s:decorate>
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Bean Data"
style="font-weight: bold; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px;"/>
</f:facet>
<s:decorate id="dataDecoration" template="layout/edit.xhtml">
<h:inputText size="30" maxlength="40" value="#{row.beanData}" required="true">
<f:validator validatorId="beanDataValidator"/>
<s:validate/>
<a:support event="onblur" reRender="dataDecoration" bypassUpdates="false" ajaxSingle="true" />
</h:inputText>
</s:decorate>
</rich:column>
<f:facet name="footer">
<h:panelGroup>
<h:commandButton value="Add Row" action="#{bean.add}" />
<h:commandButton value="Delete Selected" action="#{bean.remove}" />
</h:panelGroup>
</f:facet>
</rich:dataTable>
How can I achieve this?
Give richfaces 3.3 Graph Validator (4.x) a try.
Related
Recently I have moved from JSF 2.0 to JSF 2.2 and Primefaces 3.5 to Primefaces 5
I have got a table which has filter on each column. filtering works well using primefaces 3.5
<p:dataTable id="gwsReportAllPartListDataTable"
value="#{viewAllAnalyticsBean.gwsReportPartTwoList}"
var="report"
paginator="true"
rows="100"
paginatorTemplate="{PageLinks} {CurrentPageReport}"
currentPageReportTemplate="{currentPage} #{dictionary['out_of']} {totalPages}"
emptyMessage="#{dictionary['nothing_is_here']}"
scrollable="true"
scrollWidth="1221"
scrollHeight="500">
<p:ajax event="filter" listener="#{viewAllAnalyticsBean.onFilterDataTable}" oncomplete="updateFilters()"/>
<p:column styleClass="columnCustomClass" style="width: 90px;position:relative; padding-bottom: 30px;">
<f:facet name="header">
<h:outputText value="#{dictionary['reporting_period']}" />
</f:facet>
<h:outputText value="#{report.gwsReportPartOne.year}, #{report.gwsReportPartOne.quarter}"/>
</p:column>
<p:column styleClass="columnCustomClass" style="width: 90px;position:relative; padding-bottom: 30px;" filterBy="#{report.gwsReportPartOne.contractNumber}" filterMatchMode="contains" filterStyle="width:80px; position:absolute; bottom:4px;" filterValue="">
<f:facet name="header">
<h:outputText value="#{dictionary['subsoil_user_contract_register_number']}" />
</f:facet>
<h:outputText value="#{report.gwsReportPartOne.contractNumber}"/>
</p:column>
<p:column styleClass="columnCustomClass" style="width: 40px;position:relative; padding-bottom: 30px;" filterBy="#{report.gwsReportPartOne.gwsType.code}" filterMatchMode="contains" filterStyle="width:30px; position:absolute; bottom:4px;">
<f:facet name="header">
<h:outputText value="#{dictionary['gws_type']}" />
</f:facet>
<h:outputText value="#{report.gwsReportPartOne.gwsType.code}" />
</p:column>
<p:column id="tender_code" width="100" style="position:relative; padding-bottom: 30px;" styleClass="columnCustomClass" filterBy="#{report.skp.code}" filterMatchMode="contains" filterStyle="width:90px; position:absolute; bottom:4px;">
<f:facet name="header">
<h:outputText value="#{dictionary['gws_code_by_skp']}" />
</f:facet>
<h:outputText value="#{report.skp.code}"/>
</p:column>
<p:column styleClass="columnCustomClass" style="width: 150px; position:relative; padding-bottom: 30px;" filterBy="#{report.description}" filterMatchMode="contains" filterStyle="width:140px; position:absolute; bottom:4px;">
<f:facet name="header">
<h:outputText value="#{dictionary['item_name_and_short_description_of_purchased_gws']}" />
</f:facet>
<h:outputText value="#{report.description}" />
</p:column>
<p:column styleClass="columnCustomClass" style="width: 50px; position:relative; padding-bottom: 30px;" filterBy="#{report.gwsReportPartOne.tenderType.code}" filterMatchMode="contains" filterStyle="width:40px; position:absolute; bottom:4px;">
<f:facet name="header">
<h:outputText value="#{dictionary['purchase_way']}" />
</f:facet>
<h:outputText value="#{report.gwsReportPartOne.tenderType.code}" />
</p:column>
<p:column styleClass="columnCustomClass" style="width: 80px; position:relative; padding-bottom: 30px;" filterBy="#{report.gwsReportPartOne.agreementNumber}" filterMatchMode="contains" filterStyle="width:70px; position:absolute; bottom:4px;">
<f:facet name="header">
<h:outputText value="#{dictionary['agreement_number']}" />
</f:facet>
<h:outputText value="#{report.gwsReportPartOne.agreementNumber}" />
</p:column>
<p:column styleClass="columnCustomClass" style="width: 80px; position:relative; padding-bottom: 30px;" filterBy="#{report.gwsReportPartOne.resultDate}" filterMatchMode="contains" filterStyle="width:70px; position:absolute; bottom:4px;">
<f:facet name="header">
<h:outputText value="#{dictionary['tender_result_date']}" />
</f:facet>
<h:outputText value="#{report.gwsReportPartOne.resultDate}" >
<f:convertDateTime pattern="dd.MM.yyyy"/>
</h:outputText>
</p:column>
<p:column styleClass="columnCustomClass" style="width: 80px; position:relative; padding-bottom: 30px;" filterBy="#{report.gwsReportPartOne.agreementStartDate}" filterMatchMode="contains" filterStyle="width:70px; position:absolute; bottom:4px;">
<f:facet name="header">
<h:outputText value="#{dictionary['agreement_conclusion_date']}" />
</f:facet>
<h:outputText value="#{report.gwsReportPartOne.agreementStartDate}" >
<f:convertDateTime pattern="dd.MM.yyyy"/>
</h:outputText>
</p:column>
<p:column styleClass="columnCustomClass" style="width: 80px; position:relative; padding-bottom: 30px;" filterBy="#{report.gwsReportPartOne.agreementEndDate}" filterMatchMode="contains" filterStyle="width:70px; position:absolute; bottom:4px;">
<f:facet name="header">
<h:outputText value="#{dictionary['agreement_deadline_date']}" />
</f:facet>
<h:outputText value="#{report.gwsReportPartOne.agreementEndDate}" >
<f:convertDateTime pattern="dd.MM.yyyy"/>
</h:outputText>
</p:column>
<p:column styleClass="columnCustomClass" style="width: 50px; position:relative; padding-bottom: 30px;" filterBy="#{report.gwsReportPartOne.agreementStatus.code}" filterMatchMode="contains" filterStyle="width:40px; position:absolute; bottom:4px;">
<f:facet name="header">
<h:outputText value="#{dictionary['agreement_status']}" />
</f:facet>
<h:outputText value="#{report.gwsReportPartOne.agreementStatus.code}" />
</p:column>
<p:column styleClass="columnCustomClass" style="width: 80px; position:relative; padding-bottom: 30px;" filterBy="#{report.gwsReportPartOne.agreementSum}" filterMatchMode="contains" filterStyle="width:70px; position:absolute; bottom:4px;">
<f:facet name="header">
<h:outputText value="#{dictionary['total_sum_of_agreement_without_vat']}, #{viewAllAnalyticsBean.getThTengeOrUsd()}" />
</f:facet>
<h:outputText value="#{viewAllAnalyticsBean.convertValueToCurrentCurrency(report.gwsReportPartOne.agreementSum)}">
<f:convertNumber pattern="0.00#" locale="ru-RU"/>
</h:outputText>
</p:column>
<p:column styleClass="columnCustomClass" style="width: 80px; position:relative; padding-bottom: 30px;" filterBy="#{report.gwsReportPartOne.plannedSum}" filterMatchMode="contains" filterStyle="width:70px; position:absolute; bottom:4px;">
<f:facet name="header">
<h:outputText value="#{dictionary['planned_sum_in_gpz_without_vat']}, #{viewAllAnalyticsBean.getThTengeOrUsd()}" />
</f:facet>
<h:outputText value="#{viewAllAnalyticsBean.convertValueToCurrentCurrency(report.gwsReportPartOne.plannedSum)}" >
<f:convertNumber pattern="0.00#" locale="ru-RU"/>
</h:outputText>
</p:column>
<p:column styleClass="columnCustomClass" style="width: 80px; position:relative; padding-bottom: 30px;" filterBy="#{report.gwsReportPartOne.actuallyPaidSum}" filterMatchMode="contains" filterStyle="width:70px; position:absolute; bottom:4px;">
<f:facet name="header">
<h:outputText value="#{dictionary['actually_paid_sum_for_report_period_of_agreement_without_vat']}, #{viewAllAnalyticsBean.getThTengeOrUsd()}" />
</f:facet>
<h:outputText value="#{viewAllAnalyticsBean.convertValueToCurrentCurrency(report.gwsReportPartOne.actuallyPaidSum)}" >
<f:convertNumber pattern="0.00#" locale="ru-RU"/>
</h:outputText>
</p:column>
<p:column styleClass="columnCustomClass" style="width: 100px; position:relative; padding-bottom: 30px; background-color: #{two.gwsSumWithoutVatColor}" filterBy="#{report.gwsSumWithoutVat}" filterMatchMode="contains" filterStyle="width:90px; position:absolute; bottom:4px;">
<f:facet name="header">
<h:outputText value="#{dictionary['tender_volume_without_vat_in_price']}, #{viewAllAnalyticsBean.getThTengeOrUsd()}" />
</f:facet>
<h:outputText value="#{viewAllAnalyticsBean.convertValueToCurrentCurrency(report.gwsSumWithoutVat)}">
<f:convertNumber pattern="0.00#" locale="ru-RU"/>
</h:outputText>
</p:column>
<p:column styleClass="columnCustomClass" style="width: 80px; position:relative; padding-bottom: 30px;" filterBy="#{report.gwsReportPartOne.supplierBinOrIin}" filterMatchMode="contains" filterStyle="width:70px; position:absolute; bottom:4px;">
<f:facet name="header">
<h:outputText value="#{dictionary['supplier_bin_iin']}" />
</f:facet>
<h:outputText value="#{report.gwsReportPartOne.supplierBinOrIin}" />
</p:column>
<p:column styleClass="columnCustomClass" style="width: 150px; position:relative; padding-bottom: 30px;" filterBy="#{report.gwsReportPartOne.supplierName}" filterMatchMode="contains" filterStyle="width:140px; position:absolute; bottom:4px;">
<f:facet name="header">
<h:outputText value="#{dictionary['supplier_gws_name']}" />
</f:facet>
<h:outputText value="#{report.gwsReportPartOne.supplierName}" />
</p:column>
<p:column styleClass="columnCustomClass" style="width: 60px; position:relative; padding-bottom: 30px;" filterBy="#{report.gwsReportPartOne.supplierCountry.code}" filterMatchMode="contains" filterStyle="width:50px; position:absolute; bottom:4px;">
<f:facet name="header">
<h:outputText value="#{dictionary['supplier_gws_country']}" />
</f:facet>
<h:outputText value="#{report.gwsReportPartOne.supplierCountry.code}" />
</p:column>
<p:column styleClass="columnCustomClass" style="width: 80px; position:relative; padding-bottom: 30px;" filterBy="#{report.kazcontent}" filterMatchMode="contains" filterStyle="width:70px; position:absolute; bottom:4px;">
<f:facet name="header">
<h:outputText value="#{dictionary['local_content_piece']}, %" />
</f:facet>
<h:outputText value="#{report.kazcontent}" >
<f:convertNumber pattern="0.00#" locale="ru-RU"/>
</h:outputText>
<ui:remove><h:outputText value="#{report.kazcontentInService}" >
<f:convertNumber pattern="0.00#" locale="ru-RU"/>
</h:outputText></ui:remove>
</p:column>
<p:column styleClass="columnCustomClass" style="width: 80px; position:relative; padding-bottom: 30px;" filterBy="#{report.procurementSumOfLocalContentOfGws}" filterMatchMode="contains" filterStyle="width:70px; position:absolute; bottom:4px;">
<f:facet name="header">
<h:outputText value="#{dictionary['procurement_sum_of_local_content_of_tru']}, #{viewAllAnalyticsBean.getThTengeOrUsd()}" />
</f:facet>
<h:outputText value="#{viewAllAnalyticsBean.convertValueToCurrentCurrency(report.procurementSumOfLocalContentOfGws)}" >
<f:convertNumber pattern="0.00#" locale="ru-RU"/>
</h:outputText>
</p:column>
<p:columnGroup type="footer">
<p:row>
<p:column footerText="#{dictionary['totals']}: " style="text-align:right"/>
<p:column footerText="" />
<p:column footerText="" />
<p:column footerText="" />
<p:column footerText="" />
<p:column footerText="" />
<p:column footerText="" />
<p:column footerText="" />
<p:column footerText="" />
<p:column footerText="" />
<p:column footerText="" />
<p:column footerText="#{viewAllAnalyticsBean.totalAgreementSum}" />
<p:column footerText="#{viewAllAnalyticsBean.totalPlannedSum}" />
<p:column footerText="#{viewAllAnalyticsBean.totalActualPaid}" />
<p:column footerText="#{viewAllAnalyticsBean.totalGwsSum}" />
<p:column footerText="" />
<p:column footerText="" />
<p:column footerText="" />
<p:column footerText="#{viewAllAnalyticsBean.averageKazContent} %" />
<p:column footerText="#{viewAllAnalyticsBean.totalGwsLocalContent}" />
</p:row>
</p:columnGroup>
</p:dataTable>
I have onFilterDataTable function which fires each time when user start to type to filter fields on each column.
public void onFilterDataTable(AjaxBehaviorEvent event) {
System.out.println("Filter called");
DataTable table = (DataTable) event.getSource();
filteredGwsReportPartTwoList = table.getFilteredValue();
isFiltered = filteredGwsReportPartTwoList.size() != gwsReportPartTwoList.size();
countTotalsAndGenerateGwsReportPartOne(isFiltered);
}
but in Primefaces shows me that getFilteredValue() returns null when Primefaces 3.5 returns ready filtered list.
What is the problem? And how to check if data table shows already filtered data on server side?
me the same thing has happened to move from version 3.5 to 4.0.
I solved the problem using remotecomand to call actionlistener method.
<p:dataTable filterDelay="1000" emptyMessage="No se encontraron elementos" widgetVar="tb1"
id="tablaFact" var="item" selection="#{listadoFacturasMB.selectedFactura}" selectionMode="single" paginator="true"
rows="20" rowKey="#{item.idFactura}" value="#{listadoFacturasMB.facturaUtilList}" filteredValue="#{listadoFacturasMB.filterFacturaUtilList}">
<p:ajax event="filter" oncomplete="handleLoadStart();" update=":frm1:tablaFact :frm1:panelTotal"/>
<p:column style="width:10%" headerText="Importe Total" id="cff3">
<h:outputText value="#{item.importeTotal}"/>
</p:column>
<p:column style="width:10%" headerText="Importe CUC" id="cjj3">
<h:outputText value="#{item.importeCuc}"/>
</p:column>
</p:dataTable>
<p:remoteCommand id="rcom" name="loadRemoteContent" process="#this" update="panelTotal, tablaFact"
actionListener="#{listadoFacturasMB.filterListener2}"/>
Backingbean
public void filterListener2() {
try {
if (filterFacturaUtilList != null) {
//your code
}
}
} catch (Exception e) {
JsfUtil.addErrorMessage(e, "Error: filterListener() " + e.getMessage());
}
}
in PF 5.0 you need to explicit define filteredValue:
<p:dataTable id="gwsReportAllPartListDataTable"
value="#{viewAllAnalyticsBean.gwsReportPartTwoList}"
var="report"
paginator="true"
rows="100"
paginatorTemplate="{PageLinks} {CurrentPageReport}"
currentPageReportTemplate="{currentPage} #{dictionary['out_of']} {totalPages}"
emptyMessage="#{dictionary['nothing_is_here']}"
scrollable="true"
scrollWidth="1221"
scrollHeight="500"
filteredValue="#{someBeanOrScope.someList}">
Any idea why f:setPropertyActionListener is not working when I'm setting p:dataTable id="inv#{ck001.sequence}", which is a value obtained from the pageBean.
It works ok if I set it to p:dataTable id="inv1", a fixed value
<table class="layout-matrix">
<tr>
<td class="layout-cell" rowspan="3" style="width: 33.33%;">
<p:poll interval="60" listener="#{ck001.refreshData}" update="#form"/>
<div id="availableInventory" style="overflow: scroll; height:1030px" >
<table class="outer-wrap"><tr><td class="outer-cell"><table class="inner-wrap"><tr><td class="inner-cell">
<p:fieldset legend="#{i18n.static.availableInventory}">
<c:forEach var="invBBD" items="#{ck001.distinctBBD}">
<p:panel styleClass="has-footer" >
<p:dataTable id="inv#{ck001.sequence}" var="inv" value="#{ck001.getAvailableInventoryViewModelList(invBBD)}" style="width:300px;">
<f:facet name="header">
<h:outputText value="#{i18n.static.bestBeforeDate}: #{invBBD}" styleClass="strong"/>
</f:facet>
<p:column headerText="#{i18n.static.productDescription}" width="200">
<h:outputText value= "#{inv.productName}" style="display: block; background-color: #{inv.color}"/>
</p:column>
<p:column headerText="#{i18n.static.birdGrade}">
<h:outputText value= "#{inv.birdGrade}" style="display: block; background-color: #{inv.color}"/>
</p:column>
<p:column headerText="#{i18n.static.supplierName}" width="200">
<h:outputText value="#{inv.supplierName}" style="display: block; background-color: #{inv.color}"/>
</p:column>
<p:column headerText="#{i18n.static.quantity}">
<h:outputText value="#{inv.sumOfQuantityOnHand}" style="display: block; background-color: #{inv.color}"/>
</p:column>
<p:column>
<p:commandButton id="chickenReplenishment"
update=":chickenReplenishmentPopupForm:chickenReplenishmentPnl"
process="#this"
oncomplete="chickenReplenishmentPopup.show()"
icon="ui-icon-c34"
title="#{i18n.static.chickenReplenishment}">
<f:setPropertyActionListener value="#{inv}" target="#{ck001.selectedAvailableInventory}" />
<f:setPropertyActionListener value="#{invBBD}" target="#{ck001.selectedBestBeforeDate}" />
<f:setPropertyActionListener value="#{inv.sumOfQuantityOnHand}" target="#{ck001.quantityRequested}" />
</p:commandButton>
</p:column>
</p:dataTable>
</p:panel>
</c:forEach>
</p:fieldset>
</td></tr></table></td></tr></table>
</div>
</td>
....
I am implementing the vertical toggle panel but it is not getting toggled after the click on + icon, I have pasted entire code.
Code: Below is entire code:
find this comment in the Technical Sheet section
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Projects Details</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<h:outputScript library="js" name="ppcr.js"></h:outputScript>
<h:outputStylesheet library="css" name="ppcr.css"/>
<h:outputStylesheet library="css" name="styles.css"/>
<script type="text/javascript" language="JavaScript">
$(document).ready(function() {
$('.subMenu').smint({
'scrollSpeed' : 1000
});
});
</script>
</h:head>
<h:body onload="setTimeout(function() { window.scrollTo(0, 1) }, 100);">
<div class="header">
<h:graphicImage style="vertical-align: middle" value="resources/images/logoMainShort.gif" />
<b style="vertical-align: top;"> Quotation Tool</b>
</div>
<div style="line-height: 25px;margin: 0px 6px 0px 6px;">
<h:form>
<div class="navigation">
<h:outputLink value="projects.xhtml">
<h:outputText value="PROJECTS" style="color: #ffffff; text-decoration: none;"></h:outputText>
</h:outputLink>
<h:outputLink value="masterData.xhtml">
<b style="padding-left: 20px;">
<h:outputText
value="MASTER DATA"
style="color: #ffffff; text-decoration: none;">
</h:outputText>
</b>
</h:outputLink>
</div>
</h:form>
</div>
<div class= "background">
<div class="test" style="padding-top: 10px">Ford_V408_2015_PPCR01</div>
<!-- <div class="wrap"> -->
<div class="subMenu" style="margin-left: 1px">
List To Quote
</div>
<div class="subMenu" style="margin-left: 22%">
AVO
</div>
<div class="subMenu" style="margin-left: 43.8%">
Technical Sheet
</div>
<div class="subMenu" style="margin-left: 65%">
Geometry
</div>
<h:form id="testForm">
<div class="innersection">
<div class="section s5">
<div class="heading">
<h:outputText value="Project information" />
</div>
<p:panelGrid
style="margin:5px 0px 15px 0px;
width:100%"
styleClass="panelgrid">
<p:row>
<p:column colspan="8" />
</p:row>
<p:row>
<p:column style="border:white" styleClass="columnA">Brand Group</p:column>
<p:column styleClass="columnB">
<h:outputText value="Ford" />
</p:column>
<p:column styleClass="columnA">Model (Car Name) </p:column>
<p:column styleClass="columnB">
<h:outputText value="Ford Mondeo" />
</p:column>
<p:column styleClass="columnA">Annual Model Volume </p:column>
<p:column styleClass="columnB">
<h:outputText value="25 000" />
</p:column>
<p:column styleClass="columnA">Lifetime</p:column>
<p:column styleClass="columnB">
<h:outputText value="3 years" />
</p:column>
</p:row>
<p:row>
<p:column styleClass="columnA">Brand</p:column>
<p:column styleClass="columnB">
<h:outputText value="Ford" />
</p:column>
<p:column styleClass="columnA">Project Code</p:column>
<p:column>
<h:commandLink value="FORD_V408_2015" action="/projectDetails.xhtml" target="_blank"
style="cursor:pointer;font-style: normal; font-family: Arial;color:#0000ff;font-size:13px;text-decoration: underline;"/>
</p:column>
<p:column styleClass="columnA">Reason to quote</p:column>
<p:column styleClass="columnB">
<h:outputText value="New Car" />
</p:column>
<p:column styleClass="columnA">Peak Volume</p:column>
<p:column styleClass="columnB">
<h:outputText value="25 000" />
</p:column>
</p:row>
<p:row>
<p:column colspan="8" />
</p:row>
</p:panelGrid>
<div class="heading">
<h:outputText value="PPCR general information" />
</div>
<p:panelGrid
id="addText"
style="margin:5px 0px 15px 0px; width:100%"
styleClass="panelgrid">
<p:row>
<p:column colspan="8" />
</p:row>
<p:row>
<p:column styleClass="columnA">Part Type</p:column>
<p:column styleClass="columnB">
<h:outputText value="WS" />
</p:column>
<p:column styleClass="columnA">PPCR Date</p:column>
<p:column styleClass="columnB">
<h:outputText value="25/10/2013" />
</p:column>
<p:column styleClass="columnA" style="width:14%;">Development Step</p:column>
<p:column styleClass="columnB">
<h:selectOneMenu value="#{ppcrGeneral.selectedStepsValue}" style="width:280px;" >
<f:selectItems value="#{ppcrGeneral.stepsValue}" />
</h:selectOneMenu>
</p:column>
</p:row>
<p:row>
<p:column styleClass="columnA">Family</p:column>
<p:column styleClass="columnB">
<h:outputText value="Laminated " />
</p:column>
<p:column styleClass="columnA">Reply Date</p:column>
<p:column styleClass="columnB">
<h:inputText value="04/11/2013" />
</p:column>
<p:column styleClass="columnA">Reason for<br/> update</p:column>
<p:column rowspan="3" styleClass="columnB">
<p:inputTextarea rows="6" cols="42" autoResize="false" />
</p:column>
</p:row>
<p:row>
<p:column styleClass="columnA">Market</p:column>
<p:column styleClass="columnB">
<h:selectOneMenu value="#{ppcrGeneral.selectedMarketValue}" style="width:140px;" >
<f:selectItems value="#{ppcrGeneral.marketValue}" />
</h:selectOneMenu>
</p:column>
<p:column styleClass="columnA" style="width:14%;">Reference PPCR</p:column>
<p:column styleClass="columnB">
<h:inputText size="16"/>
</p:column>
<p:column/>
</p:row>
<p:row>
<p:column
style="font-style: normal; font-family:Arial;font-size: 13px; font-weight: bold;width:15%;color: #333333;
text-align: right;">
Document Hyperlink
</p:column>
<p:column colspan="3">
<h:inputText size="51"/>
<p:commandLink>
<p:graphicImage
style="vertical-align: middle; margin-left: 5px;position: middle;border: none; WIDTH:15px; HEIGHT:15px;"
value="resources/images/attach.png"/>
</p:commandLink>
</p:column>
<p:column/>
</p:row>
<p:row>
<p:column colspan="4"/>
<p:column styleClass="columnA" style="vertical-align:top;">Industrialization Manager</p:column>
<p:column styleClass="columnB" style="width:15%" >
<ui:repeat var="input" value="#{bean.inputTexts}">
<p:inputText size="18" value="#{inputTexts}" style="margin-bottom:2px;"/>
</ui:repeat>
<b style="padding:0px 0px 0px 18px">
<p:commandButton
value="Add Manager"
actionListener="#{bean.addInput}"
update="addText"
style=" margin-bottom:10px;width:auto;height:28px;font-style: normal; font-family:Arial;font-size: 13px;
color: #000000;text-align:center;font-weight: normal;text-decoration:none;cursor: pointer "/>
</b>
</p:column>
</p:row>
<p:row>
<p:column colspan="8" />
</p:row>
</p:panelGrid>
<div class="heading">
<h:outputText value="Packaging" />
</div>
<p:panelGrid
styleClass="panelgrid"
style="margin:5px 0px 15px 0px; width:100%;" >
<p:row>
<p:column colspan="8" />
</p:row>
<p:row>
<p:column styleClass="columnC" style="width:25%">Customer Packaging
<p:selectBooleanCheckbox style="position:absolute; margin-left:10px;"></p:selectBooleanCheckbox>
</p:column>
<p:column styleClass="columnC" style="width:25%">AGC Container
<p:selectBooleanCheckbox style="position:absolute; margin-left:10px;"></p:selectBooleanCheckbox>
</p:column>
<p:column styleClass="columnC" style="width:25%">OEM
<p:selectBooleanCheckbox style="position:absolute; margin-left:10px;"></p:selectBooleanCheckbox>
</p:column>
<p:column styleClass="columnC" style="width:25%; text-align:center;">ARG
<p:selectBooleanCheckbox style="position:absolute; margin-left:10px;"></p:selectBooleanCheckbox>
</p:column>
</p:row>
<p:row>
<p:column colspan="8" />
</p:row>
</p:panelGrid>
<div class="heading">
<h:outputText value="Logistics" />
</div>
<p:panelGrid
id="logistics"
styleClass="panelgrid"
style="margin:5px 0px 15px 0px; width:100%;" >
<p:row>
<p:column colspan="6" />
</p:row>
<p:row>
<p:column styleClass="columnA" style="width:15%;vertical-align:top;">Shipping location </p:column>
<p:column styleClass="columnB" >
<ui:repeat var="input" value="#{bean.inputLocation}">
<p:inputText value="#{inputLocation}" style="margin-bottom:2px;"/>
</ui:repeat>
<p:commandButton
value="Add Location"
actionListener="#{bean.addLocation}"
update="logistics"
style=" margin-bottom:10px;width:auto;height:28px;font-style: normal; font-family:Arial;
font-size: 13px;color: #000000;text-align:center;font-weight: normal;text-decoration:none;cursor: pointer "/>
</p:column>
<p:column styleClass="columnA" style="width:15%; vertical-align:top; ">Incoterm </p:column>
<p:column styleClass="columnB">
<ui:repeat var="input" value="#{bean.inputIncoterm}">
<h:selectOneMenu value="#{ppcrGeneral.selectedIncotermValue}" style="width:140px;margin-bottom:6px" >
<f:selectItems value="#{ppcrGeneral.incotermValue}" />
</h:selectOneMenu>
</ui:repeat>
<!-- <b style="margin: 0px 30px 20px 0px;"> -->
<p:commandButton
value="Add Incoterm"
actionListener="#{bean.addIncoterm}"
update="logistics"
style=" margin-bottom:10px;width:auto;height:28px;font-style: normal; font-family:Arial;font-size: 13px;
color: #000000;text-align:center;font-weight: normal;text-decoration:none;cursor: pointer "/>
<!-- </b> -->
</p:column>
<p:column styleClass="columnA" style="width:15% ;vertical-align:top;" >Just in sequence </p:column>
<p:column styleClass="columnB" style="width:20%;vertical-align:top;">
<h:selectOneMenu value="#{ppcrGeneral.selectedSequenceValue}" style="width:100px;" >
<f:selectItems value="#{ppcrGeneral.sequenceValue}" />
</h:selectOneMenu>
<h:outputText
value="per day"
style="margin-left:5px;font-style: normal; font-family:Arial; FONT-WEIGHT: bold;color:#999999;font-size: 13px;"/>
</p:column>
</p:row>
<p:row>
<p:column colspan="8" />
</p:row>
</p:panelGrid>
</div>
<div class="section s1">
Removed code fron this section
</div>
<div class="section s2">
<h1>AVO</h1>
</div>
<!-- PPCR: Technical Section -->
<div class="section s3">
<div class="heading">
<h:outputText value="Technical Sheet" />
</div>
<div class="border">
<p:panelGrid style="margin:5px 0px 15px 0px; width:100%"
styleClass="panelgrid">
<p:row>
<p:column colspan="2"/>
</p:row>
<p:row>
<p:column styleClass="columnB" style="width:30%">
<h:commandLink action="/pdfFileUpload.xhtml" target="options:height=200, width=300">
<p:graphicImage value="resources/images/upload.png"
style="vertical-align: middle; position: middle;border: none;"/>
</h:commandLink>
</p:column>
<!-- Panel is not working -->
<p:column rowspan="11" style="vertical-align:top">
<p:panel header="Size" toggleable="true" rendered="true"
toggleOrientation="vertical">
<h:outputText value="Test" />
</p:panel>
</p:column>
<!-- Panel is not working -->
</p:row>
<p:row>
<p:column />
</p:row>
<p:row>
<p:column />
</p:row>
<p:row>
<p:column>
<h:outputText
value="Manufacuring Control Method"
style="color:#164990;font-size:13px;font-family:Arial;font-style: normal;font-weight: bold;" />
</p:column>
</p:row>
<p:row>
<p:column >
<h:outputText value="Check fixt. position" styleClass="columnD"/>
<h:selectOneMenu
value="#{ppcrGeneral.selectedMarketValue}"
style="width:200px;font-style: normal;font-family: Arial;FONT-WEIGHT: 400;font-size: 13px;text-align: left;color: #333333;
margin-left: 15px;" >
<f:selectItems value="#{ppcrGeneral.marketValue}" />
</h:selectOneMenu>
</p:column>
</p:row>
<p:row>
<p:column >
<h:outputText value="Check fixt. concept" styleClass="columnD"/>
<h:selectOneMenu
value="#{ppcrGeneral.selectedMarketValue}"
style="width:200px;font-style: normal;font-family: Arial;FONT-WEIGHT: 400;font-size: 13px;text-align: left;color: #333333;
margin-left: 15px;" >
<f:selectItems value="#{ppcrGeneral.marketValue}" />
</h:selectOneMenu>
</p:column>
</p:row>
<p:row>
<p:column >
<h:outputText value="Spacers" styleClass="columnD" style="margin-left:21%"/>
<h:selectOneMenu
value="#{ppcrGeneral.selectedMarketValue}"
style="width:200px;font-style: normal;font-family: Arial;FONT-WEIGHT: 400;font-size: 13px;text-align: left;color: #333333;
margin-left: 15px;" >
<f:selectItems value="#{ppcrGeneral.marketValue}" />
</h:selectOneMenu>
</p:column>
</p:row>
<p:row>
<p:column >
<h:outputText value="Stoppers" styleClass="columnD" style="margin-left:20%"/>
<h:selectOneMenu
value="#{ppcrGeneral.selectedMarketValue}"
style="width:200px;font-style: normal;font-family: Arial;FONT-WEIGHT: 400;font-size: 13px;text-align: left;color: #333333;
margin-left: 15px;" >
<f:selectItems value="#{ppcrGeneral.marketValue}" />
</h:selectOneMenu>
</p:column>
</p:row>
<p:row>
<p:column colspan="2"/>
</p:row>
<p:row>
<p:column colspan="2"/>
</p:row>
</p:panelGrid>
</div>
</div>
<!-- PPCR: Technical Section Ends -->
<div class="section s4">
<h1>Geometry</h1>
<br class="clear"></br>
</div>
</div>
<script type="text/javascript" language="javascript">
var _gaq = _gaq || [];
_gaq.push([ '_setAccount', 'UA-9804757-1' ]);
_gaq.push([ '_trackPageview' ]);
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl'
: 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
</h:form>
</div>
</h:body>
</html>
probably that's because of jquery ,if you include jquery in your page many of primefaces components doesn't work correctly,
replace
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
with :
<h:outputScript library="primefaces" name="jquery/jquery.js" />
I have an extendedDataTable inside of a Panel (I also tried just sticking it in a div). The width of the table extends to fill the parent instead of the parent shrinking to the content.
code for the table
<h:body>
<ui:composition template="../main_template.xhtml">
<ui:define name="content">
<h:form>
<div class="table_panel">
<rich:extendedDataTable value="#{user_list.userList}" var="user" filterVar="filterValue" id="table"
sortPriority="#{userListSortingBean.sortPriorities}"
selectionMode="none"
rowClasses="odd_row, even_row">
<rich:column sortBy="#{user.nameFirst}" filterExpression="#{empty filterValue or fn:startsWith(user.nameFirst, filterValue)}">
<f:facet name="header">First Name</f:facet>
<h:outputText value="#{user.nameFirst}" />
</rich:column>
<rich:column sortBy="#{user.nameLast}" filterExpression="#{empty filterValue or fn:startsWith(user.nameLast, filterValue)}">
<f:facet name="header">Last Name</f:facet>
<h:outputText value="#{user.nameLast}" />
</rich:column>
<rich:column sortBy="#{user.email}" filterExpression="#{empty filterValue or fn:startsWith(user.email, filterValue)}">
<f:facet name="header">Email</f:facet>
<h:outputText value="#{user.email}" />
</rich:column>
<rich:column sortBy="#{user.company.name}" filterExpression="#{empty filterValue or fn:startsWith(user.company.name, filterValue)}">
<f:facet name="header">Company</f:facet>
<h:outputText value="#{user.company.name}" />
</rich:column>
<rich:column sortBy="#{user.company.activeFlag}" filterExpression="#{empty filterValue or fn:startsWith(user.company.activeFlag, filterValue)}">
<f:facet name="header">Company Active Status</f:facet>
<h:outputText value="#{user.company.activeFlag}" />
</rich:column>
<rich:column sortBy="#{user.company.expirationDate}" filterExpression="#{empty filterValue or fn:startsWith(user.company.expirationDate, filterValue)}">
<f:facet name="header">Expiration Date</f:facet>
<h:outputText value="#{user.company.expirationDate}" />
</rich:column>
</rich:extendedDataTable>
<rich:messages />
</div>
</h:form>
</ui:define>
</ui:composition>
relevant css
#main_content .table_panel {
background-color: #BED6F8;
color: #0066cc;
border-width: 3px;
}
#main_content .rf-edt {
border: none;
}
#main_content .rf-edt-ftr {
border: none;
}
.even_row {
background-color: #ECF3FE;
}
.odd_row {
background-color: #FCFFFE;
}
and I intended to post a picture of the result, but don't have the reputation for it. What is going on Is my wrapper div is being filled by the table even though the data in the table only needs about 50% of the space. I just need the table to shrink down to it's contents.
Just for information's sake. As of richfaces 4.3.3 this is just how the column widths work. We ended up making the table just a bit smaller than the sum of all the columns and accepting the bottom scroll bar.
I am trying to highlight the rows of a table when mouse is over. Here is the code:
<div style="position: relative; top: 120px; left: 300px">
<h:panelGrid columns="2">
<h:form>
<rich:extendedDataTable onrowmouseover ="this.style.backgroundColor='yellow'"
onrowmouseout="this.style.backgroundColor='white'" value="#{moneyTransferManager.allAccounts}" var="accounts"
selection="#{extTableSelectionBean.selection}" id="table" frozenColumns="2"
style="height:170px; width:484px;">
<a4j:ajax execute="#form" event="selectionchange" listener="#{extTableSelectionBean.selectionListener}"
render=":res"/>
<f:facet name="header">
<h:outputText value="Hesaplarım"/>
</f:facet>
<rich:column width="120px;">
<f:facet name="header">
<h:outputText value="Hesap Numarası"/>
</f:facet>
<h:outputText value="#{accounts.accountNumber}"/>
</rich:column>
<rich:column width="120px;">
<f:facet name="header">
<h:outputText value="Para Birimi"/>
</f:facet>
<h:outputText value="#{accounts.accountCurrency}"/>
</rich:column>
<rich:column width="120px;">
<f:facet name="header">
<h:outputText value="IBAN"/>
</f:facet>
<h:outputText value="#{accounts.iban}"/>
</rich:column>
<rich:column width="120px;">
<f:facet name="header">
<h:outputText value="Bakiye"/>
</f:facet>
<h:outputText value="#{accounts.balance}"/>
</rich:column>
</rich:extendedDataTable>
</h:form>
<a4j:outputPanel id="res">
<rich:panel header="Seçilen Hesap:" rendered="#{not empty extTableSelectionBean.selectionItems}">
<rich:list type="unordered" value="#{extTableSelectionBean.selectionItems}" var="sel">
<h:outputText value="#{sel.accountCurrency} - #{sel.iban} - #{sel.balance}"/>
</rich:list>
</rich:panel>
</a4j:outputPanel>
<rich:panel styleClass="top">
<div style="position: relative; left: -3px; top: 23px">
<h:outputText style=" font-size: 12px; font-weight: bold; " value="Yapmak istediğiniz işlem .."></h:outputText>
</div>
<h:form>
<div style="position: relative; left: 160px; top: -3px">
<rich:select value="#{transactionManager.selection}" defaultLabel="Bir işlem seçin...">
<f:selectItem itemValue="0" itemLabel="Hesap Hareketlerini Listele" />
</rich:select>
</div>
<div style="position: relative; left: 380px; top: -22px">
<h:commandButton action="#{transactionManager.accountActivity()}" value="Devam" style="color: #000000; font-weight: bold; width: 70px; height: 21px; background-color: grey; -moz-border-radius: 0px; -webkit-border-radius: 15px;"></h:commandButton>
</div>
</h:form>
</rich:panel>
</h:panelGrid>
</div>
The problem is, only columns 1-2 together or 3-4 together are highlighted like this:
Can anyone tell me the problem? Thanks
This is being caused by the frozenColumns attribute. Remove it if you want all the rows to be selected.