Skip to main content
A
Anonymous
April 17, 2012
Question

CFGRID: How can you conditionally change the background of a particular cell?

  • April 17, 2012
  • 1 reply
  • 2067 views

Hello,

I currently have a table that displays the data from a query.  I would like to make it more flexible so I would like to use CFGRID to output the information instead (for pagination, sorting, outputting to MS Excel etc.).

However, I need to change the cell color of certain fields based on the data in those fields.  For instance, if the value in the certain field is 0-30 I need it to be red, if it is 31-60 I need it to be yellow and 61-100 I need it to be green.

I remember doing this last summer for one of my clients, but I was under a fairly strict NDA and couldn't keep any of my notes/code and I don't recall much about how I went about doing this.  There is probably a better way than what I did in any event.

I think it had something to do with writing the query to a new query and wrapping the values with some CSS code for the color as i processed it.

I rather doubt that I am the first person to ask this question, but I haven't been having much luck finding the answer so far.  If someone can help me figure this out, it would be greatly appreciated.  If anyone knows of an existing answer already in these forums, that would be awesome!

Best regards,

KK

This topic has been closed for replies.

1 reply

-
-__cfSearching__-
Inspiring
April 18, 2012

Do a search on cfgrid custom cell renderer.  There are a bunch of examples, such as:

http://blog.alagad.com/2010/03/31/ask-an-alagadian-how-can-i-style-a-cell-in-lt-cfgrid-gt-based-on-the-data-it-contains/

A
Anonymous
April 18, 2012

Hello,

Thanks for pointing out that site!  I took his example and made some changes and it works perfectly.  (he uses 'smart quotes' on his web page, so if you copy/paste his code, you will need to replace them with regular ones).

The modified version is as follows (I include it here for the sake of completeness in the event that someone else wants to do this more like how I needed it rather than the way the codes original author did it).

<cfajaximport />

<html>

<head>

<script>

    formatStatus = function(data,cell,record,row,col,store) {

            if (data > 40)

              {

              cell.css = 'status1';

              }

            else if (data < 40 && data > 30)

              {

              cell.css = 'status2';

              }

            else if (data < 30 && data > 20)

              {

              cell.css = 'status3';

              }

            else

              {

              cell.css = 'status4';

              }

        return data

       

    }

    formatCells = function() {

        theGrid = ColdFusion.Grid.getGridObject('tankGrid');

        cm = theGrid.getColumnModel();

        cm.setRenderer(1,formatStatus);

    }

</script>

<style>

    .status1{border:1px solid #000; background-color:#66FF66;  }

    .status2{border:1px solid #000; background-color:#ffff00;  }

    .status3{border:1px solid #000; background-color:#ffA500;  }

    .status4{border:1px solid #000; background-color:#ff0000;  }

</style>

</head>

<body>

<cfset tanks = queryNew("name,status")>

<cfloop from=1 to=20 index="x">

    <cfset status = randRange(0,100) />

    <cfset tank = "tank " & x />

    <cfset queryAddRow(tanks)>

    <cfset querySetCell(tanks, "status", status, x)>

    <cfset querySetCell(tanks, "name", tank, x)>

</cfloop>

<cfform name="gridExample" style="padding:20px">

    <cfgrid name="tankGrid" format="html" query="tanks" width="300" >

        <cfgridcolumn name="name" header="tank" />

        <cfgridcolumn name="status" header="Status" />

    </cfgrid>

</cfform>

<cfset ajaxOnLoad("formatCells")>

</body>

</html>

K
kljagilbert
Participant
October 11, 2018

I know this is an old post but unfortunately this doesn't work anymore (CF 2018).  Any idea how to do this in CF 2018>

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices