Custom grid renderers with CFGRID

I've been playing a bit with CFGRID lately (as have others) and I found that by taking a look at Ext's documentation, there are some very powerful features hiding within the CFGRID tag. ColdFusion provides a function, ColdFusion.Grid.getGridObject, that when used gives you a handler to the underling Ext Grid object. By looking at the documentation, you can see which methods are available with the grid. One in particular I thought was pretty neat was the ability to add custom column renderers. What is that?

Well imagine you have data being fed into the grid that you do not have control over. For example - perhaps you have price information that isn't formatted nicely. Turns out Ext has a set of built in formatters that you can apply to grid columns, one of them being a money formatter. What if you have some other logic? Maybe you want to flag a price that is lower than 10 dollars? Again, using the Ext API, you can write your own formatter just for this purpose.

I've only just begun to scratch the surface of Ext, but here is a quick and dirty example to give you an idea of what is possible.

First lets create a simple grid:

<cfset data = queryNew("price,product")>
<cfloop from=1 to=10 index="x">
   <cfset total = randRange(20,100) & "." & randRange(1,99)>
   <cfset product = "Product #X#">
   <cfset queryAddRow(data)>
   <cfset querySetCell(data, "price", total+0, x)>
   <cfset querySetCell(data, "product", product, x)>
</cfloop>

<cfform name="test">
<cfgrid autowidth="true" name="data" format="html" query="data" width="600">
<cfgridcolumn name="price" header="Price">
<cfgridcolumn name="product" header="Product">
</cfgrid>
</cfform>

I'm using a hard coded query with products and prices. This is then fed directly into the grid. Note that I'm not using Ajax here.

Now let's look at how we can add a custom column renderer. The first thing we need to do is to set up the page to call a function when the grid is done loading. We do this with ajaxOnLoad:

<cfset ajaxOnLoad("testgrid")>

Because I'm not "properly" using Ajax on my page, I also added an import:

<cfajaximport/>

I've mentioned this hack before, and credit goes to Todd Sharp for discovering. Now let's look at the JavaScript:

myf = function(data,cellmd,record,row,col,store) {
   if(data == "Product 4") return "<b>" + data + "</b>";
   else return data;
}
testgrid = function() {
   mygrid = ColdFusion.Grid.getGridObject('data');
   cm = mygrid.getColumnModel();
   cm.setRenderer(0, Ext.util.Format.usMoney);
   cm.setRenderer(1,myf);
   mygrid.reconfigure(mygrid.getDataSource(),cm);
}

Skip the first function and focus in on testgrid. Testgrid is a horrible name but I was just playing around with the code so forgive me. I grab the grid using the ColdFusion.Grid.getGridObject API mentioned before. Everything after this is based on my reading of the Ext docs. I grab the columns using the getColumnModel function. I apply a renderer to columns 0 and 1 (you will never convince me that 0 based indexes make sense). The first renderer is a built one named usMoney. The second one is a custom function named "myf". usMoney will do what you imagine - format money. The second was hard coded to look for Product 4, and when found, bold it. I then use reconfigure to apply the column model back to my grid.

You can see an example of this here. Full source code is below.

<cfajaximport/>
<html>

<head>
<script>
      
myf = function(data,cellmd,record,row,col,store) {
   if(data == "Product 4") return "<b>" + data + "</b>";
   else return data;
}
testgrid = function() {
   mygrid = ColdFusion.Grid.getGridObject('data');
   cm = mygrid.getColumnModel();
   cm.setRenderer(0, Ext.util.Format.usMoney);
   cm.setRenderer(1,myf);
   mygrid.reconfigure(mygrid.getDataSource(),cm);
}
</script>
</head>

<body>

<cfset data = queryNew("price,product")>
<cfloop from=1 to=10 index="x">
   <cfset total = randRange(20,100) & "." & randRange(1,99)>
   <cfset product = "Product #X#">
   <cfset queryAddRow(data)>
   <cfset querySetCell(data, "price", total+0, x)>
   <cfset querySetCell(data, "product", product, x)>
</cfloop>

<cfform name="test">
<cfgrid autowidth="true" name="data" format="html" query="data" width="600">
<cfgridcolumn name="price" header="Price">
<cfgridcolumn name="product" header="Product">
</cfgrid>
</cfform>

<cfset ajaxOnLoad("testgrid")>
</body>
</html>

Comments

todd sharp's Gravatar Here's a direct links for the available renderers/formats if folks have trouble finding them in the docs...

http://extjs.com/deploy/ext-1.0.1/docs/output/Ext....
# Posted By todd sharp | 8/20/07 1:28 PM
Neil's Gravatar Ray,

We have been working w/ the EXT package for about 5 months now and - in my very humble opinion - its the best UI package available. It is so well put together and so flexible that I can't imagine us ever using any other package. While the whole world seemed to be moving towards the heavier flex-based clients, we took a long hard look at the lighter JS ui packages, which, when combined w/ an AJAX package, seemed to give us almost the same functionality as Flex w/out the heavy load times.

The grid component in Flex is only one of the outstanding widgets, though that one is a superstar in its own right (the fact that it has the paging capabilities, the fact that it integrates so seamlessly w/ its dataset....I get all giddy just thinking about it :>), but the tabs, the dialog/windowing, the drag/drop capabilities, the tree.... all fairly lightweight, and all beautiful as hell.

Again, we've been using it fairly heavily for the last 5 or six months. If your not overly experienced w/ JS, the learning curve can be steep (a price I had to pay my own self), but it is WELL worth the time required to bring yourself up to speed. And if you need any help, I can testify from personal experience that the forums on the site are highly active and extremely helpful/useful.

I don't mean to sound like a PR agent for Jack Slocum, but we looked for quite a while for a package that would allow us to build an attractive, interactive UI (like Flex) but without a heavy load time. Ext was *EXACTLY* what we were looking for.
# Posted By Neil | 8/20/07 1:41 PM
Raymond Camden's Gravatar Neil - I don't mind you PRing it at all. I think Ext seems _very_ slick from the _limited_ amount of stuff I've seen. I've read parts of the docs before - and frankly, I find it VERY difficult to grasp. Not impossible - just hard as heck. I think Spry has made me lazy. ;) I wish it were easy to use. My plan was to work on an AIR demo (I have one in mind in particular) and use Ext for the layout. It's one more thing I have "in mind" for my free time. ;)
# Posted By Raymond Camden | 8/20/07 1:44 PM
Neil's Gravatar Ray,

Believe me, I understand EXACTLY what you mean when you say its confusing - I had the hardest damn time understanding what was going on (and I *thought* I was fairly good w/ JS; I was wrong). But I cannot stress enough how worth it the investment is. If you have anything else on your list of stuff to take a HARD look at, bump this package to the top. Yes there are a lot of methods and properties and whatnot. Yes the documentation is............ummmmm....incomplete in places :) but the code itself is EXTREMELY well documented and fairly easy to understand, so if you have any questions just roll up your sleeves and check it out.

Also, like I said, the forums are very, very active, and while there seems to be this one guy named animal up there that doesn't like people who don't have his experience level and understanding of how the package works, other than him I can personally attest that most of the time people bend over backwards to see that you get pointed in the right direction. And obviously, after all the polite little shoves in the right direction YOU have given ME, if you ever needed a hand, let me know, and I will do what I can to get you on the right track :)
# Posted By Neil | 8/20/07 1:52 PM
DK's Gravatar never really used gfgrid before and today when I was playing with this I started dropping a cfgrid into a cfwindow and kept getting an error:

"http: Error processing JavaScript in markup for element testgrid_body: "

I tried cfajaximport for cfform and cfwindow etc but still get it. Am I missing something dumb here from my lack of gfgrid experience?
# Posted By DK | 8/20/07 2:34 PM
DK's Gravatar besides my inability to use c over g =\
# Posted By DK | 8/20/07 2:34 PM
todd sharp's Gravatar DK: Share your code, will help you get it figured out. Sounds like something simple.
# Posted By todd sharp | 8/20/07 3:02 PM
DK's Gravatar If you copy the code above and just dump it into a cfwindow from a calling page using the .create and change the format to flash from html you will see what I mean.
# Posted By DK | 8/20/07 3:09 PM
Raymond Camden's Gravatar I think - and do NOT quote me on this - but I think I've seen issues with cfwindow and pointing to stuff that has Flash. If I remember right the issue is two fold:

Stuff inside cfwindow that uses JS should use foo = function format, not function foo().

CF's Flash stuff uses function foo() format for it's JS.
# Posted By Raymond Camden | 8/20/07 3:13 PM
DK's Gravatar Theres also a decent tutorial from 2005 on the older version of cfgrid on doing something similar using the labelfunction to combine or reformat labeling.

http://www.asfusion.com/blog/entry/using-labelfunc...

I'm curious though, and I know its getting a bit specific, but if its something like formatting for price wouldn't you rather just do it in your query to begin with and save yourself some code?
# Posted By DK | 8/20/07 3:50 PM
Raymond Camden's Gravatar DK, I normally would do it server side too. I mentioned that above. However you may not have control over the data. Also - somethings don't make sense server side. Imagine a case where I want to highlight low prices. Sure I could do that server side, but it's really a client side concern.
# Posted By Raymond Camden | 8/20/07 3:54 PM
todd sharp's Gravatar DK: Here's a way to get the Flash Form to load in a cfwindow. Note that the renderer code that Ray has above will not work, but if you were curious as to why the form won't load this should explain it.

http://cfsilence.com/blog/client/index.cfm/2007/8/...
# Posted By todd sharp | 8/20/07 4:07 PM
Gary Gilbert's Gravatar Ray,

Thanks for posting this. I have been playing around with getting a custom grid renderer using the ext object for a while but then got side-tracked.

When I asked adobe about it the official word is that the cfgrid didnt support custom cell renderers.
# Posted By Gary Gilbert | 8/20/07 4:10 PM
Raymond Camden's Gravatar And I think it is still true - I wouldn't call what I did official. Well... wait. I'm not sure I'd call it dangerous either.

This Ajax stuff kinda opens the door a bit on what is supported/not supported.
# Posted By Raymond Camden | 8/20/07 4:12 PM
Raul Riera's Gravatar This is great, I would require to display the money in other languages as well, by modifying the .js file from extjs will Coldfusion 8 use that modified version when setting the cell renderer?
# Posted By Raul Riera | 8/20/07 7:28 PM
Raymond Camden's Gravatar You would not want to modify the core file. You would just write your own function, as I did in the example above. Notice I use both a built in function and my own function.
# Posted By Raymond Camden | 8/20/07 7:51 PM
Gary Gilbert's Gravatar This 'simple' solution to the cell renderer problem opens the door on a whole lot of things we can do with the cells.

Your previous example where you built the html in the record set isn't needed anymore you can simply return the image path and build the img tag on the client side in the cell renderer.
# Posted By Gary Gilbert | 8/21/07 2:31 AM
Brett's Gravatar These new Ext UI tags are very high on the "cool" factor with their functionality and ease of use, but I don't find them at all practical.

500KB in JS is a lot of page weight for simple datasets, and these controls don't downgrade gracefully. In real world implementations you'd potentially have thousands of rows of data and client side sorting will lose any usefulness.

Column reordering resizing are just candy, and not worth their weight.

If I were to invest the time in making these actually useful I'd be better off investing in building a Flex app. There is a tipping point in there if your app really needs this type of GUI.

Just my .02... I just wish Adobe would have spent the time enhancing the CFS (ColdFusion scripting) language instead of implementing a lot of unusable enhancements. *The performance increase in CF8 is awesome though*
# Posted By Brett | 8/22/07 6:35 AM
Raymond Camden's Gravatar Actually, thousands of rows are a perfect example of where Ajax shines. You can let a user browser thousands of rows w/o having to reload the entire page each time. CF makes it easy to bind a grid to a 'page' of data. This to me is a -very- usable enhancement. The weight of some of these UI components are high - I will admit that - but that doesn't make them unusable. It all depends on your audience.
# Posted By Raymond Camden | 8/22/07 7:33 AM
Scott's Gravatar These are really cool. Has anyone had any luck using Ext's Drag and Drop features for the Grid through ColdFusion.Grid.getGridObject?
# Posted By Scott | 8/23/07 12:09 AM
todd sharp's Gravatar Scott, I played with that a long while back. I could enable the drag, but couldn't get a drop target to accept it. Maybe I'll play with it some more to see what we can come up with.
# Posted By todd sharp | 8/23/07 9:26 AM
Scott Reynolds's Gravatar Hello Todd,
Thanks for the reply.
That is pretty much where I'm at now, Drag but no Drop :( .
But I'm getting really close, I've found that I can call any of Ext's functions since cfAjaxImport brings in all of Ext's libraries.

I will get this working, and I'll post some code for others looking once I do :).

- Kind Regards,
Scott
# Posted By Scott Reynolds | 8/24/07 7:39 AM
Roben Rajan's Gravatar A BIG HUG from me
# Posted By Roben Rajan | 10/10/07 1:17 AM
Tony's Gravatar I have added the render function successfully using a class on a span. But I still cant get rid of the underline that is put on the text if href is used.

I have two styling questions for an html cfgrid:
How do I get rid of the underline, and how to I stop the first line from being selected.

I have made a style sheet that loads after the grid and changes the default styles that the grid uses, but I cant seem to control those two visible elements.

- Thanks for you help

- Tony
# Posted By Tony | 10/10/07 8:00 PM
Craig's Gravatar This is exactly what I need to format a money column. I have an html cfgrid that uses the "bind" and "onchange" ajax functionality to call cfc's. I copied your example and it works fine as stand alone so I know I have all the proper plumbing in place.

I don't want to apply the cell rendering on form load but rather on the cfgrid "bind" and "onchange" events. I'm still coming up to speed on javascript. I'm not sure where to call the script from?

I also under stand that I need to change the gridname from 'data' to my 'WebChecks' and that i should be referencing column '12' and not 0 for the usmoney format.

my grid:

      <cfgrid name="WebChecks"
       bind="cfc:webChecksFunctions.getAllWebChecks({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection},{clientid@change},{ckacctid@change},{afterDate@change})"
         bindonload="no"
         colheaderalign="center"
         colheaderbold="yes"
         colheaders="yes"
         delete="yes"
         deletebutton="Delete Row"
         format="html"
         gridlines="yes"
         onchange="cfc:webChecksFunctions.updWebCheck({cfgridaction},{cfgridrow},{cfgridchanged})"
         pagesize="6"
         rowheaders="yes"
         selectmode="edit"
         sort="yes">
         <cfgridcolumn name="id" header="id" width="80" display="no">
         <cfgridcolumn name="clientid" header="ClientID" select="no" width="80" display="no">
         <cfgridcolumn name="clientnumber" header="Company" select="no" width="80" display="no">
         <cfgridcolumn name="payeetype" header="payeetype" select="no" width="100" display="no">
         <cfgridcolumn name="ckacctid" header="CkAcctID" select="no" width="80" display="no">
         <cfgridcolumn name="ckdate" header="Date" select="yes" width="60" display="yes">
         <cfgridcolumn name="cktype" header="d/c" select="yes" width="30" display="yes">
         <cfgridcolumn name="cknumber" header="Nbr" select="yes" width="50" display="yes">
         <cfgridcolumn name="payeeid" header="payeeid" select="no" width="80" display="no">
         <cfgridcolumn name="payeename" header="Payee/Source" select="yes" width="120" display="yes">
         <cfgridcolumn name="payeeaddress" header="Address" select="yes" width="60" display="no">
         <cfgridcolumn name="ckmemo" header="Purpose/Store" select="yes" width="200" display="yes">
         <cfgridcolumn name="ckamount" header="Amount" select="yes" width="60" display="yes">
         <cfgridcolumn name="ckprinted" header="printed?" select="no" width="30" display="no">
         <cfgridcolumn name="postedflag" header="posted?" select="no" width="30" display="no">
         <cfgridcolumn name="tenninetynine" header="1099?" select="yes" width="55" display="yes">
      </cfgrid>


My CFC:

<cfcomponent>

   <!--- getAllWebChecks --->
   <cffunction name="getAllWebChecks" access="remote" output="no">
      <cfargument name="page">
      <cfargument name="pagesize">
      <cfargument name="gridsortcolumn">
      <cfargument name="gridsortdirection">
      <cfargument name="clientid">
      <cfargument name="ckacctid">
      <cfargument name="afterDate">
      <cfif (gridsortcolumn eq "")>
       <cfset gridsortcolumn = "cknumber">
      </cfif>
      <cfif (gridsortdirection neq "ASC")>
       <cfset gridsortdirection = "DESC">
      </cfif>
      <cfset sqlline = "select id, clientid, clientnumber, payeetype ckacctid,cknumber,CONVERT(CHAR(8),CKDATE,10)AS ckdate, ckamount, ckamount, cktype, payeeid, payeename, payeeaddress, ckmemo,ckprinted, postedflag, tenninetynine from webchecks where clientid = '#clientid#' and ckacctid = '#ckacctid#' and ckdate >= '#afterdate#' order by #gridsortcolumn# #gridsortdirection#">   
   <cfquery name="webChecks" datasource="#application.dsgl#" username="#application.user#" password="#application.pswd#">#PreserveSingleQuotes(sqlline)#</cfquery>
      <cfreturn QueryConvertForGrid(webChecks,page,pagesize)>
   </cffunction>
   
   <!--- updWebCheck --->
   <cffunction name="updWebCheck" access="remote" output="no">
      <cfargument name="gridaction">
      <cfargument name="gridrow">
      <cfargument name="gridchanged">
      <cfif isStruct(gridrow) and isStruct(gridchanged)>
         <cfif gridaction eq "U">
            <cfset colname=structkeylist(gridchanged)>
            <cfset value=structfind(gridchanged,#colname#)>
            <cfset sqlline = "update WebChecks set #colname# = '#value#' where id = '#gridrow.id#'">
            <cfquery name="updWebCheck" datasource="#application.dsgl#" username="#application.user#" password="#application.pswd#">#PreserveSingleQuotes(sqlline)#</cfquery>
         <cfelse>
            <cfset sqlline = "delete from WebChecks where id = '#gridrow.id#'">
            <cfquery name="delWebCheck" datasource="#application.dsgl#" username="#application.user#" password="#application.pswd#">#PreserveSingleQuotes(sqlline)#</cfquery>
         </cfif>
      </cfif>
   </cffunction>
</component>

thanks for looking.

Craig
# Posted By Craig | 10/20/07 1:29 PM
Asim M.'s Gravatar How can apply the same on row level?

i.e. change the color of the row, if a flag in the query is 1
# Posted By Asim M. | 10/22/07 11:27 AM
# Posted By todd sharp | 10/22/07 11:56 AM
Asim M.'s Gravatar Thx todd,
but this is also related to column. I am try to find something based on the row.

For example, if I had a list of tasks, I'd like to change the background color of the row if the task is urgent... Urgent is a field in the query object returned by CFC

in my case, the urgent column is not displaying the the grid. so changing the color in the column will not have any effect.
<cfgridcolumn name="urgent" display="false">
# Posted By Asim M. | 10/22/07 12:27 PM
Connor M's Gravatar I am also looking for something to change the row color based on a value from the query. Any luck?
# Posted By Connor M | 10/24/07 4:35 PM
Asim M's Gravatar I expend a lot of time to figure that out, but because of less documentation on cf side, I was unable to accomplish, so finally I decided to go with the column color change for now.

HTH
# Posted By Asim M | 10/24/07 4:52 PM
Marc Funaro's Gravatar Okay, so I can get this code to work with "usMoney". But, I have a column that contains a smalldatetime coming from the database, so it look like this:

2002-03-01 00:00:00.0


And I need it to look like this:

3/1/2002

Without modifying the query.

According to the Ext docs, I should be able to change your example code to this:

cm.setRenderer(1, Ext.util.Format.date);

but when I do so, it does not render the column at ALL, and I get this error (twice) in the Javascript console:

Error: v.dateFormat is not a function
Source File: http://rwstage.advantex-internal.net/CFIDE/scripts...
Line: 15


Finally, it would seem that the column numbers ARE in fact a 1-based index, because in my experiment, my date column was the second column, and I had to use *2* (not 1) in order to get your example code to work in that situation.

Any advice?
# Posted By Marc Funaro | 11/9/07 8:16 AM
Scott Bennett's Gravatar @Marc

I figured out how to get a date renderer to work. I posted it here:

http://www.coldfusionguy.com/ColdFusion/blog/index...
# Posted By Scott Bennett | 11/27/07 3:37 PM
Michael White's Gravatar if I cut and paste your code directly into a new page and run it on my server the render has no effect. is there some mapping or path problem?
# Posted By Michael White | 1/4/08 9:25 AM
Michael White's Gravatar if I use cfdebug in the url, it says global: testgrid is not defined. I think the javascript function is unavailable for some reason. in the past I fixed this by putting the javascript inside the cfform tag, not this time.
# Posted By Michael White | 1/4/08 9:34 AM
Michael White's Gravatar I think I figured it out. onRequestStart in my application.cfc loads a navigation header that has html head and body tags. If I get rid of that it seems to work
# Posted By Michael White | 1/4/08 9:50 AM
Brian's Gravatar I'm still trying to get up to speed, but to format money values how would you have it include commas (i.e. $5,250.00). In my implementation I'm not getting commas.

Thanks,
# Posted By Brian | 2/6/08 9:48 AM
SN's Gravatar I'm not sure if this is the right place to pose this question. But I hope someone can answer it.

I would like to use a CFC method to return the query for the grid. But I am not clear on where the CFC should be stored. Can I place it in a folder and have the path defined in the Custom Tag Paths in CF administrator? If so, how do I bind the cfc's method to the grid?

Thank you.
# Posted By SN | 6/4/08 9:57 AM
Raymond Camden's Gravatar In order for you to use CFCs in an ajax manner, they must be located under your web root. As for binding methods, this is covered in the docs. I'd suggest reading the chapter in the Dev guide.
# Posted By Raymond Camden | 6/4/08 10:58 AM
Millan Choi's Gravatar Just a little addition to Raymond's script

It works great for me.

   formatsymbol = function(value) {
      return String.leftPad(value,5,'0');
   }
   formatprice = function(value) {
      return value.toFixed(3);
   }
   formatallordersgrid = function() {
   mygrid = ColdFusion.Grid.getGridObject('all_orders_grid');
   cm = mygrid.getColumnModel();
   cm.setRenderer(1,formatsymbol);
   cm.setRenderer(3,formatprice);
   cm.setRenderer(6,formatprice);
   cm.getColumnById(cm.getColumnId(3)).align = 'right';
   cm.getColumnById(cm.getColumnId(4)).align = 'right';
   cm.getColumnById(cm.getColumnId(5)).align = 'right';
   cm.getColumnById(cm.getColumnId(6)).align = 'right';
   cm.getColumnById(cm.getColumnId(7)).align = 'right';
   mygrid.reconfigure(mygrid.getDataSource(),cm);
   }

Can do formatting, plus aligning etc etc
# Posted By Millan Choi | 6/13/08 6:48 AM
sneha's Gravatar How do i change the color of an entire row? Say i want certain rows to be in certain color...how to do that?
# Posted By sneha | 8/1/08 9:12 PM
Tom's Gravatar Here's how I change the color of a cfgrid row depending on the row's query variables.

1. Select a styles column into your query in your cfc. We'll querysetcell that column later when we know what it should be. I tried using row_number() in the select statement query to match to the cell numbers, but it wasn't working out.

<cfquery name="thisquery" datasource="#dsn#">
SELECT *, '' as styles FROM table
</cfquery>

2. You have to set the background color for cells individually, can't do whole specific rows, unfortunately, given the identifiers we have to work with. Since my grids never have more than 10 columns, I set the background colors for 10 cells for each row needing a bg color (to keep it standard across my grids.

For example, to change the first cell in the first row, set the class .x-grid-cell-0-1 to your bg color. For row 9, cell 4, the class is .x-grid-cell-8-4. Keep in mind that the row number is not simply currentrow-1 of the query. It is the row number of the current page of the grid (0 to #pagesize#, NOT 0 to #recordcount# unless you don't use paging). So, after I have my query, I then run this little blurb to set the styles, for the cells of each row. You can tailor it to be specific to rows that need color, of course:

<cfset this_row = 0>
<cfset this_limit = pagesize - 1>
<cfoutput query="thisquery">
   <cfset this_color = "dddddd">
   <cfif somequerycolumn IS "somevalue"><cfset this_color = "ffcc00"></cfif>
   <cfset temp = #QuerySetCell(thisquery, "styles", "<STYLE TYPE=""text/css"">.x-grid-cell-#this_row#-1,.x-grid-cell-#this_row#-2,.x-grid-cell-#this_row#-3,.x-grid-cell-#this_row#-4,.x-grid-cell-#this_row#-5,.x-grid-cell-#this_row#-6,.x-grid-cell-#this_row#-7,.x-grid-cell-#this_row#-8,.x-grid-cell-#this_row#-9,.x-grid-cell-#this_row#-10 {background:###this_color#;}</STYLE>", currentrow)#>
   <cfif this_row LT this_limit><cfset this_row = this_row + 1><cfelse><cfset this_row = 0></cfif>
</cfoutput>

3. In the cfgrid, I have a column for styles that is display="no". The styles are written but not displayed, and it seems to work fine after a lot of trial and error.

Hope this helps,
Tom
# Posted By Tom | 8/4/08 3:14 PM
cfnewbie's Gravatar Thank you for this example. I was stumped until I found your site. Question - since I do not need to look through the grid for a particular row, how do I properly modify the script to bypass checking for "Product 4" which I do not need? I tried removing
if(data == "Product 4") return "<b>" + data + "</b>";
else return data;
}
from the script with little success. Tried many other variations as well.Yes, I know I need to stick my head in a javascript book. Any thoughts?
thanks
# Posted By cfnewbie | 12/6/08 5:30 PM
Raymond Camden's Gravatar I'm confused. Are you saying you want to make every product have bold?
# Posted By Raymond Camden | 12/8/08 11:23 AM
cfnewbie's Gravatar Sorry for the lack of clarity. I believe the first part of the script looks through the product column and if it finds product 4 then bold it. I am asking how to bypass the first part of the script so we do not search through all product rows. Instead,I want to go straight to the testgrid logic. Does this make sense?

thanks,
Bud
# Posted By cfnewbie | 12/10/08 9:30 PM
Raymond Camden's Gravatar I'm afraid I still don't quite get you. The code does go right to testgrid - this is what is run when things are done and sets stuff up.
# Posted By Raymond Camden | 12/11/08 7:04 AM
Scott's Gravatar Hello Bud,

I believe your looking for this...

Replace:
if(data == "Product 4") return "<b>" + data + "</b>";
else return data;
}

... with ...

return "<b>" + data + "</b>";

... and your function won't filter out records that are not "Product 4".

Have fun,
Scott
# Posted By Scott | 12/11/08 8:11 AM
Scott's Gravatar OK, now I have an issue.

I have a grid that shows display text and values for select box options.

If the text or value is Yes or No the grid renders it as True or False. I need to preserve the Yes and No text. I would write a custom renderer to force it but sometimes it is supposed to be True or False.

I was having this issue with cfajaxproxy calls, but all I had to do is call the setReturnFormat function and set it to "plain". I don't see any simular feature for the Grid, and I'm guessing that it won't be since the grid needs it to be JSON.

Any ideas on how to keep Yes and No from becoming True and False?

Thanks,
Scott
# Posted By Scott | 12/16/08 11:13 AM
Raymond Camden's Gravatar I'm confused. Are you saying that within ONE column, you want both Yes, No, _and_ True and False? If not, then why wouldn't a custom renderer work for you?
# Posted By Raymond Camden | 12/16/08 11:15 AM
Scott's Gravatar Yes, thats correct, in ONE column I need to be able to see Yes, No, True, or False.

Thanks,
Scott
# Posted By Scott | 12/16/08 11:18 AM
Raymond Camden's Gravatar Wow, well, you got me there. ;) Seems a bit confusing. Can I ask why? I'm trying to wrap my head around a time where I'd like to see all 4 values in one column.
# Posted By Raymond Camden | 12/16/08 11:20 AM
Scott's Gravatar In my application the user has the ability to dynamically build select boxes that are used in Surveys, Quizzes, Polls, ect.

The grid holds the Options for the Select boxes value and display text. Sometimes the user wants the select box to be Yes/No, sometimes they want it to be True/False, sometimes it is something completely different.

Thanks for the super fast responses :). I can usually figure this stuff out, but this one's got me.
# Posted By Scott | 12/16/08 11:26 AM
Raymond Camden's Gravatar Well, there ya go. That's a valid reason there. If returnformat=plain works for you, don't forget that you can bind a grid to a URL instead of a CFC. Just use the URL version. You can pass returnFormat=plain int he URL as well.

Shoot though, it won't work though as the grid will expect a certain response. What you want to do then is bind to a JavaScript function, do your Ajax call, and then manipulate the date. I've got another blog entry on here on binding a grid to a JS function.

You can also cheat. If CF's JSON is turning yes/no to true/false (or vice versa), you can change the data serverside to STOPMUCKING_#X# where X is the real value. CF will see it as a string and won't change it. In your custom renender, your logic now will be to simply remove STOPMUCKING_ from the value.
# Posted By Raymond Camden | 12/16/08 11:29 AM
Scott's Gravatar Great ideas, thanks for the help. I have a feeling the cheat is the easiest way around this issue.

Kind Regards,
Scott
# Posted By Scott | 12/16/08 11:34 AM
Bob R's Gravatar Ok I have looked and can't seem to figure this one out. I want to check the value of cell data in a row and set the Renderer of another cell based on that value. ie if cell 0 data = false then cell 1 data is bold. I've looked at the EXT documentation and did see a method for getting this info. Did I miss it? Thanks.
# Posted By Bob R | 12/18/08 1:04 PM
Bob R's Gravatar Nevermind, I figured it out. Thanks for the great info. It has helped.
# Posted By Bob R | 12/18/08 6:42 PM
Mischa's Gravatar I just realized that custom renderers do not seem to alter the original data for sorting purposes. For example, I have a list of prices I want a user to be able to sort. If you specify <cfgridcolumn name="price" type="NUMERIC"> the sorting works like a charm (32, 11, 10, 9 are properly sorted 9-10-11-32 and not 10-11-32-9), until your dataset contains something like "call". What's even more problematic for me, is that a NULL (empty) becomes $0 if you render with the format usMoney. In the above example, even if you replace "10" with "special price: ten dollars", it will sort properly between 9 and 11.
# Posted By Mischa | 1/14/09 9:59 AM
Scott's Gravatar Hello Mischa,

This is because sorting is done at the query level, buy the time your renderer sees it, the data is already sorted. The only way I know to get around this would be to format the data in the query itself, then it should sort correctly for you.
# Posted By Scott | 1/14/09 10:16 AM
Mischa's Gravatar Thanks for your quick reply Scott. The way my post was written might indicate that I perceive it as a problem, but it's actually a life saver for me and I'm glad it works the way it does!
In my case, I'm not binding my grid to a component/query, but rather I loop over query results in the display page, so there is no callback to the server when a sort is performed.
# Posted By Mischa | 1/14/09 10:20 AM
Anthony Patch's Gravatar Ray...great example. But I'm stumped on a variation of it. How could I render the corresponding price in bold if it is "Product 4"? So make column 0 bold if column 1 = "product 4"? Thanks!
Tony
# Posted By Anthony Patch | 1/23/09 10:31 AM
Raymond Camden's Gravatar Notice in the custom function I wrote that the entire row is passed. That should (afaik) give you access to the other data cells in the row. I'd suggest adding a console.dir(row) to the code. (Assuming you have Firebug installed.)
# Posted By Raymond Camden | 1/23/09 11:08 AM
Anthony Patch's Gravatar hmmm....isn't it the column that's passed (not the row)? I'm not quite sure I follow.
ex: "cm.setRenderer(1,myf);" will pass what is in the product column (column 1) to be checked in the myf function, and if the data in a certain row is "Product 4", it'll return the data with bold tags around it.

How can I apply that to the price column (column 0) if the product column (column 1) data is "Product 4"?
# Posted By Anthony Patch | 1/23/09 11:20 AM
Raymond Camden's Gravatar Look at the custom function in the code:

myf = function(data,cellmd,record,row,col,store) {
if(data == "Product 4") return "<b>" + data + "</b>";
else return data;
}

See all those arguments? row+col are both in there.
# Posted By Raymond Camden | 1/23/09 11:23 AM
Anthony Patch's Gravatar Yes...I see that. But I'm not sure how I return the newly formated html to another column of the same row. The learning curve for Ext is a little steep for me. In your custom function, it's returning the format, and the column is already passed. Would I put a function around '"<b>" + data + "</b>";' in myf to return data to a certain column for that row? ie return (col(0,'"<b>" + data + "</b>";')) or something like that? Sorry about being a little slow on uptake..
# Posted By Anthony Patch | 1/23/09 11:38 AM
Raymond Camden's Gravatar You aren't doing it to another column.

Let's make it simpler.

You want column X to be bold if column Y is some value, right?

As I said, you _apply_ the custom function to column X (see code above). In that function, you have access to the entire row, so you can look at the stuff in column Y.

Does that make sense?
# Posted By Raymond Camden | 1/23/09 11:41 AM
Raymond Camden's Gravatar It looks like row is the row #, not all the data. I'm working on a solution for this now.
# Posted By Raymond Camden | 1/23/09 11:44 AM
Raymond Camden's Gravatar Ahah, its the Record attribute. Code sample coming...
# Posted By Raymond Camden | 1/23/09 11:45 AM
Raymond Camden's Gravatar Here ya go. This will bold price if product is product 4.

myf = function(data,cellmd,record,row,col,store) {
if(record.data.PRODUCT == "Product 4") return "<b>" + data + "</b>";
else return data;
}
testgrid = function() {
mygrid = ColdFusion.Grid.getGridObject('data');
cm = mygrid.getColumnModel();
cm.setRenderer(0,myf);
mygrid.reconfigure(mygrid.getDataSource(),cm);
}
# Posted By Raymond Camden | 1/23/09 11:47 AM
Neil Bailey's Gravatar The way I would do this is to have a custom renderer for EACH column. You do, in fact, get the entire record object (according to the EXT API Docs at http://www.extjs.com/deploy/dev/docs/, look under the Grid branch, Column Model leaf, setRenderer method).

Then, in the renderer, check record.get("column_name_to_check)

if the value equals whatever, then set the cell to bold.

Does this make any sense?
# Posted By Neil Bailey | 1/23/09 12:03 PM
Anthony Patch's Gravatar bravo. Thanks, Ray!! I NEVER would have found the Record attribute on my own. That was the missing piece for me. What do you reference when working with Ext? Thanks again...
# Posted By Anthony Patch | 1/23/09 12:11 PM
Anthony Patch's Gravatar you answered my question before I even asked it.
u=d+bomb(.com)
Thanks Ray...
# Posted By Anthony Patch | 1/23/09 12:13 PM
Neil Bailey's Gravatar I have been working w/ EXT for well over 18 months, and every day use the API docs.

http://www.extjs.com/deploy/dev/docs/

Literally invaluable. If you can't find an answer in there, the EXT forums are EXTREMELY active:

http://www.extjs.com/forum/

good luck!
# Posted By Neil Bailey | 1/23/09 12:13 PM
Anthony Patch's Gravatar Many many thanks to you as well Neil...you really helped me unravel this bugger....
# Posted By Anthony Patch | 1/23/09 12:29 PM
Neil Bailey's Gravatar NP

More than a few people helped me extensively on the EXT forums when I was getting started (and often help me now when I run into a problem).

I am more than happy to pass along the same curteousy whenever I can. Good luck w/ the EXT package - in my opinion, the absolute best JS UI package available.
# Posted By Neil Bailey | 1/23/09 12:43 PM
Chaz's Gravatar I am working with cfmx 7; can I use any of this in this version of ColdFusion?

Is JS short for JavaScript and if so, wills any of this work if the users disable JavaScript in the browser?

Thanks
# Posted By Chaz | 2/27/09 10:03 AM
Raymond Camden's Gravatar This is all for ColdFusion 8. But - keep in mind this is CF8 making Ajax easier to use. You _can_ use Ajax, and Ext Grids, in CF7, you just have to do it more manually.

Yes, JS is short for JavaScript, and this will not work if they disable it.
# Posted By Raymond Camden | 2/27/09 10:07 AM
Chaz's Gravatar Thanks...

what are the work arounds if the user disable JavaScript?
should I invest in purchasing Ext JS and upgrading to 8?
how will I get it to work in my version?
# Posted By Chaz | 2/27/09 1:50 PM
Raymond Camden's Gravatar No JS: You can look at solutions that use inobtrusive JS. You won't be able to use anything that loads data via Ajax, but you can look at solutions where JS is used to enhance an existing, static table.
# Posted By Raymond Camden | 2/27/09 1:54 PM
Chaz's Gravatar Thank again for your help...

Chaz
# Posted By Chaz | 2/27/09 3:03 PM
BeckyTheBest's Gravatar > What's even more problematic for me, is that a NULL (empty) becomes $0 if you render with the format usMoney.

Has anyone figured out how to get rid of all the extra $0.00s besides building your own custom grid renderer? I would like to use the built-in usMoney one but it can't seem to distinguish between blank rows and rows with data.

Thank you for any help!
# Posted By BeckyTheBest | 3/18/09 8:24 AM
exstatic's Gravatar I have a cfgrid that is hydrated by a XML file. I am trying to append a space (' ') to all cells as I want it all cells to show up in the submit.cfm as being edited. This will allows me to write back to the XML file. (No DB here!). I don't know "ext" enough to do that. I am able to setRenderer() with a $ sign etc following some great examples on the web. But I am unable to do this for all cells: data = data + ' '. Can someone help me please?
# Posted By exstatic | 4/9/09 7:07 PM
vaughn's Gravatar I'm trying to change the color of the NAME column based on the color code in the COLOR column. It's seems simple enough based on what I've read here, but I can't even get it to render in red for all rows.

<!--- Special rendering for company name colors --->
<script type="text/javascript">

// custom renderer for NAME column
renderName = function(data,cellmd,record,row,col,store) {
// retrieve the color code column
colorcode = record.data.structure_color_code;
// render the NAME column text in the corresponding color from the color column
return '<b style="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(2,renderName); // assign custom renderer for Name column in the grid
mygrid.reconfigure(mygrid.getDataSource(),cm); // reconfigure grid
}
</script>
# Posted By vaughn | 4/13/09 11:21 AM
vaughn's Gravatar also, getting js error "testgrid is not defined"
# Posted By vaughn | 4/13/09 12:46 PM
Raymond Camden's Gravatar Looks fine to me. Do you have it online where we can see?
# Posted By Raymond Camden | 4/14/09 8:41 AM
Meenakshi's Gravatar Hello Ray,

my grid is binded through a query as i display below:

<cfgrid format="html" name="GvSpec" width="800" pagesize="10" selectonload="true" autowidth="yes" query="ProductSpec" selectmode="row" >
<cfgridcolumn name="stdTitle" width="70" header="Doc" >
<cfgridcolumn name="PartNumber" width="50" header="P No." select="no">
<cfgridcolumn name="detailURL" width="200" header="Spec Url" >
</cfgrid>

how can i refresh this grid? As much as I know, ColdFusion.grid.refresh("GvSpec") does not work when we use query in CFGRId. I tried this javascript on button click
var mygrid = ColdFusion.Grid.getGridObject('GvSpec1');
mygrid.render();

but this not showing new records in database.
Please help me...
# Posted By Meenakshi | 4/14/09 12:11 PM
vaughn's Gravatar Sorry, it's an internal app limited by login and IP addresses.
# Posted By vaughn | 4/14/09 4:23 PM
Raymond Camden's Gravatar @Meenakshi: I'd just switch to a non-inline query. Use the Ajax-power built in.
# Posted By Raymond Camden | 4/14/09 5:00 PM
mikeweezer's Gravatar @ Vaughn,

I have it returning red text for me. You need to put \ marks infront of the " in your javascipt.

Here is mine:
   myf = function(data,cellmd,record,row,col,store) {
    if(data == "Foo") return "<span style=\"background-color:#FF0000\">" + data + "</span>";
    else return data;
   }
   testgrid = function() {
    mygrid = ColdFusion.Grid.getGridObject('resultsGrid');
    cm = mygrid.getColumnModel();
    cm.setRenderer(1,myf);
    mygrid.reconfigure(mygrid.getDataSource(),cm);
   }
# Posted By mikeweezer | 6/11/09 7:04 PM