Solved

dynamic color in cfgridcolumn

Posted on 2009-04-07
31
1,994 Views
Last Modified: 2012-06-27
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

0
Comment
Question by:larksys
  • 12
  • 11
  • 7
  • +1
31 Comments
 
LVL 19

Expert Comment

by:erikTsomik
ID: 24090976
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#" />

0
 
LVL 19

Expert Comment

by:erikTsomik
ID: 24090984
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>
0
 
LVL 1

Author Comment

by:larksys
ID: 24091346
textcolor doesn't accept variables.  I don't see where the second suggestion handles colors.
0
Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

 
LVL 1

Author Comment

by:larksys
ID: 24091739
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.
0
 
LVL 19

Expert Comment

by:erikTsomik
ID: 24091800
put Structure_Color_Cod inside #

like this
textcolor="#Structure_Color_Cod#"
0
 
LVL 1

Author Comment

by:larksys
ID: 24091896
That doesn't change the color.  The format seems to require a ##color code format.
0
 
LVL 19

Expert Comment

by:erikTsomik
ID: 24091927
are you using HTML format
0
 
LVL 19

Expert Comment

by:erikTsomik
ID: 24091934
What cf version are you on ?
0
 
LVL 19

Expert Comment

by:erikTsomik
ID: 24091935
0
 
LVL 1

Author Comment

by:larksys
ID: 24092282
Yes, HTML format. CF8. And, I did read it. Am I missing something?
0
 
LVL 19

Expert Comment

by:erikTsomik
ID: 24093527
i do not know for sure but you never know try instead of textcolor try textColor
0
 
LVL 27

Expert Comment

by:azadisaryev
ID: 24093913
textColor attribute is supported in Flash and Applet grids only. read the docs carefully.

Azadi
0
 
LVL 1

Author Comment

by:larksys
ID: 24099019
A quote from the documentation;
"Limitations: In HTML format, must specify a valid HTML color. In Applet format, must be one of the following:"
0
 
LVL 27

Expert Comment

by:azadisaryev
ID: 24103669
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

0
 
LVL 27

Expert Comment

by:azadisaryev
ID: 24114456
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
0
 
LVL 27

Expert Comment

by:azadisaryev
ID: 24114668
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

0
 
LVL 27

Expert Comment

by:azadisaryev
ID: 24114721
here's a screenshot of what it renders like (attached).

Azadi
sample.png
0
 
LVL 1

Author Comment

by:larksys
ID: 24127267
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

0
 
LVL 27

Expert Comment

by:azadisaryev
ID: 24127679
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

0
 
LVL 27

Expert Comment

by:azadisaryev
ID: 24173430
hey larksys, how did it go with this? do you need more help?

Azadi
0
 
LVL 1

Author Comment

by:larksys
ID: 24184717
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

0
 
LVL 1

Author Comment

by:larksys
ID: 24184735
Sorry about the code format.
0
 
LVL 27

Expert Comment

by:azadisaryev
ID: 24185185
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

0
 
LVL 1

Author Comment

by:larksys
ID: 24185244
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

0
 
LVL 27

Expert Comment

by:azadisaryev
ID: 24185403
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

0
 
LVL 27

Expert Comment

by:azadisaryev
ID: 24185805
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
0
 
LVL 1

Author Comment

by:larksys
ID: 24186061
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.
0
 
LVL 27

Accepted Solution

by:
azadisaryev earned 500 total points
ID: 24190851
ok, i have figured this one out:

you get the error "record.data.Structure_Color_Code is undefined" when your query returns less records than your grid's PAGESIZE attribute value. so, in your case, if your query returns less than 40 records (the pagesize of your grid) you will get this error because there is no data in the empty rows of the grid.

a work-around is very simple - just a slight adjustment to the js function:

renderName = function(data,cellmd,record,row,col,store) {
 if (record.data.STRUCTURE_COLOR_CODE && record.data.STRUCTURE_COLOR_CODE != 'undefined') return '<b style="color:#' + record.data.STRUCTURE_COLOR_CODE.replace(new RegExp("^[\\s]+", "g"), "") + ';">' + data + '<b>';
 else return data;
}

voila! nice colorful text in the grid!

PS: you can even hide your STRUCTURE_COLOR_CODE grid column (by adding display="no" attribute) if you do not want to show it in your grid - the different colors text will still be rendered event with a hidden color code column!

Azadi
cfgrid-custom-text-color.png
0
 
LVL 1

Author Comment

by:larksys
ID: 24191258
Shazam!  That works great. Really fine work. Thank you.
0
 
LVL 1

Author Closing Comment

by:larksys
ID: 31567701
I really appreciate your "sticking with it". That's not always the case on a tricky post like this one.
0
 

Expert Comment

by:jasbirbrar
ID: 24436471
Thanks, Azadi, this was most helpful.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
cfspreadsheet 15 118
Database set up 5 85
Coldusion - DATA insert syntax problem 12 61
Coldfusion parsing of a cfset variable 2 28
This article  is about submitting  form through  ColdFusion.Ajax.submitForm to the action page and send a response back in JSON format which later can be decoded using ColdFusion.JSON.decode. By this way you can avoid the usual page refresh for subm…
The technique is by far very Simple! How we can export the ColdFusion query results to DOC file?  Well before writing this I researched a lot in Internet but did not found a good Answer anyways!  So i thought now i should share my small snippet w…
In an interesting question (https://www.experts-exchange.com/questions/29008360/) here at Experts Exchange, a member asked how to split a single image into multiple images. The primary usage for this is to place many photographs on a flatbed scanner…

733 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question