Barcelona Subtable Rendering Error: Column Header Text Showing in every row (SOS!)

[ushiezoe@gmail.com]

Hi All,

I am getting a rendering error with the Barcelona theme for subtable implementations. The column header text appears along with the column data! Below is a piece of code. I can't see a way to attach a the screen shot of the web page.

<p:dataTable scrollable="true" id="equityPortfolioTable" styleClass="fixed-size" value="#{investmentFundBean.equityPortSummaryList}" var="portSummary" reflow="true" paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {Exporters}">
<f:facet name="header">
<p:outputLabel value="EQUITIES"/>
</f:facet>
<p:columnGroup type="header">
<p:row>
<p:column headerText="Security" />
<p:column headerText="Category" />
<p:column headerText="Quantity" />
<p:column headerText="Price" />
<p:column headerText="Average Cost" />
<p:column headerText="Market Value" />
<p:column headerText="Cost" />
<p:column headerText="Growth/(Decline)" />
<p:column headerText="Growth %" />
<p:column headerText="Percent of Total" />
</p:row>
</p:columnGroup>
<p:subTable value="#{portSummary.portfolioSummaryList}" var="portDetail">
<p:column>
<p:commandLink id="securityNameCol" ajax="false" value="#{portDetail.securityName}" actionListener="#{investmentFundBean.viewEquityFundTranxEventCascaded}" action="#{investmentFundBean.viewFundTranxCascaded}"/>
</p:column>
<p:column>
<p:outputLabel value="#{portDetail.categoryName}"/>
</p:column>
<p:column>
<p:outputLabel id="quatityCol" value="#{portDetail.quatity}">
<f:convertNumber pattern="###,###.##" minFractionDigits="2" maxFractionDigits="2"/>
</p:outputLabel>
</p:column>
<p:column>
<p:outputLabel id="priceCol" value="#{portDetail.price}">
<f:convertNumber pattern="###,###.##" minFractionDigits="2"/>
</p:outputLabel>
</p:column>
<p:column>
<p:outputLabel value="#{portDetail.averageCost}">
<f:convertNumber pattern="###,###.##" minFractionDigits="2"/>
</p:outputLabel>
</p:column>
<p:column>
<p:outputLabel value="#{portDetail.marketValue}">
<f:convertNumber pattern="###,###.##" minFractionDigits="2"/>
</p:outputLabel>
</p:column>
<p:column>
<p:outputLabel value="#{portDetail.cost}">
<f:convertNumber pattern="###,###.##" minFractionDigits="2"/>
</p:outputLabel>
</p:column>
<p:column>
<p:panelGrid>
<p:outputLabel value="(" styleClass="#{portDetail.amountPerformanceColor}" rendered="#{portDetail.negativeDifference}"/>
<p:outputLabel value="#{portDetail.difference * -1}" styleClass="#{portDetail.amountPerformanceColor}" rendered="#{portDetail.negativeDifference}">
<f:convertNumber pattern="###,###.##" minFractionDigits="2"/>
</p:outputLabel>
<p:outputLabel value="#{portDetail.difference}" styleClass="#{portDetail.amountPerformanceColor}" rendered="#{!portDetail.negativeDifference}">
<f:convertNumber pattern="###,###.##" minFractionDigits="2"/>
</p:outputLabel>
<p:outputLabel value=")" styleClass="#{portDetail.amountPerformanceColor}" rendered="#{portDetail.negativeDifference}"/>
<p:graphicImage url="#{portDetail.amountPerformanceSignImage}" height="20"/>
</p:panelGrid>
</p:column>
<p:column>
<p:panelGrid>
<p:outputLabel value="(" styleClass="#{portDetail.amountPerformanceColor}" rendered="#{portDetail.negativeDifference}"/>
<p:outputLabel value="#{portDetail.differencePercent * -1}" styleClass="#{portDetail.amountPerformanceColor}" rendered="#{portDetail.negativeDifference}">
<f:convertNumber pattern="###,###.##" minFractionDigits="2"/>
</p:outputLabel>
<p:outputLabel value="#{portDetail.differencePercent}" styleClass="#{portDetail.amountPerformanceColor}" rendered="#{!portDetail.negativeDifference}">
<f:convertNumber pattern="###,###.##" minFractionDigits="2"/>
</p:outputLabel>
<p:outputLabel value=")" styleClass="#{portDetail.amountPerformanceColor}" rendered="#{portDetail.negativeDifference}"/>
<p:graphicImage url="#{portDetail.amountPerformanceSignImage}" height="20"/>
</p:panelGrid>
</p:column>
<p:column>
<p:outputLabel value="#{portDetail.percentOfTotal}">
<f:convertNumber pattern="###,###.##" minFractionDigits="2"/>
</p:outputLabel>
</p:column>
<p:columnGroup type="footer">
<p:row>
<p:column colspan="5" footerText="" />
<p:column>
<f:facet name="footer">
<p:outputLabel escape="false" value="#{portSummary.marketValue}">
<f:convertNumber pattern="###,###.##" minFractionDigits="2"/>
</p:outputLabel>
</f:facet>
</p:column>
<p:column>
<f:facet name="footer">
<p:outputLabel escape="false" value="#{portSummary.cost}">
<f:convertNumber pattern="###,###.##" minFractionDigits="2"/>
</p:outputLabel>
</f:facet>
</p:column>
<p:column>
<f:facet name="footer">
<p:outputLabel escape="false" value="#{portSummary.difference}">
<f:convertNumber pattern="###,###.##" minFractionDigits="2"/>
</p:outputLabel>
</f:facet>
</p:column>
<p:column>
<f:facet name="footer">
<p:outputLabel escape="false" value="#{portSummary.differencePercent}">
<f:convertNumber pattern="###,###.##" minFractionDigits="2"/>
</p:outputLabel>
</f:facet>
</p:column>
<p:column>
<f:facet name="footer">
<p:outputLabel escape="false" value="#{portSummary.percentOfTotal}">
<f:convertNumber pattern="###,###.##" minFractionDigits="2"/>
</p:outputLabel>
</f:facet>
</p:column>
</p:row>
</p:columnGroup>
</p:subTable>
</p:dataTable>

[mert.sincan]

Could you please try it without Barcelona?

[ushiezoe@gmail.com]

Hi Aragon,

Thanks for your response. Yes I have tried it without Barcelona and it works perfectly. I migrated from Primefaces MetroUI to Barcelona theme, and this is one of the problems I have inherited. And this fix is a must have for my team, because we had to make a strong case in favor of the Barcelona theme towards the migration. But now this rendering issue is a total no no as project is live and the user experience is simply abysmal!

Regards.

[ushiezoe@gmail.com]

Hi all,

Do people even get help on this site at all? I have made a complaint on this forum, and after one week, I have 23 views and 2 replies - one of which is from myself.

This is not good for business, especially as I am a customer who has spent money to purchase this theme. My solution is being threatened by a user experience problem caused by this UI issue, and I am stuck at this point.

My expectation is that the Primefaces Barcelona tech team members would be on ground in this forum to provide support to customers who are in need, along with customers sharing their experiences. But I am not getting that sense as of yet. Please If there's somewhere else I can go to get support on my current issue, I beg for someone to help point me there. This is a major existential threat to my business!

Regards.

[mert.sincan]

Sorry for my late reply. Our office was closed due to official vacations.

I can't see a way to attach a the screen shot of the web page.

You can upload your img to http://i62.tinypic.com/ or http://postimage.org/ (sample websites). Then add your url into

OR

you can give me a link for image as dropbox link, .. reflow="true"

Also, DataTable doesn't support reflow=true with p:columnGroup and p:row.

[ushiezoe@gmail.com]

Hi Aragon,

Thanks for coming through again, after what, may be 2 months of your first response, ya? I would say too little too late, as my team already figured out the reflow="true" problem somewhere in early September. We have since moved on from this problem, but I only dropped by today to share our solution only to see your response.

If I may weigh in on the issue about your office, I'm not buying that excuse of yours. In this age and time, you don't need a brick and mortar office to connect with your customers. I think you have to grossly improve on your response time as a quality of service element. You are a framework provider, which means your customers are technology providers themselves. If your quality of service is poor, there could easily be a cascading effect on the quality of service in the value chain.

You have to charge up your team for this mission. You have a good product, don't allow poor customer service to strangle it!

Cheers.