2 Replies Latest reply: Apr 18, 2012 9:56 AM by Krandolph RSS

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

    Krandolph

      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

        • 2. Re: CFGRID: How can you conditionally change the background of a particular cell?
          Krandolph Community Member

          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>