:: Forum >>

Setting Cell Colour - Start Cell + Col

Hi Alex,

Conditional formatting is a great feature.

http://www.activewidgets.com/javascript.forum.19446.1/setting-a-cell-to-a.html

Is it possible for us to apply a start row/col for this. I.e. Only run conditional formatting on cells down and right from C5?
Matt
Tuesday, March 24, 2009
Yes, you have access to the row and column number as well as the cell contents.

Here's an example I've used in the past -
obj.defineCellProperty("color")
obj.setCellColor(function(col, row)
{
var perc = parseFloat(this.getCellText(4, row))

if (perc >= 90.0)
return "red"
if (perc >= 80.0)
return "#ccbb0f"
return "black"
})
obj.getCellTemplate(1).setStyle("color", function(){
return this.getCellProperty("color")})
obj.getCellTemplate(3).setStyle("color", function(){
return this.getCellProperty("color")})

So the template is applied to columns 1 and 3 only and the value of column 4 is tested. Note that this sets the foreground color rather than the background but the principle is the same. You can easily test the row number in the function and the column number if you want to apply it across all cells.
Anthony
Wednesday, March 25, 2009
Ah this looks ideal, thank you very much for your helpful response Anthony.

I wonder if you might help me customise the example to do the following:

0 - 4 = Blue
5 - 6 = Green
7 - 10 = Red
Any other value = Black

I would also need it to apply the colours to rows 5 - 50. Is there a quick way to do that without replicating the last section 50 times!

Cheers,

Matt
Matt
Wednesday, March 25, 2009
Yes, the simplest way would be to just have one style function and test the row and column numbers. This should do the trick -
obj.defineCellProperty("color")
obj.setCellColor(function(col, row)
{
if (row > 3 && row < 50)
{
if (col >= 0 && col < 5)
return "blue"
if (col == 5 || col == 6)
return "green"
if (col > 6 && col < 11)
return "red"
}
return "black"
})
obj.getCellTemplate().setStyle("color", function(){
return this.getCellProperty("color")})

Note that row indices also start from 0.
Anthony
Thursday, March 26, 2009
Great thanks Anthony!

I needed col 4 - 50, but typed row for some reason. Anyway, for reference the following code looks at cols 4 - 50, and sets the text colour as per:

obj.defineCellProperty("color")
obj.setCellColor(function(col, row)
{
var value = parseFloat(this.getCellText(col,row))

if (col >= 4 && col <= 50)
{
if (value >= 0 && value <= 5)
return "blue"
if (value == 6 || value == 7)
return "black"
if (value >= 8 && value <= 10)
return "red"
}
return "black"
})
obj.getCellTemplate().setStyle("color", function(){
return this.getCellProperty("color")})
Matt
Thursday, March 26, 2009
OK, To make the code a little more efficient, seeing you have a very wide grid, I'd suggest getting the value of the cell contents inside the if statement for the column number test. That way, you're not doing it needlessly over every cell in the grid.
Anthony
Thursday, March 26, 2009

This topic is archived.


Back to support forum

Forum search