We help IT Professionals succeed at work.

Coldfusion cfgrid textcolor

I am trying to make one of my columns display a different text color.
Is there a simple way of doing this?
<cfform>
            <cfgrid
                  name="Gridforservice"
                     query="Gridserviceticket"
                  format="html"
                  autowidth="true"
                  striperows="true"
            hrefkey="serviceid"
            groupfield="companyid"
                   collapsible="true"
            textcolor="Black"
           
           
            >
           
               <cfgridcolumn name="status" header="Status"  textColor = "C1 eq Open ? Red : Blue" />
            <cfgridcolumn name="companyid" header="Company"  />
            <cfgridcolumn name="storeid" header="Facility" />
            <cfgridcolumn name="contact" header="Contact" />
          <cfgridcolumn name="phone" header="Phone" />
             <cfgridcolumn name="serviceid" header="ID"  href="serviceticket_edit.cfm?id=#Gridserviceticket.serviceid#"  />
             
             
             <cfgridcolumn name="servicedate" header="Date/Time" width="125" mask="m/d/Y - h:t" />
             
              <cfgridcolumn name="subject" header="Subject" width="150" />
             <cfgridcolumn name="request" header="Request" width="200" />
              <cfgridcolumn name="urgent" header="Type" />
                       
                <cfgridcolumn name="equiptype" header="EquipType" />
            </cfgrid>
      

 
<cfform>
		<cfgrid 
			name="Gridforservice"
            
             
			query="Gridserviceticket"
			format="html"
			autowidth="true" 
			striperows="true"
            hrefkey="serviceid"
            groupfield="companyid"
 			collapsible="true"
            textcolor="Black"
            
            
            >
            
               <cfgridcolumn name="status" header="Status"  textColor = "C1 eq Open ? Red : Blue" />
            <cfgridcolumn name="companyid" header="Company"  />
            <cfgridcolumn name="storeid" header="Facility" />
            <cfgridcolumn name="contact" header="Contact" />
          <cfgridcolumn name="phone" header="Phone" />
             <cfgridcolumn name="serviceid" header="ID"  href="serviceticket_edit.cfm?id=#Gridserviceticket.serviceid#"  />
             
             
             <cfgridcolumn name="servicedate" header="Date/Time" width="125" mask="m/d/Y - h:t" />
             
              <cfgridcolumn name="subject" header="Subject" width="150" />
             <cfgridcolumn name="request" header="Request" width="200" />
              <cfgridcolumn name="urgent" header="Type" />
              
            
			
               
            
               
            	
                <cfgridcolumn name="equiptype" header="EquipType" />
		</cfgrid>

Open in new window

Comment
Watch Question

CERTIFIED EXPERT
Most Valuable Expert 2015

Commented:
Use the "textColor" attribute in your grid column

ie  <cfgridcolumn name="phone" header="Phone" textColor="green"/>

Author

Commented:
Yes I know that can work,but what I am trying to do is have the text color be different when the field "status" is 'Open' it needs to be red, and when "status" is closed it needs to be normal black.

As you can see

               <cfgridcolumn name="status" header="Status"  textColor = "C1 eq Open ? Red : Black" />


Since status is my first column I have the above code but it does not work.
By the way my sql statement name is Gridserviceticket.

Your above code does change all the text in the phone column to green, but I need the above.  Any help is greatly appreciated.
CERTIFIED EXPERT
Most Valuable Expert 2015

Commented:
>   textColor = "C1 eq Open ? Red : Black" />

Duh.. I missed that last part.  

AFAIK, cfgrid doesn't provide a way to assign colors dynamically. You need to tap into the underlying ext grid, and assign a custom renderrer.

<cfset q = queryNew("")>
<cfset queryAddColumn(q, "status", listToArray("OPEN,closed,open,open,closed,closed"))>

<html>
<head>
<style type="text/css">
      .open { color: red; }
      .closed { color: blue; }
</style>
<script type="text/javascript">
      function formatStatus(data,cell,record,row,col,store) {
          cell.css = data.toLowerCase() == "open" ? "open" : "closed";
          return data
      }
      function formatCells() {
          theGrid = ColdFusion.Grid.getGridObject("myGrid");
          cm = theGrid.getColumnModel();
          cm.setRenderer(0,formatStatus);
      }
</script>
</head>
<body>

<cfform>
      <cfgrid name="myGrid" query="q" format="html">
             <cfgridcolumn name="status" header="Status"  textColor = "C1 eq Open ? Red : Blue" />
       </cfgrid>            
</cfform>

<cfset ajaxOnLoad("formatCells")>
</body>
</html>

Author

Commented:
Looks GREAT!!!  one question though....
to get the data from the sql into the above array what is the best way?

<cfset queryAddColumn(q, "status", listToArray("OPEN, closed....))>

if am using
<cfquery datasource="xxx" name="Gridserviceticket">
Select serviceid, status
FROM  dbo.service_ticket
<cfquery>

Thanks in advance

CERTIFIED EXPERT
Most Valuable Expert 2015

Commented:
Sorry ... didn't see your response yesterday.

> <cfset queryAddColumn(q, "status", listToArray("OPEN, closed....))>
> to get the data from the sql into the above array what is the best way?

That code was just for testing so could run the code standalone ie without db tables.  Stick with your query and populate your grid the same way you were doing before.
CERTIFIED EXPERT
Most Valuable Expert 2015

Commented:
> so could run the code standalone ie without db tables.

Gah... that should be "so ANYONE could run the code snippet without your db tables..."

Author

Commented:
Missing something here....



<cfajaximport tags="cfform,cfdiv, cfgrid"/>
       
<cfoutput> Employee:#users.user_firstname# #users.user_lastname#</br>
Current Email: #users.user_email#
</cfoutput>             

<cfquery datasource="xxx" name="Gridserviceticket">
SELECT   serviceid, subject, userid, storeid, companyid, servicedate, request, urgent, status, equiptype, contact, phone
               
FROM         dbo.service_ticket
ORDER BY companyid, servicedate, status ASC

</cfquery>


          

<cfset q = queryNew("")>


<cfset pricelist = valuelist(Gridserviceticket.status,",")/>



   


<cfset queryAddColumn(q, "status", listToArray("#Trim(pricelist)#"))>


<html>
<head>
<style type="text/css">
      .open { color: red; }
      .cancelled { color: green; }
</style>
<script type="text/javascript">
      function formatStatus(data,cell,record,row,col,store) {
          cell.css = data.toLowerCase() == "open" ? "open " : "cancelled";
          return data
      }
      function formatCells() {
          theGrid = ColdFusion.Grid.getGridObject("myGrid");
          cm = theGrid.getColumnModel();
          cm.setRenderer(0,formatStatus);
      }
</script>
</head>
<body>
<cfoutput>List: #pricelist#<br/>

</cfoutput>
<cfform>
      <cfgrid name="myGrid" query="q" format="html">
             <cfgridcolumn name="status" header="Status"  textColor = "C1 contains Open ? Red : Blue" />
       </cfgrid>            
</cfform>




   
 <cfform>
            <cfgrid
                  name="Gridforservice"
           
             
                  query="Gridserviceticket"
                  format="html"
                  autowidth="true"
                  striperows="true"
            hrefkey="serviceid"
            groupfield="companyid"
                   collapsible="true"
            textcolor="Black"
           
           
            >
           
               <cfgridcolumn name="status" header="Status"  textColor = "C1 eq Open ? Red : Blue" />
           
            <cfgridcolumn name="companyid" header="Company"  />
            <cfgridcolumn name="storeid" header="Facility" />
            <cfgridcolumn name="contact" header="Contact" />
          <cfgridcolumn name="phone" header="Phone" textcolor="green" />
             <cfgridcolumn name="serviceid" header="ID"  href="serviceticket_edit.cfm?id=#Gridserviceticket.serviceid#"  />
             
             
             <cfgridcolumn name="servicedate" header="Date/Time" width="125" mask="m/d/Y - h:t" />
             
              <cfgridcolumn name="subject" header="Subject" width="150" />
             <cfgridcolumn name="request" header="Request" width="200" />
              <cfgridcolumn name="urgent" header="Type" />
             
           
                  
               
           
               
                  
                <cfgridcolumn name="equiptype" header="EquipType" />
            </cfgrid>
      

      </cfform>  
<cfset ajaxOnLoad("formatCells")>
            

      

CERTIFIED EXPERT
Most Valuable Expert 2015

Commented:
You don't need all of the code from the demo example, only the javascript. Everything else will stay the same.

<html>
<head>
<style type="text/css">
      .open { color: red; }
      .cancelled { color: green; }
</style>
<script type="text/javascript">
      function formatStatus(data,cell,record,row,col,store) {
          cell.css = data.toLowerCase() == "open" ? "open " : "cancelled";
          return data
      }
      function formatCells() {
          theGrid = ColdFusion.Grid.getGridObject("Gridforservice");
          cm = theGrid.getColumnModel();
          cm.setRenderer(0,formatStatus); //0- first column, 1-second column ....
      }
</script>
</head>
<body>

       <!--- YOUR CFGRID HERE ....--->
      <cfform>
            <cfgrid name="Gridforservice" query="Gridserviceticket" ...>
                 ....
            </cfgrid>
       </cfform>

      <cfset ajaxOnLoad("formatCells")>
</body>
</html>

Open in new window

Author

Commented:
I have copied the above and inserted my code, still doesn't work...
I get all green "open"

Any ideas?
CERTIFIED EXPERT
Most Valuable Expert 2015

Commented:
What's your CF version? What are the possible values in the status column? Is one of them "open" exactly (no spaces..)?
CERTIFIED EXPERT
Most Valuable Expert 2015

Commented:
Also, when you ran the demo example, did it work for you?

Author

Commented:
Yes, the demo worked great...
The only possible solution I see is that the data is coming over with white spaces behind it....
Would I be better off to make the status a number?

Author

Commented:
CF9

Author

Commented:
GOT IT.
I had white spaces in the sql statement.
used the following

SELECT RTRIM(status) as status
from database table

IT WORKED THANKS SO MUCH!!!!

Author

Commented:
Quick question...
If I wanted to have the following what would need to be modified?

Open = Red
Closed = Black
Cancelled = Blue

Thanks again!!!!!
CERTIFIED EXPERT
Most Valuable Expert 2015

Commented:
You should only need to change the CSS here:

<style type="text/css">
      .open { color: red; }
      .closed { color: black; }
      .cancelled { color: green; }
</style>

And if those 3 are the only possible values, change the javascript function formatStatus to:

      function formatStatus(data,cell,record,row,col,store) {
          cell.css = data.toLowerCase();
          return data
      }
CERTIFIED EXPERT
Most Valuable Expert 2015

Commented:
> Would I be better off to make the status a number?

For comparisons, using a number is almost always better. Because then you don't have to worry about white space or upper/lower case. But they're less intuitive than seeing a string like "closed".
CERTIFIED EXPERT
Most Valuable Expert 2015
Commented:
> SELECT RTRIM(status) as status

Oh, one more thing. If you're going to keep them as strings, trim both sides. So it doesn't break if someone adds a space on the other side ;-)

       SELECT LTRIM(RTRIM(status)) as status

Author

Commented:
Thanks so much for your help....  

Author

Commented:
GREAT PROVIDER!!!!
very helpful.
CERTIFIED EXPERT
Most Valuable Expert 2015

Commented:
You're welcome :)

Explore More ContentExplore courses, solutions, and other research materials related to this topic.