asked on

dynamic color in cfgridcolumn

Is there a way to change the color of a grid column dynamically. The textcolor parameter doesn't allow for a variable and I have nine color possiblilities.

<cfgridcolumn name="Name" header="Name" dataalign="left" width="40" href="index.cfm?fa=viewComp" textcolor="##Structure_Color_Code" />

Open in new window

erikTsomik

can you just say this
<cfif something use this color>
<cfset lcolor=FFFFFF>
<cfesleif use this color>
<cfset lcolor =CCCCC>
and so on

and then

<cfgridcolumn name="Name" header="Name" dataalign="left" width="40" href="index.cfm?fa=viewComp" textcolor="#lcolor#" />

erikTsomik

or this
Convert your columnlist to an array like,

<cfset colList = ArrayToList(your_query.getColumnList())>

Then you can assign it to a gridcolumn as,

<cfloop list="#colList#" index="i">
<cfgridcolumn name="#i#" header="#i#" headeralign="left" dataalign="left"
bold="yes" italic="no" select="yes" display="yes" headerbold="no"
headeritalic="yes">
</cfloop>

larksys

ASKER

textcolor doesn't accept variables. I don't see where the second suggestion handles colors.

larksys

ASKER

I did get this to work without an error;
textcolor="###Structure_Color_Code#"

But it doesn't change the color. Structure_Color_Code is in the query returned by the grid bind.

Also;
textcolor="##Structure_Color_Code" gives me an error that the variable is not defined. So I did a cfset prior to the grid.

erikTsomik

put Structure_Color_Cod inside #

like this
textcolor="#Structure_Color_Cod#"

larksys

ASKER

That doesn't change the color. The format seems to require a ##color code format.

erikTsomik

are you using HTML format

erikTsomik

What cf version are you on ?

erikTsomik

read this
http://livedocs.adobe.com/coldfusion/8/htmldocs/help.html?content=Tags_g-h_04.html

larksys

ASKER

Yes, HTML format. CF8. And, I did read it. Am I missing something?

erikTsomik

i do not know for sure but you never know try instead of textcolor try textColor

azadisaryev

textColor attribute is supported in Flash and Applet grids only. read the docs carefully.

Azadi

larksys

ASKER

A quote from the documentation;
"Limitations: In HTML format, must specify a valid HTML color. In Applet format, must be one of the following:"

azadisaryev

Another quote from the docs, 2 quotes in fact:

<cfgrid> - attribute: textColor - Optional: Flash, Applet
<cfgridcolumn> - attribute: textColor - Optional: Flash, Applet

the docs are not without typos: in this case, in the quote you posted it should read "Flash" instead of "HTML"

Azadi

azadisaryev

hey! good news, it looks like there may be a way to do what you want with custom grid renderer...
need to know a few things first:
1) is it the color of a full column you want changing or just individual cells in a column?
2) what's the condition that determines the text color?
(if it's individual cells: what's the condition the color of the column/cell depands on? is it the actuall cells value? is it value of another grid cell in same row?)

Azadi

azadisaryev

here's a sample code that will show you how to do it.
the code is adapted from Ray Camdens example at http://www.coldfusionjedi.com/index.cfm/2007/8/20/Custom-grid-renderers-with-CFGRID

just save attached code as a .cfm page and open it up in your browser.
the sample code uses a cfgrid based on an in-page query, but works the same for cfc-binded cfgrid.
i commented the code as much as i could; for more info refer to Ray's blog post.

hth

Azadi

<!--- create DATA query and populate with some random values --->
<cfset data = queryNew("quantity,product")>
<cfloop from=1 to=10 index="x">
   <cfset total = randRange(20,100)>
   <cfset product = "Product " & x>
   <cfset queryAddRow(data)>
   <cfset querySetCell(data, "quantity", total, x)>
   <cfset querySetCell(data, "product", product, x)>
</cfloop>
<cfajaximport/><!--- need this because we are not actually using any cf8 ajax controls in this example --->
<html>
<head>
<!--- javascript for custom grid rendering --->
<script type="text/javascript">
var min_quantity = <cfoutput>#arraymin(data['quantity'])#</cfoutput>; //set a js var to min value of all quantities in our query
// custom renderer for QUANTITY column
renderQuantity = function(data,cellmd,record,row,col,store) {
  // check if value in QUANTITY column is min value and render this column's (QUANTITY) text RED and BOLD if it is
  if(data == min_quantity) return '<b style="color:red;">' + data + '</b>';
  else return data;
}
// custom renderer for PRODUCT column
renderProduct = function(data,cellmd,record,row,col,store) {
  // check if value in QUANTITY column is min value
  // render the PRODUCT column text BOLD WHITE on RED background if it is
  if(record.data.QUANTITY == min_quantity) return '<b style="color:white;background-color:red;">' + data + '</b>';
  else return data;
}
// function to invoke custom renderers and return re-configured grid (called from ajaxonload() at the bottom of page
testgrid = function() {
  mygrid = ColdFusion.Grid.getGridObject('data');
  cm = mygrid.getColumnModel();
  cm.setRenderer(0,renderProduct); // assign custom renderer for FIRST column in the grid
  cm.setRenderer(1,renderQuantity); // assign custom renderer for SECOND column in the grid
  mygrid.reconfigure(mygrid.getDataSource(),cm); // reconfigure grid
}
</script>
</head>
<body>
<cfform name="testform">
<!--- our custom-renderer cfgrid --->
<!--- the QUANTITY column cell with minimum value and corresponding PRODUCT cell will be custom-rendered with custom colours --->
<cfgrid name="data" query="data" format="html" textcolor="white" autowidth="true">
	<cfgridcolumn name="product" header="Product Name">
	<cfgridcolumn name="quantity" header="Quantity">
</cfgrid>
</cfform>
<!--- fire our custom grid renderers on pageload --->
<cfset ajaxOnLoad("testgrid")>
</body>
</html>

Open in new window

azadisaryev

here's a screenshot of what it renders like (attached).

Azadi
sample.png

larksys

ASKER

I can see how it works, but my bind is a url that returns serializeJSON. The one thing that confused me at first was calling both the query and the grid "data". I can't see how I can access the JSON data as you do your query. The attached code is where I stopped. I just made it run without errors.

The bind page;
 
<cfset attributes.suppresslayout2 = "true">
<cfset queryEnd="">
<cfset today = #dateformat(now(),"yyyy/mm/dd")#>
<cfquery name="Gcomps" datasource="#request.dsn#">
	SELECT 	companies.id,name,city,state,Parent_Company_Number,isnull(Structure_Color_Code,'000000') as Structure_Color_Code,
					CASE WHEN isnull(Phone_Country_Prefix, 0) < 1 THEN ' ' ELSE Phone_Country_Prefix END + '(' + Area_Code + ') ' + substring(phone,1,3) + '-' +  substring(phone,4,4) as phonenumber,Corporate_Structure
					Country,type,type_description ,rtrim(city) + '  ' + state + '  ' + rtrim(country) as citystate,
					CASE WHEN (date_viewed = '#today#') THEN '00e100' ELSE ' ' END as NameBGColor ,Who_Viewed as WhoViewed,Date_Viewed
  FROM 		companies LEFT JOIN companies_Types ON companies.Type = Companies_Types.Company_Type LEFT JOIN companies_Structures
      ON companies.corporate_structure = Companies_Structures.Structure_ID
  WHERE 	0=0
	<cfif compNum NEQ ""> AND companies.ID = #val(compNum)#</cfif>
	<cfif auditFlag eq 1> AND companies.audit_flag = 1</cfif>
	<cfif auditFlag eq 0> AND companies.audit_flag = 0</cfif>
  <cfif name2 NEQ "">
		AND 		upper(companies.name) like '#ucase(name2)#%'
  <cfelseif name3 NEQ ""> AND upper(companies.name) like '%#ucase(name3)#%'
  <cfelse>
		AND 		companies.ID <> 0
	</cfif>
	<cfif sortcol neq "" or sortdir neq "">
		ORDER BY #sortcol# #sortdir#
  <cfelse>
  	ORDER BY name,state,city
	</cfif>
</cfquery>
<!--- Format the query so the bind expression can use it. --->
<cfoutput>#serializeJSON(QueryConvertForGrid(Gcomps, page, pageSize))# </cfoutput>
 
 
The main page;
 
<cfajaximport tags="cfgrid">
 
<cfparam name="name2" default="">
<cfparam name="name3" default="">
<cfparam name="compnum" default="">
<cfset compnum = "">
<cfset request.title="Companies" />
<cfscript>
  function FormatPhoneNumber(number)
  {
   	current_phone = #ReReplaceNoCase(number, '[^0123456789]', '', 'ALL')#;
   	areacode = left(current_phone, 3);
   	firstthree = mid(current_phone, 4, 3);
   	lastfour = right(current_phone, 4);
   	phone_number = "(#areacode#)-#firstthree#-#lastfour#";
		Return phone_number;
  }
</cfscript>
 
<!--- Special rendering for company name colors --->
<script type="text/javascript">
 
// custom renderer for Company Name Color
renderColor = function(data,cellmd,record,row,col,store) {
  // Render the company name in it's appropriate color
  alert('Color is');
  return data;
}
// custom renderer for PRODUCT column
renderName = function(data,cellmd,record,row,col,store) {
  // check if value in QUANTITY column is min value
  // render the PRODUCT column text BOLD WHITE on RED background if it is
  return '<b style="color:white;background-color:red;">' + data + '</b>';
}
// function to invoke custom renderers and return re-configured grid (called from ajaxonload() at the bottom of page
testgrid = function() {
  mygrid = ColdFusion.Grid.getGridObject('grid_Companies');
  cm = mygrid.getColumnModel();
  cm.setRenderer(5,renderColor); // get the color to use
  cm.setRenderer(2,renderName); // assign custom renderer for Name column in the grid
  mygrid.reconfigure(mygrid.getDataSource(),cm); // reconfigure grid
}
</script>
 
<div align="center"> <a href="index.cfm?fa=addComp">Add a New Company</a><br />
    <br />
    <cfform name="form01" action="index.cfm">
        <cflayout type="vbox" name="wrapper" style="text-align: left; margin: 0px auto; padding: 0px; border:0; width: 1200px">
            <cflayoutarea name="left" style="float:left; width:790; border-style:solid; border-width:thin; border-color:##CCCCCC">
                <table>
                                <tr>
				                <td>Record Number:</td>
				                <td><cfinput name="compNum" label="Record Number" size="10" maxlength="10" value="#compnum#" /></td>
				            </tr>
					<tr>
		                <td>Audit Flag:</td>
		                <td><cfinput type="radio" name="auditFlag" label="Audit Flag" value="1" /> Yes <cfinput type="radio" name="auditFlag" label="Audit Flag" value="0" /> No <cfinput type="radio" name="auditFlag" label="Audit Flag" value="2" checked="yes" /> Both</td>
					</tr>
                    <tr>
                        <td>Company Name Begins With:</td>
                        <td><cfinput type="text" name="name2" size="60" value="#name2#"></td>
                    </tr>
                    <tr>
                        <td>Company Name Contains?:</td>
                        <td><cfinput type="text" name="name3" size="60" value="#name3#"></td>
                        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
                        <td><a href="https://www.corporateaffiliations.com/nonsub/accounthelp.asp" target="_blank" ><img src="images/CAWelcome.jpg" /></a> </td>
                    </tr>
                </table>
                <cfset today = #dateformat(now(),"yyyy/mm/dd")#>
				<cfset Structure_Color_Code = "">
                <cfparam name="url.fa" default="viewComp">
 
<!--- </cfform> --->
 
                <cfgrid format="html"
												name="grid_Companies"
												bind="url:dspSearchResults_2.cfm?page={cfgridpage}&pageSize={cfgridpagesize}&sortCol={cfgridsortcolumn}&sortDir={cfgridsortdirection}&name2={name2@keyup}&name3={name3@keyup}&compNum={compNum@keyup}&auditFlag={auditFlag@change}"
												bindonload="yes"
												width="780"
												selectonload="no"
												pagesize="40"
												selectmode="row"
												autowidth="yes"
												colheaderalign="center"
												colheaders="yes"
												griddataalign="left"
												selectcolor="##FF9900">
                    <cfgridcolumn name="ID" display="Yes" dataalign="left" width="12" href="index.cfm?fa=viewComp" target="_blank" />
					<cfgridcolumn name="ID" header="FAST ID" display="Yes" dataalign="left" width="12" href="index.cfm?fa=viewCompTEMP" target="_blank" />
                    <cfgridcolumn name="Name" header="Name" dataalign="left" width="40" href="index.cfm?fa=viewComp" />
                    <cfgridcolumn name="PhoneNumber" header="Phone" dataalign="left" width="14" href="index.cfm?fa=viewComp" />
                    <cfgridcolumn name="CityState" header="City State" dataalign="left" width="20" href="index.cfm?fa=viewComp" />
                    <cfgridcolumn name="Country" header="Country" dataalign="left" width="20" href="index.cfm?fa=viewComp" />
					<cfgridcolumn name="Corporate_Structure" display="false" />
					<cfgridcolumn name="Structure_Color_Code" display="false" />
               </cfgrid>
<!--- fire our custom grid renderers on pageload --->
<cfset ajaxOnLoad("testgrid")>
 
                <cfinput name="fa" type="hidden" value="viewComp">
            </cflayoutarea>
 
            <cflayoutarea name="right" style="float:right; width:400; border-style:solid; border-width:thin; border-color:##CCCCCC">
                <cfoutput>List of recently viewed companies</cfoutput>
                <cfgrid format="html" name="grid_Companiesviewed"  bind=	"url:dspSearchResults_3.cfm?page={cfgridpage}&pageSize={cfgridpagesize}&sortCol={cfgridsortcolumn}&sortDir={cfgridsortdirection}" bindonload="yes" width="400" selectonload="no" pagesize="40" selectmode="row" autowidth="yes" colheaderalign="center" colheaders="yes" griddataalign="left"   selectcolor="##FF9900">
                    <cfgridcolumn name="ID" display="Yes" dataalign="left" width="12" href="index.cfm?fa=viewComp"/>					
                    <cfgridcolumn name="Date_Viewed" header="Date Viewed" display="yes" width="14" />
                    <cfgridcolumn name="Name" header="Name" dataalign="left" width="40" href="index.cfm?fa=viewComp" />
                    <cfgridcolumn name="CityState" header="City State" dataalign="left" width="20" href="index.cfm?fa=viewComp" />
                    </cfgrid>
            </cflayoutarea>
 
 
        </cflayout>
 
    </cfform>
</div>

Open in new window

azadisaryev

i am not sure what the problem is...
the following example works just fine with a cfgrid bind to a url.
the object behind the cfgrid control is the same no matter where the grid data is coming from. the js renderer function works the same no matter where the data is from, too, because it manipulates the underlying cfgrid object, not the data you populate your grid with.

Azadi

<!--- BINIDING PAGE: test2.cfm --->
<cfprocessingdirective suppresswhitespace="yes">
<cfset data = queryNew("quantity,product", "integer,varchar")>
<cfloop from=1 to=10 index="x">
   <cfset total = randRange(20,100)>
   <cfset product = "Product " & x>
   <cfset queryAddRow(data)>
   <cfset querySetCell(data, "quantity", total+0, x)>
   <cfset querySetCell(data, "product", product, x)>
</cfloop>
<cfoutput>#serializejson(queryconvertforgrid(data, url.page, url.pagesize))#</cfoutput>
</cfprocessingdirective>
 
 
<!--- CFGRID PAGE: test.cfm --->
<!--- note: no need for <cfajaximport/> any more, since the grid uses ajax binding and required js functions will be imported by cf automatically --->
<html>
<head>
<!--- javascript for custom grid rendering --->
<script type="text/javascript">
// custom renderer for QUANTITY column
renderQuantity = function(data,cellmd,record,row,col,store) {
  // check if value in QUANTITY column is min value and render this column's (QUANTITY) text RED and BOLD if it is
  if(data <= 50) return '<b style="color:red;">' + data + '</b>';
  else return data;
}
// custom renderer for PRODUCT column
renderProduct = function(data,cellmd,record,row,col,store) {
  // check if value in QUANTITY column is min value
  // render the PRODUCT column text BOLD WHITE on RED background if it is
  if(record.data.QUANTITY <= 50) return '<b style="color:white;background-color:red;">' + data + '</b>';
  else return data;
}
// function to invoke custom renderers and return re-configured grid (called from ajaxonload() at the bottom of page
testgrid = function() {
  mygrid = ColdFusion.Grid.getGridObject('data');
  cm = mygrid.getColumnModel();
  cm.setRenderer(0,renderProduct); // assign custom renderer for FIRST column in the grid
  cm.setRenderer(1,renderQuantity); // assign custom renderer for SECOND column in the grid
  mygrid.reconfigure(mygrid.getDataSource(),cm); // reconfigure grid
}
</script>
</head>
<body>
<cfform name="testform">
<!--- our custom-renderer cfgrid --->
<!--- the QUANTITY column cell with minimum value and corresponding PRODUCT cell will be custom-rendered with custom colours --->
<cfgrid name="data" format="html" autowidth="true" bind="url:test_cfgrid_textcolor_url.cfm?page={cfgridpage}&pageSize={cfgridpagesize}&sortCol={cfgridsortcolumn}&sortDir={cfgridsortdirection}">
	<cfgridcolumn name="product" header="Product Name">
	<cfgridcolumn name="quantity" header="Quantity">
</cfgrid>
</cfform>
<!--- fire our custom grid renderers on pageload --->
<cfset ajaxOnLoad("testgrid")>
</body>
</html>

Open in new window

azadisaryev

hey larksys, how did it go with this? do you need more help?

Azadi

larksys

ASKER

This is where I ended up. I've researching the Ext framework and find it extremely difficult to find good documentation. Plenty of references. Not much else. Anyway, I've been using Firebug and an Ext reference to try to get to the color column in my grid. The lines;

cm = Ext.ColumnModel(cellmd);
cc = cm.getIndexById('STRUCTURE_COLOR_CODE');

are just where I stopped testing code. There has to be a way to get to the color column while rendering the name column.

<!--- Special rendering for company name colors --->
<script type="text/javascript" language="javascript">
// custom renderer for Color column
function renderName(data,cellmd,record,row,col,store) {
	cm = Ext.ColumnModel(cellmd);
	cc = cm.getIndexById('STRUCTURE_COLOR_CODE');
return '<b style="color:' + cc + ';">' + data + '<b>'; 
<!--- return '<b style="color:' +  'red' + ';">' + data + '<b>'; --->
 
 }
 
// function to invoke custom renderers and return re-configured grid (called from ajaxonload() 
function testgrid() {
  mygrid = ColdFusion.Grid.getGridObject('grid_Companies');
  cm = mygrid.getColumnModel(); 
  cm.setRenderer(2,renderName); // assign custom renderer for Name column in the grid
  mygrid.reconfigure(mygrid.getDataSource(),cm); // reconfigure grid
}
</script>	
	
<!--- fire the custom grid renderers on pageload --->
<cfset ajaxOnLoad("testgrid")>
 
 
----------------------------------------------------------------
 
 <cfgrid format="html"
												name="grid_Companies"
												bind="url:dspSearchResults_2.cfm?page={cfgridpage}&pageSize={cfgridpagesize}&sortCol={cfgridsortcolumn}&sortDir={cfgridsortdirection}&name2={name2@keyup}&name3={name3@keyup}&compNum={compNum@keyup}&auditFlag={auditFlag@change}"
												bindonload="yes"
												width="780"
												selectonload="no"
												pagesize="40"
												selectmode="row"
												autowidth="yes"
												colheaderalign="center"
												colheaders="yes"
												griddataalign="left"
												selectcolor="##FF9900"> 
                    <cfgridcolumn name="ID" display="Yes" dataalign="left" width="12" href="index.cfm?fa=viewComp" target="_blank" />
					<cfgridcolumn name="ID" header="FAST ID" display="Yes" dataalign="left" width="12" href="index.cfm?fa=viewCompTEMP" target="_blank" />
                    <cfgridcolumn name="Name" header="Name" dataalign="left" width="40" href="index.cfm?fa=viewComp" textColor="#Structure_Color_Code#" />
                    <cfgridcolumn name="PhoneNumber" header="Phone" dataalign="left" width="14" href="index.cfm?fa=viewComp" />
                    <cfgridcolumn name="CityState" header="City State" dataalign="left" width="20" href="index.cfm?fa=viewComp" />
                    <cfgridcolumn name="Country" header="Country" dataalign="left" width="20" href="index.cfm?fa=viewComp" />
              		<cfgridcolumn name="Structure_Color_Code" header="Color_Code" dataalign="left" width="20" href="index.cfm?fa=viewComp" />
				</cfgrid>

Open in new window

larksys

ASKER

Sorry about the code format.

azadisaryev

what format is the color value in your Structure_Color_Code grid column?
is it in hex format (i.e. 990000)?
does it include the # (i.e. #990000)?
is it a named color (i.e. red/green/blue)?

it CAN be done, and rather easily - pretty much same code as in my previous post. see attached working sample code.

depending on which format your color values are in, the grid rendering js functions will need to be adjusted... let me know which format your color is in and i will post YOUR edited code instead of just a sample code.

Azadi

<!--- BINIDING PAGE: test2.cfm --->
<cfprocessingdirective suppresswhitespace="yes">
<cfset colorlist = "green,red,blue,magenta,orange,gray">
<cfset data = queryNew("quantity,product,color", "integer,varchar,varchar")>
<cfloop from=1 to=10 index="x">
   <cfset total = randRange(20,100)>
   <cfset product = "Product " & x>
   <cfset queryAddRow(data)>
   <cfset querySetCell(data, "quantity", total+0, x)>
   <cfset querySetCell(data, "product", product, x)>
   <cfset querySetCell(data, "color", listgetat(colorlist, randrange(1, listlen(colorlist))), x)>
</cfloop>
<cfoutput>#serializejson(queryconvertforgrid(data, url.page, url.pagesize))#</cfoutput>
</cfprocessingdirective>
 
 
<!--- CFGRID PAGE: test.cfm --->
<html>
<head>
<!--- javascript for custom grid rendering --->
<script type="text/javascript">
// custom renderer for QUANTITY column
renderQuantity = function(data,cellmd,record,row,col,store) {
  // render QUANTITY column's text in color specified in COLOR column
	return '<b style="color:'+record.data.COLOR+';">' + data + '</b>';
}
// render PRODUCT column's text in color specified in COLOR column
renderProduct = function(data,cellmd,record,row,col,store) {
	return '<b style="color:'+record.data.COLOR+';">' + data + '</b>';
}
// function to invoke custom renderers and return re-configured grid (called from ajaxonload() at the bottom of page
testgrid = function() {
  mygrid = ColdFusion.Grid.getGridObject('data');
  cm = mygrid.getColumnModel();
  cm.setRenderer(0,renderProduct); // assign custom renderer for FIRST column in the grid
  cm.setRenderer(1,renderQuantity); // assign custom renderer for SECOND column in the grid
  mygrid.reconfigure(mygrid.getDataSource(),cm); // reconfigure grid
}
</script>
</head>
<body>
<cfform name="testform">
<cfgrid name="data" format="html" autowidth="true" bind="url:test2.cfm?page={cfgridpage}&pageSize={cfgridpagesize}&sortCol={cfgridsortcolumn}&sortDir={cfgridsortdirection}">
	<cfgridcolumn name="product" header="Product Name">
	<cfgridcolumn name="quantity" header="Quantity">
	<cfgridcolumn name="color" header="Color">
</cfgrid>
</cfform>
<!--- fire our custom grid renderers on pageload --->
<cfset ajaxOnLoad("testgrid")>
</body>
</html>

Open in new window

larksys

ASKER

It's stored in an SQL table as varchar. It's either "c0c0c0" or "green" but I can make it anything I want.

The bind code is attached.

<cfset attributes.suppresslayout2 = "true">
<cfset queryEnd="">
<cfset today = #dateformat(now(),"yyyy/mm/dd")#>
<cfquery name="Gcomps" datasource="#request.dsn#">
SELECT companies.id,name,city,state,Parent_Company_Number,Structure_Color_Code,Country,type,type_description ,rtrim(city) + '  ' + state + '  ' + rtrim(country) as citystate,
CASE WHEN isnull(Phone_Country_Prefix, 0) < 1 THEN ' ' ELSE Phone_Country_Prefix END + '(' + Area_Code + ') ' + substring(phone,1,3) + '-' +  substring(phone,4,4) as phonenumber,
CASE WHEN (date_viewed = '#today#') THEN '00e100' ELSE ' ' END as NameBGColor ,Who_Viewed as WhoViewed,Date_Viewed
FROM companies LEFT JOIN companies_Types ON companies.Type = Companies_Types.Company_Type LEFT JOIN companies_Structures
      ON companies.corporate_structure = Companies_Structures.Structure_ID
WHERE 	0=0
	<cfif compNum NEQ ""> AND companies.ID = #val(compNum)#</cfif>
	<cfif auditFlag eq 1> AND companies.audit_flag = 1</cfif>
	<cfif auditFlag eq 0> AND companies.audit_flag = 0</cfif>
  <cfif name2 NEQ "">
		AND 		upper(companies.name) like '#ucase(name2)#%'
  <cfelseif name3 NEQ "">
		AND upper(companies.name) like '%#ucase(name3)#%'
  <cfelse>
		AND 		companies.ID <> 0
	</cfif>
	<cfif sortcol neq "" or sortdir neq "">
		ORDER BY #sortcol# #sortdir#
  <cfelse>
  	ORDER BY name,state,city
	</cfif>
</cfquery>
<!--- Format the query so the bind expression can use it. --->
<cfoutput>#serializeJSON(QueryConvertForGrid(Gcomps, page, pageSize))# </cfoutput>

Open in new window

azadisaryev

hmmm... if it can be either hex color OR name color, it makes it difficult - try to make it just ONE format: either hex color code or name color (i suggest going with hex color code - you get more color variety!).

assuming that all your colors in Structure_Color_Code column are stored as HEX colors WITHOUT the # prefix (i.e c0c0c0, f8f8f8, 990000, etc), and this color IS the color you want to make the text in your NAME cfgrid cell, here's the code you need to use:

(see attached)

Azadi

<script type="text/javascript" language="javascript">
// custom renderer for Color column
renderName = function(data,cellmd,record,row,col,store) {
 return '<b style="color:#' + record.data.STRUCTURE_COLOR_CODE + ';">' + data + '<b>'; 
}
// function to invoke custom renderers and return re-configured grid (called from ajaxonload() 
testgrid = function() {
 mygrid = ColdFusion.Grid.getGridObject('grid_Companies');
 cm = mygrid.getColumnModel(); 
 cm.setRenderer(2,renderName); // assign custom renderer for Name column in the grid
 mygrid.reconfigure(mygrid.getDataSource(),cm); // reconfigure grid
}
</script>	
 
----------------------------------------------------------------
<cfgrid format="html"
name="grid_Companies"
bind="url:dspSearchResults_2.cfm?page={cfgridpage}&pageSize={cfgridpagesize}&sortCol={cfgridsortcolumn}&sortDir={cfgridsortdirection}&name2={name2@keyup}&name3={name3@keyup}&compNum={compNum@keyup}&auditFlag={auditFlag@change}"
bindonload="yes"
width="780"
selectonload="no"
pagesize="40"
selectmode="row"
autowidth="yes"
colheaderalign="center"
colheaders="yes"
griddataalign="left"
selectcolor="##FF9900"> 
<cfgridcolumn name="ID" display="Yes" dataalign="left" width="12" href="index.cfm?fa=viewComp" target="_blank" />
<cfgridcolumn name="ID" header="FAST ID" display="Yes" dataalign="left" width="12" href="index.cfm?fa=viewCompTEMP" target="_blank" />
<cfgridcolumn name="Name" header="Name" dataalign="left" width="40" href="index.cfm?fa=viewComp" />
<cfgridcolumn name="PhoneNumber" header="Phone" dataalign="left" width="14" href="index.cfm?fa=viewComp" />
<cfgridcolumn name="CityState" header="City State" dataalign="left" width="20" href="index.cfm?fa=viewComp" />
<cfgridcolumn name="Country" header="Country" dataalign="left" width="20" href="index.cfm?fa=viewComp" />
<cfgridcolumn name="Structure_Color_Code" header="Color_Code" dataalign="left" width="20" href="index.cfm?fa=viewComp" />
</cfgrid>
 
<cfset ajaxOnLoad("testgrid")>

Open in new window

azadisaryev

one thing that keeps coming up in my tests, though, is that when a hex color is all-numeric and starts with 0 (zero), like 000066, the cfgrid seems to get the value WITHOUT the zeros - only 66.
if i remember correctly, this has to do with serializeJSON() function... it just does this silly thing...

the work-around would be a little bit complicated...

in the query that powers your cfgrid you will need to add a space in front of the value of STRUCTURE_COLOR_CODE column - use your db's string concatenation functions to do this. i.e. in MySQL you would do:
SELECT ... CONCATENATE(' ', STRUCTURE_COLOR_CODE) AS STRUCTURE_COLOR_CODE, ...

then you will need to modify the custom grid renderer js function a bit to trim the starting space from the color value, like this:
renderName = function(data,cellmd,record,row,col,store) {
return '<b style="color:#' + record.data.STRUCTURE_COLOR_CODE.replace(new RegExp("^[\\s]+", "g"), "") + ';">' + data + '<b>';
}

that solves it.

hth

Azadi

larksys

ASKER

Without the RegExp it renderers;

<b style="">Tyco Electronics<b>

with it I get a Firebug console error;

record.data.Structure_Color_Code is undefined

And that's where I started wrestling with the Ext solution 10 days ago. I couldn't spell Ext then. Now I get the Ex part. Very powerful stuff, but very cumbersome.

ASKER CERTIFIED SOLUTION

azadisaryev

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

larksys

ASKER

Shazam! That works great. Really fine work. Thank you.

larksys

ASKER

I really appreciate your "sticking with it". That's not always the case on a tricky post like this one.

jasbirbrar

Thanks, Azadi, this was most helpful.