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?

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.

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

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.

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")})

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.