Posted in ColdFusion | Posted on 07-20-2010 | 3,250 views
Almost three years ago I wrote a blog entry on doing custom grid renderers with CFGRID and the Ext grid for ColdFusion 8. This week a reader and I went back and forth in the comments concerning how to build a renderer that would modify a column but check other column values for the logic. So for example, in that previous blog entry my logic for a custom product column was to check to see if the product was "Product 4". What if I wanted to check the price for example? Here is an updated version that works with ColdFusion 9 and does just that.
1<cfajaximport/>
2<html>
3
4<head>
5<script>
6
7myf = function(data,cellmd,record,row,col,store) {
8 console.dir(record.data);
9 //old logic, prod 4 only
10 //if(data == "Product 4") return "<b style='color:red'>" + data + "</b>";
11 //new logic, price > 50 and type is weapon
12 if(record.data.TYPE == 'weapon' && record.data.PRICE > 50) return "<b style='color:red'>" + data + "</b>";
13 else return data;
14}
15testgrid = function() {
16 mygrid = ColdFusion.Grid.getGridObject('data');
17 cm = mygrid.getColumnModel();
18 cm.setRenderer(0, Ext.util.Format.usMoney);
19 cm.setRenderer(1,myf);
20 mygrid.reconfigure(mygrid.getStore(),cm);
21}
22</script>
23</head>
24
25<body>
26
27<cfset data = queryNew("price,product,type")>
28<cfloop from=1 to=10 index="x">
29 <cfset total = randRange(20,100) & "." & randRange(1,99)>
30 <cfset product = "Product #X#">
31 <cfset queryAddRow(data)>
32 <cfset querySetCell(data, "price", total+0, x)>
33 <cfset querySetCell(data, "product", product, x)>
34 <cfset querySetCell(data, "type", "#randRange(0,1)?'weapon':'fruit'#")>
35</cfloop>
36
37<cfform name="test">
38<cfgrid autowidth="true" name="data" format="html" query="data" width="600">
39 <cfgridcolumn name="price" header="Price">
40 <cfgridcolumn name="product" header="Product">
41 <cfgridcolumn name="type" header="Type">
42</cfgrid>
43</cfform>
44
45<cfset ajaxOnLoad("testgrid")>
46</body>
47</html>
2<html>
3
4<head>
5<script>
6
7myf = function(data,cellmd,record,row,col,store) {
8 console.dir(record.data);
9 //old logic, prod 4 only
10 //if(data == "Product 4") return "<b style='color:red'>" + data + "</b>";
11 //new logic, price > 50 and type is weapon
12 if(record.data.TYPE == 'weapon' && record.data.PRICE > 50) return "<b style='color:red'>" + data + "</b>";
13 else return data;
14}
15testgrid = function() {
16 mygrid = ColdFusion.Grid.getGridObject('data');
17 cm = mygrid.getColumnModel();
18 cm.setRenderer(0, Ext.util.Format.usMoney);
19 cm.setRenderer(1,myf);
20 mygrid.reconfigure(mygrid.getStore(),cm);
21}
22</script>
23</head>
24
25<body>
26
27<cfset data = queryNew("price,product,type")>
28<cfloop from=1 to=10 index="x">
29 <cfset total = randRange(20,100) & "." & randRange(1,99)>
30 <cfset product = "Product #X#">
31 <cfset queryAddRow(data)>
32 <cfset querySetCell(data, "price", total+0, x)>
33 <cfset querySetCell(data, "product", product, x)>
34 <cfset querySetCell(data, "type", "#randRange(0,1)?'weapon':'fruit'#")>
35</cfloop>
36
37<cfform name="test">
38<cfgrid autowidth="true" name="data" format="html" query="data" width="600">
39 <cfgridcolumn name="price" header="Price">
40 <cfgridcolumn name="product" header="Product">
41 <cfgridcolumn name="type" header="Type">
42</cfgrid>
43</cfform>
44
45<cfset ajaxOnLoad("testgrid")>
46</body>
47</html>
If you compare this code to the older entry, the changes are:
- In my fake query, I added a new type column. All my products are either weapons or fruits. (Although one could argue that you could turn some weapons into fruits. I mean turn some fruits into weapons. Yeah, that's it.)
- Next look at the myf function. I kept the old logic in there commented out. You can see it made use of the data argument which is the cell being formatted. I ignore that though and check the rest of the row. This is passed in the record object. As you see, I check the TYPE and PRICE, and based on my business rule, I color the item red.
- One small other change - back in the testgrid function (which remember is run when the application starts up), I changed getDataSource to getStore. This reflects the fact that the Grid used in CF9 has a different API then the one run in CF8.
If you want to see a demo of this, just hit the button below. You may need to reload once or twice since the values are random.
even these days we r still having issues with browser compatibility... really silly
any fix to make it work in IE, also?
thnks
I already did read the ExtJS 3 documentation... I tried to create a object Ext.form.Checkbox and return it, but it didnt work :(
[Add Comment] [Subscribe to Comments]