asked on

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

_agx_

Use the "textColor" attribute in your grid column

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

rbm1tch3ll

ASKER

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.

_agx_

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

rbm1tch3ll

ASKER

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

_agx_

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.

_agx_

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

rbm1tch3ll

ASKER

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")>

_agx_

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

rbm1tch3ll

ASKER

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

Any ideas?

_agx_

What's your CF version? What are the possible values in the status column? Is one of them "open" exactly (no spaces..)?

_agx_

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

rbm1tch3ll

ASKER

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?

rbm1tch3ll

ASKER

CF9

rbm1tch3ll

ASKER

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!!!!

rbm1tch3ll

ASKER

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

Open = Red
Closed = Black
Cancelled = Blue

Thanks again!!!!!

_agx_

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
}

_agx_

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

ASKER CERTIFIED SOLUTION

_agx_

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

rbm1tch3ll

ASKER

Thanks so much for your help....

rbm1tch3ll

ASKER

GREAT PROVIDER!!!!
very helpful.

_agx_

You're welcome :)