Win a copy of Mesos in Action this week in the Cloud/Virtualizaton forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

datatable - row colors

 
rakesh verma
Greenhorn
Posts: 22
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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>
<hutputText value="#{item.name}" />
</h:column>
<h:column>
<hutputText 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
Greenhorn
Posts: 22
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
<hutputText class="#{item.style}" value="#{item.name}" />
 
vishwa venkat
Ranch Hand
Posts: 185
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Ranch Hand
Posts: 114
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Greenhorn
Posts: 22
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Ranch Hand
Posts: 114
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I am using Apache Tomahawk's t:datatable. I am not sure about Sun RI.
 
A. Dusi
Ranch Hand
Posts: 114
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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(hutputText) 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
Greenhorn
Posts: 22
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thank you Dusi.
I am thinking of this option...
 
Susana Gurrea
Greenhorn
Posts: 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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">
<afutputText 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
Greenhorn
Posts: 3
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Greenhorn
Posts: 4
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Ranch Hand
Posts: 30
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hello Radha,
We are doing something similar. He is my code....

in the jsp page.....



here tableOddRow and tableEvenRow are defined in the styleSheet.

in the backing bean,



hope this helps.....


-Rajani.
 
John Bartlett
Ranch Hand
Posts: 116
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi,

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




hope this helps,

John
[ January 29, 2007: Message edited by: John Bartlett ]
 
André Asantos
Ranch Hand
Posts: 234
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi everyone, how are you?

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




Where can I put the color?
 
Prithvi Sehgal
Ranch Hand
Posts: 774
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hello,

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

HTH,
 
André Asantos
Ranch Hand
Posts: 234
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Prithvi Sehgal, worked!

thanks a lot...

now I am facing trouble applying CSS look at:




cabecalho is a CSS but does not apply for the grid's hearder...
 
Prithvi Sehgal
Ranch Hand
Posts: 774
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
André Asantos wrote:



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


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

 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic