datatable - row colors

[rakesh verma]

I am using datatable and each row in table should have different color according to a value of one of the proerty of row.
Here it is
<h:dataTable value="#{form.list}" var="item" id="table">
<h:column>
<h:outputText value="#{item.name}" />
</h:column>
<h:column>
<h:outputText value="#{item.status}" />
</h:column>
</h:dataTable>
each row should be of a color depending on 'status' value of that row.
Say, if it is pending - it should be red color, if it is approved - it should be green color......

Any advise is really appreciated.
Please help me out, Thanks

[rakesh verma]

I have a method in each row, which has style class to be used for that row color.
I couldn't give rowclasses in datatable as follows, as it is giving null point er exception(may be its not instantiating item object)
<h:dataTable value="#{form.list}" var="item" id="table" rowclasses="#{item.style}">

Even I couldn't specify class while displaying text. As it is just displaying background for the text but not for entire column
<h:outputText class="#{item.style}" value="#{item.name}" />

[vishwa venkat]

One of the options I found is that you can have one color for even rows and another color of odd rows -

using the attribute rowClasses="list-row-even,list-row-odd" in datatable component.

[A. Dusi]

Try to use rowStyleClass atrribute instead of rowClasses in your datatable.
I used something like this in my code:
rowStyleClass="#{myBackingBean.rowStyleClass}"

In my backing bean I have a String variable rowStyleClass and its corresponding getters and setters. In my getter I have code that reads the datatable row and returns the desired styleClass in the form of String.

I am not sure if this is a complete solution, but it is working for me.

[rakesh verma]

Thanks for the reply Dusi.
We are using jsf ri and I don't see rowStyleClass in tld. Can I know which implementation you are using.

[A. Dusi]

I am using Apache Tomahawk's t:datatable. I am not sure about Sun RI.

[A. Dusi]

If you just need the font to be in a different color, say red, for some rows, try using the 'style' attribute for the text(h:outputText) in each column(h:column). This style should be bound to a backing bean property that will return a String something like "color:red". You may still use the rowClasses attribute for datatable to get the alternate color effect.

[rakesh verma]

Thank you Dusi.
I am thinking of this option...

[Susana Gurrea]

hi i did a similary example, to print one column of a table in different colours...

<af:column headerText="#{bindings.ClientesView1.labels.Codigo}"
sortProperty="Codigo" sortable="true"
binding="#{backing_app_Clientes.column1}"
id="column1" formatType="text">
<af:outputText value="#{row.Codigo}"
binding="#{backing_app_Clientes.outputText14}"
id="outputText14"
inlineStyle="color:#{row.tieneNotasdumm ? 'red' : 'black'};"/>
</af:column>

in my case i work with .jspx but i hope this can help you..

[Master Blaster]

Mr.Rakesh verma,
You can try this, it works for me
<h:dataTable rowClasses="#{managedbean.rowcolor}">
</h:dataTable>

In managedBean class
public String getRowcolor()
{
if() //some condition on value of row
return "redcolor";//Where redcolor is the styleclassname;
else
return "greencolor";

}

In Jsp ,
<style>
.redcolor
{
background-color:red;
}
</style>

[Radha Bajwa]

Hello Rakesh and Master Blaster,

I am now in a similar situation as Rakesh wherein I need to show a different row color in the datatable based on a value in the data bean.

Here is how I wrote the code in the managed bean

public String getRowColor() {
EventTypeSimple object = (EventTypeSimple)table1.getRowData();
//this line above returns a null - also note this object is bound to the values in the jsp

if(object.isModifiable()) //some condition on value of row
return "greencolor";//Where redcolor is the styleclassname;

else
return "redcolor"; }

Any help on this will be truly welcome.

Regards
Radha

[rajani varma]

Hello Radha,
We are doing something similar. He is my code....

in the jsp page.....

 <h:form id="mainForm">
<table id="plateSearchResultsTable" border="0">
<t:dataTable id="plateSearchResults" var="plate" styleClass="headerTable" headerClass="tableHeader" rowClasses="tableOddRow, tableEvenRow" value="#{plateBean.plateItemList}" rows="10" preserveDataModel="false" preserveSort="true" width="650">
<h:column>
<f:facet name="header">
<h:outputText styleClass="lableTextWhiteBold" value""></h:outputText>
</f:facet>
<h:panelGrid border="0" columns="1" cellpadding="0" cellspacing="0" styleClass="resultDataWhite" >
<h:outputText styleClass="lableTextWhite" value="#{plate.item.currentRegistration.endDate}"></h:outputText>
</h:panelGrid>
</h:column>
----------------  code goes on--------
   

here tableOddRow and tableEvenRow are defined in the styleSheet.

in the backing bean,

 
import javax.faces.component.UIData;
public class PlateBean{
 
 private UIData plateSearchResultsTable;
 
 public UIData getPlateSearchResultsTable() {
    return plateSearchResultsTable;
  }
 
  public void setPlateSearchResultsTable(UIData plateSearchResultsTable) {
    this.plateSearchResultsTable = plateSearchResultsTable;
  } 
 
public String selectPlate(ValueChangeEvent event) {
    String result = Constants.SUCCESS;
    SelectableItem item = (SelectableItem)plateSearchResultsTable.getRowData();
 
    if (some condition){
     ------
 
    } else {
      -------
    }
 
    return result;
  } 
   

hope this helps.....


-Rajani.

[John Bartlett]

Hi,

Just a quick note t:column has a styleClass property, meaning that you can specify indiviudal styles e.g,

   
 
<t:dataTable id="itemTable" value="#{bean.itemList}" var="item" binding="#{bean.itemTable}">
<t:column styleClass="#{item.styleOne}">
<h:outputText value="#{item.itemDescription}" />
</t:column>
<t:column styleClass="#{item.styleTwo}">
<h:outputText value="#{item.itemValue}" />
</t:column>
</t:dataTable>
 

hope this helps,

John
[ January 29, 2007: Message edited by: John Bartlett ]

[André Asantos]

Hi everyone, how are you?

I would like to color my dataGrid's rows, I set this way:

<br />
		<h:panelGrid columns="4" rendered="#{not empty epubVersionamentoBean.voEpubVersionamentoList}"> 
			<h:dataTable id="lista" value="#{epubVersionamentoBean.voEpubVersionamentoList}" var="resultadoPesquisa" rowClasses="tableOddRow, tableEvenRow">	
				<h:column>				
					<a href="xhtml/upload_epub.xhtml?#{resultadoPesquisa.ISBN_Livro_Impresso}"><img src="imagem/setinha.jpg"></img></a>
				</h:column>			
				<h:column>
					<f:facet name="header">
						<h:outputText value="Título"></h:outputText>
					</f:facet>
					#{resultadoPesquisa.titulo}
				</h:column>
				<h:column>
					<f:facet name="header">
						<h:outputText value="Autor"></h:outputText>
					</f:facet>
					#{resultadoPesquisa.autor}
				</h:column>
				<h:column>
					<f:facet name="header">
						<h:outputText value="Código Produto"></h:outputText>
					</f:facet>
					#{resultadoPesquisa.codigo_produto}
				</h:column>
				<h:column>
					<f:facet name="header">
						<h:outputText value="ISBN"></h:outputText>
					</f:facet>
					#{resultadoPesquisa.ISBN_Livro_Impresso}
				</h:column>
			</h:dataTable>
		</h:panelGrid> 

Where can I put the color?

[Prithvi Sehgal]

Hello,

In row classes CSS class, define the background property and set the color you want.
It will start taking effect. For example

.evenRow{
    background: PowderBlue;
}

HTH,

[André Asantos]

Prithvi Sehgal, worked!

thanks a lot...

now I am facing trouble applying CSS look at:

<h:column headerClass="cabecalho">
					<f:facet name="header">
						<h:outputText value="Código Produto"></h:outputText>
					</f:facet>
					<font size="2" color="black" face="verdana">#{resultadoPesquisa.codigo_produto}</font>
				</h:column>

cabecalho is a CSS but does not apply for the grid's hearder...

[Prithvi Sehgal]

André Asantos wrote:

<h:column headerClass="cabecalho">
			<f:facet name="header">
					<h:outputText value="Código Produto"></h:outputText>
			</f:facet>
			<font size="2" color="black" face="verdana">#{resultadoPesquisa.codigo_produto}</font>
</h:column>

cabecalho is a CSS but does not apply for the grid's hearder...

Andre, i don't think it is the good way to apply CSS. It won't take the effect this way. As you have specified the
header class. Put an entry in your CSS file as

.headerClass{
    font-size: 0.75em;
    font-color: black;
   font-family: arial, verdana, sans-serif;
}

Remove the css you have put and it should work.
HTH,