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

Community Beginner ,
Apr 17, 2012 Apr 17, 2012

Copy link to clipboard

Copied

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

Views

1.8K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Valorous Hero ,
Apr 17, 2012 Apr 17, 2012

Copy link to clipboard

Copied

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-t...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Apr 18, 2012 Apr 18, 2012

Copy link to clipboard

Copied

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 11, 2018 Oct 11, 2018

Copy link to clipboard

Copied

LATEST

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines