CFGRID Cell Renderer Revisited
As I mentioned in my post on Monday via a post on Ray Camden's site creating customized cell renderers are possible, though not officially supported in CFGRID.
What that actually means is that CF doesn't provide a simple way of specifying a cell render for a grid column as shown in the hypothetical code snipet below:
<script language="javascript">
change=function(val){
if(val > 0){
return '<span style="color:green;">' + val + '</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '</span>';
}
return val;
}
pctChange=function (val){
if(val > 0){
return '<span style="color:green;">' + val + '%</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}
formatDates = function(val){
if (val){
d = Date.parseDate(val,'d/m/Y h:ia');
return d.format('m/d/Y');
}else
return val;
}
</script>
<cfform name="test">
<cfgrid autowidth="true" name="StockPerformance" format="html" query="data" width="600">
<cfgridcolumn name="company" header="Company">
<cfgridcolumn name="price" header="Price" cellRenderer="change">
<cfgridcolumn name="change" header="Change" cellRenderer="change">
<cfgridcolumn name="percentchange" header="% Change" cellRenderer="pctChange">
<cfgridcolumn name="lastUpdated" header="lastUpdated" cellRenderer="formatDates">
</cfgrid>
</cfform>
As you probably guessed the attribute cellRenderer is not supported. But to achieve the desired effect as showing in the image below is not all that difficult.
The Desired Results
The Code
<cfajaximport/>
<html>
<head>
<script type="text/javascript" src="/CFIDE/scripts/ajax/ext/package/date.js"></script>
<script>
//The functions from the above code snippet are used here
change=function(val){
if(val > 0){
return '<span style="color:green;">' + val + '</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '</span>';
}
return val;
}
pctChange=function (val){
if(val > 0){
return '<span style="color:green;">' + val + '%</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}
formatDates = function(val){
if (val){
d = Date.parseDate(val,'d/m/Y h:ia');
return d.format('m/d/Y');
}else
return val;
}
doCellRender = function() {
gStockGrid = ColdFusion.Grid.getGridObject('StockPerformance');
cm = gStockGrid.getColumnModel();
cm.setRenderer(1, Ext.util.Format.usMoney);
cm.setRenderer(2,change);
cm.setRenderer(3,change);
cm.setRenderer(4,formatDates);
gStockGrid.reconfigure(gStockGrid.getDataSource(),cm);
}
</script>
</head>
<body>
<!--- call ajaxonload to set up the cell renderers --->
<cfset ajaxOnLoad("doCellRender")>
<!--- build an array for stock quotes using new implicit declaration..
this is a partial array taken from EXT grid example on extjs.com--->
<cfset arr[1]=['3m Co',71.72,0.02,0.03,'9/1/2006 12:00am']>
<cfset arr[2]=['Alcoa Inc',29.01,0.42,1.47,'9/1/2006 12:00am']>
<cfset arr[3]=['Altria Group Inc',83.81,0.28,0.34,'9/1/2006 12:00am']>
<cfset arr[4]=['American Express Company',52.55,0.01,0.02,'9/1/2006 12:00am']>
<cfset arr[5]=['American International Group, Inc.',64.13,0.31,0.49,'9/1/2006 12:00am']>
<cfset arr[6]=['AT&T Inc.',31.61,-0.48,-1.54,'9/1/2006 12:00am']>
<cfset arr[7]=['Boeing Co.',75.43,0.53,0.71,'9/1/2006 12:00am']>
<cfset arr[7]=['Caterpillar Inc.',67.27,0.92,1.39,'9/1/2006 12:00am']>
<cfset arr[8]=['Citigroup, Inc.',49.37,0.02,0.04,'9/1/2006 12:00am']>
<cfset arr[9]=['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1/2006 12:00am']>
<cfset arr[10]=['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1/2006 12:00am']>
<cfset arr[11]=['General Electric Company',34.14,-0.08,-0.23,'9/1/2006 12:00am']>
<cfset arr[12]=['General Motors Corporation',30.27,1.09,3.74,'9/1/2006 12:00am']>
<cfset arr[13]=['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1/2006 12:00am']>
<cfset arr[14]=['Honeywell Intl Inc',38.77,0.05,0.13,'9/1/2006 12:00am']>
<cfset arr[15]=['Intel Corporation',19.88,0.31,1.58,'9/1/2006 12:00am']>
<cfset arr[16]=['International Business Machines',81.41,0.44,0.54,'9/1/2006 12:00am']>
<cfset arr[17]=['Johnson & Johnson',64.72,0.06,0.09,'9/1/2006 12:00am']>
<cfset arr[18]=['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1/2006 12:00am']>
<cfset data = queryNew("company,price,change,percentchange,lastUpdated")>
<!--- loop through the array to populate the query --->
<cfloop from="1" to ="#arrayLen(arr)#" index="i">
<cfset queryAddRow(data)>
<cfset querySetCell(data, "company", '#arr[i][1]#', i)>
<cfset querySetCell(data, "price", '#arr[i][2]#', i)>
<cfset querySetCell(data, "change", '#arr[i][3]#', i)>
<cfset querySetCell(data, "percentchange", '#arr[i][4]#', i)>
<cfset querySetCell(data, "lastUpdated", '#arr[i][5]#', i)>
</cfloop>
<cfform name="test">
<cfgrid autowidth="true" name="StockPerformance" format="html" query="data" width="600">
<cfgridcolumn name="company" header="Company">
<cfgridcolumn name="price" header="Price">
<cfgridcolumn name="change" header="Change">
<cfgridcolumn name="percentchange" header="% Change">
<cfgridcolumn name="lastUpdated" header="lastUpdated">
</cfgrid>
</cfform>
</body>
</html>
I realized after I tried to use the Javascript array notation to create my stock array that it doesn't work the same way as the Javascript array notation. Hence the 18 array entries.
You may also be asking yourself why I first created the array and then proceeded to loop over it to create the query. Well when you create a query from scratch there is no querySetRow that will allow you to add a whole row of data in one go. Yes I know there is QueryAddColumn that I could have used but the javascript array was already nicely set up and so I used it instead.
Happy Coding...
Subscribe
Subscribe via RSS
Follow me on Twitter
Or, Receive daily updates via email.
Tags
adobe air ajax apple cf community cfml coldfusion examples ext flash flex google javascript max2007 max2008 misc open source programming railo software technology ui
Recent Entries
Converting structkeys to lowercase
Blogroll
An Architect's View
CFSilence
Rey Bango
TalkingTree
Wish List
There are no comments for this entry.
[Add Comment]