cfgrid change cell color

Question

After an exhaustive search for a solution, what I have come up with isn't working as the cell color isn't changing color. The alerts are alerting as expeted and correctly. Anyone have a clue what might be wrong?

formatStatus = function(data,cell,record,row,col,store) {                      
    statusValue = record.get('NAME_STATUS').trim();
    TDPcountValue = record.get('TDPCOUNT'); 

    if (statusValue == 'TDP REQUESTED') {

        if (TDPcountValue > 44) {                          
            alert('Red Status: '+statusValue+' Count: '+TDPcountValue);
            cell.css = '45Days';
        }       
        else if (TDPcountValue < 30) {
            alert('Okay: '+statusValue+' Count: '+TDPcountValue);
            }
        else {
            alert('Yellow Status: '+statusValue+' Count: '+TDPcountValue);
            cell.css = '30Days';
        } 
    }

return statusValue; 
}         

formatCells = function() {
    theGrid = ColdFusion.Grid.getGridObject('requestGrid');
    cm = theGrid.getColumnModel();
    cm.setRenderer(10,formatStatus);
}

<style>

.30Days {
background:#FFFF00; !Important
}
.45Days {
background:#FF00000; !Important
}
</style>

<cfset ajaxOnLoad("formatCells")>

Any help in the right direction would be great, thanks in advance!!

@duncan - Sorry, I mean the cell color within the grid is not changing color. — RockDad, May 27 '14 at 13:44
what colour are they all coming out as, `FF0000` or `FFFF00` or something else? — duncan, May 27 '14 at 13:53
You're using red where TDPCount > 29 and < 45. You're using yellow where TDPCount > 45. I assume you're deliberately ignore those where TDPCount <= 29. More importantly though, what do you do where TDPCount **=** 45? — duncan, May 27 '14 at 13:56
They are just regular white background like normal. Ahh, good catch, I'll modify that for 45. The counts I'm seeing for testing are well abouve 45 (54,56,63), they should be red. — RockDad, May 27 '14 at 14:35
are you sure your `record` is satisfying your expected IF statement? — duncan, May 27 '14 at 14:40
Yes. When I add the alerts to each condition and then run the page with the grid, I get 10 alerts with the correct alert status and count. — RockDad, May 28 '14 at 16:32

score 1 · Accepted Answer · answered May 28 '14 at 19:21

formatStatus = function(data,cell,record,row,col,store) {                      
    statusValue = record.get('NAME_STATUS').trim();
    TDPcountValue = record.get('TDPCOUNT'); 

    if (statusValue == 'TDP REQUESTED') {

        if (TDPcountValue > 29 && TDPcountValue < 45) {
            cell.attr += 'style="background-color:yellow;"';
            //alert('Yellow Status: '+statusValue+' Count: '+TDPcountValue);
            }
        else if (TDPcountValue > 44) {                          
            //alert('Red Status: '+statusValue+' Count: '+TDPcountValue);
            cell.attr += 'style="background-color:red;color:white;"';
        }           
        else if (TDPcountValue < 30) {
            //alert('Okay: '+statusValue+' Count: '+TDPcountValue);
        } 
    }

return statusValue; 
}         

formatCells = function() {
    theGrid = ColdFusion.Grid.getGridObject('requestGrid');
    cm = theGrid.getColumnModel();
    cm.setRenderer(10,formatStatus);
}

It seems that 'cell.attr' was the trick I needed instead of cell.css. Thanks to all for helping.

score 0 · Answer 2 · answered May 27 '14 at 14:40

0

Instead of

<b style="background=#FF0000">

You should have

<b style="background:#FF0000">

answered May 27 '14 at 14:40

duncan

31,401
13
78
99

Thanks Duncan, I made the change you suggested but now the entire cell is blank, no data and no color. I thought I was close. ARGH! Ideas? – RockDad May 27 '14 at 15:24
if this stuff is wrapped inside a `` you might need to escape the `#`... you could be getting an error which isn't immediately apparent due to using ajax. Try `background:##FF0000` – duncan May 27 '14 at 15:30
Nope, same thing. Nothing changes after escaping the #. I added alerts to each condition and they are alerting correctly but it seems there may be a bunch of white space. How can I send you an image? – RockDad May 27 '14 at 15:42
Same thing. I uploaded to my website. http://www.j5webstudio.com/_images/TDP%20alert.png – RockDad May 27 '14 at 16:01
not sure what I'm looking at, what do you get if you use console.log? – duncan May 27 '14 at 16:17
Just an alert for the Name Status field and the TDPcuont. But the count is on the next line. Thought there may have been some white space and that's why it didn't meet my criteria but it does because it fires the alert. alert('Yellow Status: '+record.get('NAME_STATUS')+record.get('TDPCOUNT')); – RockDad May 27 '14 at 16:30
'Yellow Status' would imply that the values are < 45, contrary to what you said earlier – duncan May 27 '14 at 16:47
You're correct. It says 'Okay' which is the third alert if the first two arent met. So it's not meeting the conditions and it's still not displaying anything. Hmmmm. – RockDad May 27 '14 at 16:51
@RockDad - In javascript, string comparisons are case sensitive. Your value is in upper case, but the comparison string is in mixed case. – Leigh May 28 '14 at 16:45
@Leigh - Weird you just said that. I just figured that out myself. Thanks. I'm almost there but still no color. – RockDad May 28 '14 at 17:37
@RockDad - Shot in the dark, but I *think* in some versions of ExtJS you need to call `gridObject.reconfigure(datasource, columnmodel);` after changing the renderer. Worth a try anyway. – Leigh May 28 '14 at 19:02
@Leigh - Thanks, I just posted the solution. – RockDad May 28 '14 at 19:22

cfgrid change cell color

2 Answers2