Wish List
Tags
adobe air ajax coldfusion examples ext flex javascript max2007 misc technology ui
Recent Entries
Search
RSS
Subscribe
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:
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
<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...
There are no comments for this entry.
[Add Comment]