Solved

dynamic color in cfgridcolumn

Posted on 2009-04-07
31
1,976 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
 
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Hi. There are several upload tutorials using jquery and coldfusion. I found a very interesting one here Upload Your Files using Jquery & ColdFusion and Preview them (http://www.randhawaworld.com/) . I did keep the main js functions but made sever…
Recently while working on a project I got a very annoying cfdocument has no body error message. I had never seen this error before. So I checked the code. The code was pretty simple; it was Just showing me the cfdocumnt tag and inside that tag a …
Polish reports in Access so they look terrific. Take yourself to another level. Equations, Back Color, Alternate Back Color. Write easy VBA Code. Tighten space to use less pages. Launch report from a menu, considering criteria only when it is filled…
This video demonstrates how to create an example email signature rule for a department in a company using CodeTwo Exchange Rules. The signature will be inserted beneath users' latest emails in conversations and will be displayed in users' Sent Items…

757 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now