dataTable styling question

[Dave Alvarado]

Hi, Does anyone know how to make a panelGrid's main header row different from the cell's header rows? For example, if you look at the screen shot

http://screencast.com/t/T7sN6r3B

I want the "Results 1-20" row to have a different class than the row with the column titles ("Client System", "Destination System", etc.). Here's the (unsuccessful) JSF I'm using ...

<h:dataTable id="dt1" binding="#{SearchResultsPage.dataTable}" value="#{SearchBean.results}" var="item" border="10" cellpadding="5" cellspacing="3" dir="LTR" frame="hsides" rules="all" columnClasses="tableHeader" rowClasses="evenRow,oddRow" headerClass="tableHeader2">
<f:facet name="header">
<hutputText value="Results #{SearchBean.startResultRow}-#{SearchBean.lastResultRow} of #{SearchBean.numResults} (#{SearchBean.numPages} page(s))" />
</f:facet>
<h:column>
<f:facet name="header">
<hutputText value="Client System" />
</f:facet>
<hutputText value="#{item.clientSys}"></hutputText>
</h:column>



"f:facet" doesn't support styleClass, so I pose this question to the group for inspiration. Thanks, - Dave

[Darryl Nortje]

Hey Dave,

facet might not support styleClass, but doesn't outputText support styleClass??

cheers
Darryl

[Dave Alvarado]

The problem is applying a styleClass to the outputText only applies it to the span and not the overall TD. This is what happens

http://screencast.com/t/jl3oCGS3

when I do this ...

<h:dataTable id="dt1" binding="#{SearchResultsPage.dataTable}" value="#{SearchBean.results}" var="item" border="10" cellpadding="5" cellspacing="3" dir="LTR" frame="hsides" rules="all" rowClasses="evenRow,oddRow" headerClass="tableHeader2">
<f:facet name="header">
<hutputText value="Results #{SearchBean.startResultRow}-#{SearchBean.lastResultRow} of #{SearchBean.numResults} (#{SearchBean.numPages} page(s))" />
</f:facet>
<h:column>
<f:facet name="header">
<hutputText styleClass="tableHeader" value="Client System" />
</f:facet>
<hutputText value="#{item.clientSys}"></hutputText>
</h:column>

There's got to be a way to make the style apply to the table cell. How?

Thanks, - Dave

[Kavita Tipnis]

I implemented a simple datatable to do what you were aiming for.
Here is the code:

   
 
 <h:dataTable id="table1" value="#{RequestBean.countryList}" headerClass="tableHeader1Style" rules="all" styleClass="tableStyle" var="currentRow">
              <f:facet name="header">
                  <h:outputText value="Country List"  ></h:outputText>
              </f:facet>
             <h:column id="column1" headerClass="tableHeaderStyle">
                    <f:facet name="header">
                        <h:outputText value="Country Name" ></h:outputText>
                     </f:facet>
                     <h:outputText value="#{currentRow.country}" styleClass="tableDataStyle"></h:outputText>
                </h:column>
                <h:column id="column2" headerClass="tableHeaderStyle">
                    <f:facet name="header">
                        <h:outputText value="Country Name" ></h:outputText>
                     </f:facet>
                     <h:outputText value="#{currentRow.country}" styleClass="tableDataStyle"></h:outputText>
                </h:column>
            </h:dataTable>
 
 

mystyle.css

  
 .tableStyle{
    background-color:yellow;
    border-style:double;
    
}
.tableDataStyle{
    background-color:yellow;
}
.tableHeaderStyle{
    background-color:blue;
    color:white;
}
.tableHeader1Style{
    background-color:red;
    color:white;
}
 

Hope it works for you

[Dave Alvarado]

Thanks for your response but when I added the "headerClass" attribute to the h:column tag, I got this compilation error

search_results.jsp:46:15: This attribute is not recognized.
<h:column headerClass="tableHeader">
^---------^

I'm using WebLogic 9.2.2 with MyFaces 1.1.5.

- Dave

[Kavita Tipnis]

I checked the differences in both Mojarra (Sun JSF RI ) and MyFaces RI and you are right, there is no attribute 'headerClass' in MyFaces RI
(Links to check:
http://java.sun.com/javaee/javaserverfaces/1.2_MR1/docs/tlddocs/index.html
http://myfaces.apache.org/core11/myfaces-impl/tlddoc/index.html
)
However, I think in MyFaces you can create an tablecolumn component(programmatically) or use binding attribute and use the setHeaderClass()method on the column. I am not using MyFaces RI, if you check the API docs you will get more information.