Twitter: raymondcamden


Address: Lafayette, LA, USA

Custom grid renderers with CFGRID

08-20-2007 47,217 views ColdFusion 142 Comments

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:

view plain print about
1<cfset data = queryNew("price,product")>
2<cfloop from=1 to=10 index="x">
3    <cfset total = randRange(20,100) & "." & randRange(1,99)>
4    <cfset product = "Product #X#">
5    <cfset queryAddRow(data)>
6    <cfset querySetCell(data, "price", total+0, x)>
7    <cfset querySetCell(data, "product", product, x)>
8</cfloop>
9
10<cfform name="test">
11<cfgrid autowidth="true" name="data" format="html" query="data" width="600">
12 <cfgridcolumn name="price" header="Price">
13 <cfgridcolumn name="product" header="Product">
14</cfgrid>
15</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:

view plain print about
1<cfset ajaxOnLoad("testgrid")>

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

view plain print about
1<cfajaximport/>

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

view plain print about
1myf = function(data,cellmd,record,row,col,store) {
2    if(data == "Product 4") return "<b>" + data + "</b>";
3    else return data;
4}
5testgrid = function() {
6    mygrid = ColdFusion.Grid.getGridObject('data');
7    cm = mygrid.getColumnModel();
8    cm.setRenderer(0, Ext.util.Format.usMoney);
9    cm.setRenderer(1,myf);
10    mygrid.reconfigure(mygrid.getDataSource(),cm);
11}

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.

view plain print about
1<cfajaximport/>
2<html>
3
4<head>
5<script>
6        
7myf = function(data,cellmd,record,row,col,store) {
8    if(data == "Product 4") return "<b>" + data + "</b>";
9    else return data;
10}
11testgrid = function() {
12    mygrid = ColdFusion.Grid.getGridObject('data');
13    cm = mygrid.getColumnModel();
14    cm.setRenderer(0, Ext.util.Format.usMoney);
15    cm.setRenderer(1,myf);
16    mygrid.reconfigure(mygrid.getDataSource(),cm);
17}
18</script>
19</head>
20
21<body>
22
23<cfset data = queryNew("price,product")>
24<cfloop from=1 to=10 index="x">
25    <cfset total = randRange(20,100) & "." & randRange(1,99)>
26    <cfset product = "Product #X#">
27    <cfset queryAddRow(data)>
28    <cfset querySetCell(data, "price", total+0, x)>
29    <cfset querySetCell(data, "product", product, x)>
30</cfloop>
31
32<cfform name="test">
33<cfgrid autowidth="true" name="data" format="html" query="data" width="600">
34 <cfgridcolumn name="price" header="Price">
35 <cfgridcolumn name="product" header="Product">
36</cfgrid>
37</cfform>
38
39<cfset ajaxOnLoad("testgrid")>
40</body>
41</html>

142 Comments

  • Commented on 08-20-2007 at 1:28 PM
    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....
  • Commented on 08-20-2007 at 1:41 PM
    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.
  • Commented on 08-20-2007 at 1:44 PM
    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. ;)
  • Commented on 08-20-2007 at 1:52 PM
    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 :)
  • Commented on 08-20-2007 at 2:34 PM
    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?
  • Commented on 08-20-2007 at 2:34 PM
    besides my inability to use c over g =\
  • Commented on 08-20-2007 at 3:02 PM
    DK: Share your code, will help you get it figured out. Sounds like something simple.
  • Commented on 08-20-2007 at 3:09 PM
    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.
  • Commented on 08-20-2007 at 3:13 PM
    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.
  • Commented on 08-20-2007 at 3:50 PM
    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?
  • Commented on 08-20-2007 at 3:54 PM
    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.
  • Commented on 08-20-2007 at 4:07 PM
    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/...
  • Commented on 08-20-2007 at 4:10 PM
    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.
  • Commented on 08-20-2007 at 4:12 PM
    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.
  • Raul Riera #
    Commented on 08-20-2007 at 7:28 PM
    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?
  • Commented on 08-20-2007 at 7:51 PM
    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.
  • Commented on 08-21-2007 at 2:31 AM
    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.
  • Brett #
    Commented on 08-22-2007 at 6:35 AM
    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*
  • Commented on 08-22-2007 at 7:33 AM
    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.
  • Commented on 08-23-2007 at 12:09 AM
    These are really cool. Has anyone had any luck using Ext's Drag and Drop features for the Grid through ColdFusion.Grid.getGridObject?
  • Commented on 08-23-2007 at 9:26 AM
    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.
  • Commented on 08-24-2007 at 7:39 AM
    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
  • Roben Rajan #
    Commented on 10-10-2007 at 1:17 AM
    A BIG HUG from me
  • Tony #
    Commented on 10-10-2007 at 8:00 PM
    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
  • Craig #
    Commented on 10-20-2007 at 1:29 PM
    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
  • Asim M. #
    Commented on 10-22-2007 at 11:27 AM
    How can apply the same on row level?

    i.e. change the color of the row, if a flag in the query is 1
  • Commented on 10-22-2007 at 11:56 AM
    Asim:

    Give this a look:

    http://extjs.com/forum/archive/index.php/t-702.htm...
  • Asim M. #
    Commented on 10-22-2007 at 12:27 PM
    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">
  • Commented on 10-24-2007 at 4:35 PM
    I am also looking for something to change the row color based on a value from the query. Any luck?
  • Asim M #
    Commented on 10-24-2007 at 4:52 PM
    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
  • Commented on 11-09-2007 at 8:16 AM
    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?
  • Commented on 11-27-2007 at 3:37 PM
    @Marc

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

    http://www.coldfusionguy.com/ColdFusion/blog/index...
  • Michael White #
    Commented on 01-04-2008 at 9:25 AM
    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?
  • Michael White #
    Commented on 01-04-2008 at 9:34 AM
    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.
  • Michael White #
    Commented on 01-04-2008 at 9:50 AM
    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
  • Brian #
    Commented on 02-06-2008 at 9:48 AM
    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,
  • SN #
    Commented on 06-04-2008 at 9:57 AM
    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.
  • Commented on 06-04-2008 at 10:58 AM
    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.
  • Millan Choi #
    Commented on 06-13-2008 at 6:48 AM
    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
  • sneha #
    Commented on 08-01-2008 at 9:12 PM
    How do i change the color of an entire row? Say i want certain rows to be in certain color...how to do that?
  • Tom #
    Commented on 08-04-2008 at 3:14 PM
    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
  • Commented on 12-06-2008 at 5:30 PM
    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
  • Commented on 12-08-2008 at 11:23 AM
    I'm confused. Are you saying you want to make every product have bold?
  • Commented on 12-10-2008 at 9:30 PM
    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
  • Commented on 12-11-2008 at 7:04 AM
    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.
  • Commented on 12-11-2008 at 8:11 AM
    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
  • Commented on 12-16-2008 at 11:13 AM
    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
  • Commented on 12-16-2008 at 11:15 AM
    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?
  • Commented on 12-16-2008 at 11:18 AM
    Yes, thats correct, in ONE column I need to be able to see Yes, No, True, or False.

    Thanks,
    Scott
  • Commented on 12-16-2008 at 11:20 AM
    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.
  • Commented on 12-16-2008 at 11:26 AM
    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.
  • Commented on 12-16-2008 at 11:29 AM
    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.
  • Commented on 12-16-2008 at 11:34 AM
    Great ideas, thanks for the help. I have a feeling the cheat is the easiest way around this issue.

    Kind Regards,
    Scott
  • Commented on 12-18-2008 at 1:04 PM
    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.
  • Bob R #
    Commented on 12-18-2008 at 6:42 PM
    Nevermind, I figured it out. Thanks for the great info. It has helped.
  • Mischa #
    Commented on 01-14-2009 at 9:59 AM
    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.
  • Commented on 01-14-2009 at 10:16 AM
    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.
  • Mischa #
    Commented on 01-14-2009 at 10:20 AM
    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.
  • Anthony Patch #
    Commented on 01-23-2009 at 10:31 AM
    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
  • Commented on 01-23-2009 at 11:08 AM
    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.)
  • Anthony Patch #
    Commented on 01-23-2009 at 11:20 AM
    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"?
  • Commented on 01-23-2009 at 11:23 AM
    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.
  • Anthony Patch #
    Commented on 01-23-2009 at 11:38 AM
    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..
  • Commented on 01-23-2009 at 11:41 AM
    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?
  • Commented on 01-23-2009 at 11:44 AM
    It looks like row is the row #, not all the data. I'm working on a solution for this now.
  • Commented on 01-23-2009 at 11:45 AM
    Ahah, its the Record attribute. Code sample coming...
  • Commented on 01-23-2009 at 11:47 AM
    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);
    }
  • Neil Bailey #
    Commented on 01-23-2009 at 12:03 PM
    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?
  • Anthony Patch #
    Commented on 01-23-2009 at 12:11 PM
    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...
  • Anthony Patch #
    Commented on 01-23-2009 at 12:13 PM
    you answered my question before I even asked it.
    u=d+bomb(.com)
    Thanks Ray...
  • Neil Bailey #
    Commented on 01-23-2009 at 12:13 PM
    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!
  • Anthony Patch #
    Commented on 01-23-2009 at 12:29 PM
    Many many thanks to you as well Neil...you really helped me unravel this bugger....
  • Neil Bailey #
    Commented on 01-23-2009 at 12:43 PM
    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.
  • Chaz #
    Commented on 02-27-2009 at 10:03 AM
    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
  • Commented on 02-27-2009 at 10:07 AM
    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.
  • Chaz #
    Commented on 02-27-2009 at 1:50 PM
    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?
  • Commented on 02-27-2009 at 1:54 PM
    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.
  • Chaz #
    Commented on 02-27-2009 at 3:03 PM
    Thank again for your help...

    Chaz
  • BeckyTheBest #
    Commented on 03-18-2009 at 8:24 AM
    > 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!
  • exstatic #
    Commented on 04-09-2009 at 7:07 PM
    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?
  • vaughn #
    Commented on 04-13-2009 at 11:21 AM
    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>
  • vaughn #
    Commented on 04-13-2009 at 12:46 PM
    also, getting js error "testgrid is not defined"
  • Commented on 04-14-2009 at 8:41 AM
    Looks fine to me. Do you have it online where we can see?
  • Meenakshi #
    Commented on 04-14-2009 at 12:11 PM
    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...
  • vaughn #
    Commented on 04-14-2009 at 4:23 PM
    Sorry, it's an internal app limited by login and IP addresses.
  • Commented on 04-14-2009 at 5:00 PM
    @Meenakshi: I'd just switch to a non-inline query. Use the Ajax-power built in.
  • mikeweezer #
    Commented on 06-11-2009 at 7:04 PM
    @ 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);
       }
  • drew #
    Commented on 07-31-2009 at 2:26 PM
    @ Tom

    Your code worked great. The only problem is that it stops changing the colors about 38 rows down. So if the query is longer than that it doesn't do the whole thing. I am not using paging to i have:

    <cfset this_limit = #thisquery.recordcount#>

    Any help would be great.

    Drew
  • drew #
    Commented on 08-03-2009 at 2:09 PM
    I am now trying to do this using Ray's way. I copy and pasted your example into a page and it works fine so I've got it working but when i implement it in my code i get the "testGrid is not defined" javascript error. I am trying to color the background of one column a certain color depending on the value of that same column. My code:

       myf = function(data,cellmd,record,row,col,store){
          if(data == "-") return "<span style=\"background-color:#FF0000\">" + data + "</span>";
          else return data;
    }
       testgrid = function()
       {
          mygrid = ColdFusion.Grid.getGridObject('priceGrid');
          cm = mygrid.getColumnModel();
          cm.setRenderer(1, myf);
          mygrid.reconfigure(mygrid.getDataSource(), cm);
       }

    Any thoughts?
  • Commented on 08-03-2009 at 2:11 PM
    Looks to be a case issue. testGrid is NOT the same as testgrid.
  • drew #
    Commented on 08-03-2009 at 2:52 PM
    Well "priceGrid" is the name of my grid in the form. It has the 'G' capitalized in the name. If thats what you were talking about.

    I went through and checked all my cases and they match. Now it says I am getting a syntax error on line 40 but when I got to debug it says "testgrid" is undefined again and points me to line 108.

    I am really new to javascript/coldfusion so please excuse me if this is worded badly.
  • Commented on 08-03-2009 at 2:55 PM
    In this case it not finding the function. Your code is

    testgrid = function()

    but you asked to run testGrid.

    Try renaming the function to testGrid.
  • drew #
    Commented on 08-03-2009 at 3:11 PM
    I think I may have confused you with the name of my actual grid: priceGrid. From my understanding of the code the line:

    mygrid = ColdFusion.Grid.getGridObject('priceGrid');

    is where you input the variable name of your actual grid. However I did change the function to testGrid and still get the syntax error and then the "testGrid is not defined" error. My code again is:

    myf = function(data,cellmd,record,row,col,store){
          if(data == "-")) return "<span style=\"background-color:#FF0000\">" + data + "</span>";
          else return data;
       }
       testGrid = function()
       {
          mygrid = ColdFusion.Grid.getGridObject('priceGrid');
          cm = mygrid.getColumnModel();
          cm.setRenderer(1, myf);
          mygrid.reconfigure(mygrid.getDataSource(), cm);
       }

    and at the bottom of the page:

    <cfset ajaxOnLoad("testGrid")>

    My thought for the syntax error is the "data == "-"" part. Is that the right way to compare it to a string not an numeric value?
  • drew #
    Commented on 08-03-2009 at 3:15 PM
    I had an extra parenthesis in there. It is working now! Thank you so much Ray for working with me. Sorry for the beginner problem. Thanks again.
  • Commented on 08-03-2009 at 3:19 PM
    No worries!
  • Frank #
    Commented on 08-07-2009 at 6:18 AM
    A quick way to apply a renderer to all cells. I use it to format a row colour depending on a given condition.

    for(var x = 0; x < cm.getColumnCount(); x++)
    {
    cm.setRenderer(x, myf);
    }
  • Michel #
    Commented on 02-20-2010 at 9:03 AM
    Dear,
    I know it is not really the place to ask this, but I did not find a better one -)
    I try to filter data on a cfgrid with a extjs select placed on the grid toolbar without success. I saw on the net a lot of example, but this always filter 'on the page'.
    Filter on cfselect is no problem. Just give the name of the component in the params of the cfc call and it is fine. But giving the name of the extjs select does not filter anything.
    So does somebody know how I can pass the extjs select value to the cfc method ?
    Thank you in advance and greetings from Belgium,
    Michel.
  • Debbie G. #
    Commented on 03-21-2010 at 4:51 PM
    Thank you so very much for the COMPLETE example on how to set the Renderer(). That helped me set the background color of my cells. Only the text/font color didn't change. Can you tell me what I'm doing wrong?

    My version of your myf() renderer function looks like this:
    myf = function(data,cellmd,record,row,col,store)
    {
    if (data == 'G')
    cellmd.css = 'Green';
    else if (data == 'R')
    cellmd.css = 'Red'
    else if (data == 'Y')
    cellmd.css = 'Yellow'
       
    return(data);
    }


    My CSS contains:
    .Red {
    background:red!important;
    color:white!important;
    }
    .Green {
        background:green!important;
    color:white!important;
    }
    .Yellow {
        background:yellow!important;
    color:black!important;
    }


    And a second question, my select in my CFC is of datatype "bit" (0/1) but I type cast so the select returns "No/Yes". But the CFGrid is showing it as false/true. Per your comment # 52 above, you mention passing returnFormat=plain in the URL. I'm not binding my grid to a URL but a CFC. How/where in the code do I set returnFormat=plain?

    Thank you very much from a CFGrid, ExtJS newbie.
  • Commented on 03-22-2010 at 1:17 PM
    You've got me on the CSS one. Sorry.

    As to your second question, the returnFormat attribute goes in the url portion.
  • Debbie G. #
    Commented on 03-22-2010 at 2:15 PM
    No worries about the CSS. I was hoping it was something simple like a typo.

    As for the second question, I'm NOT using a URL. I'm using a CFC/component to do the binding. So I'm assuming the returnFormat=plain goes somewhere in the testgrid() JavaScript function. Would you mind giving me the syntax on how to do that?

    Thanks very much :)
  • Commented on 03-22-2010 at 2:28 PM
    Hmm. So if you are binding to

    cfc:foo.goo()

    you want to switch to url mode

    url:foo.cfc?method=goo&returnformat=plain

    It's the same thing - just a different way to hit it.
  • Debbie G. #
    Commented on 03-23-2010 at 2:06 PM
    I figured out how to set the text/font color. Below is my revised version of myf() renderer. NOTE:
    .css - A CSS class name to add to the cell's TD element.
    .attr - An HTML attribute definition string to apply to the data container.


    myf = function(data,cellmd,record,row,col,store)
    {
    if (data == 'G')
    {cellmd.css = 'Green';
    cellmd.attr = 'style="color:White;"';}
    else if (data == 'R')
    {cellmd.css = 'Red';
    cellmd.attr = 'style="color:White;"';}
    else if (data == 'Y')
    cellmd.css = 'Yellow'

    return(data);
    }


    Regarding my second question about showing Yes/No instead of true/false, I found that returnformat is an argument to my CFC function and it is NOT valid for CF8 (only in CF9). In searching the ExtJS site, I found the BooleanColumn class.

    In my version of your testgrid() function I added the 2 lines below but keep getting this JavaScript error: Object doesn't support this property or method. I updated my ext-all.js file to make sure it's up to date but keep getting the error. I believe it's only my syntax that wrong. Can you help me with that? Thanks :)

    mygrid.getBooleanColumn().falseText('No');
    mygrid.getBooleanColumn().falseText('No');
  • Debbie G. #
    Commented on 03-23-2010 at 2:09 PM
    Sorry, the last line I added to my version of testgrid() function is:
    myGrid.getBooleanColumn().trueText('Yes');
  • Commented on 03-24-2010 at 7:42 AM
    Some random notes:

    1) returnFormat is valid in CF8. It is a special argument that 'flavors' the response to either plain, json, or wddx.

    2) Sorry - no idea on your error - you are beyond my knowledge. :) I can say it is probably dangerous to update ColdFusion's EXT files. A future update (like 8.0.2 perhaps, if it is created) may blow away your changes. What I recommend to folks who want REAL fine grained control is - download Ext separately and use it separately. Yes it is more work, but, you get more control.
  • David Jacobson #
    Commented on 04-29-2010 at 11:42 AM
    Ray,

    How would one mask/render the value of a select list from a query? My grid displays the actual value (number) instead of what that number represents (Name). When I clicked into the cell to edit, the dropdown displays correctly the names but the gridcolumn displays the number. Any ideas?
  • Commented on 04-30-2010 at 7:35 PM
    Sorry but I haven't used the with cfgrid. I took a quick look - it looks like: values, valuesDelimiter, and valuesDisplay, may be what you want. They are attributes of the cfgridcolumn tag.
  • garence #
    Commented on 05-31-2010 at 11:31 PM
    Hi all ... I am using a flash cfgrid to display output from a query, how do I hide the column that displays the currentrow of the query?

    Thanks for any help here. I've looked for a solution during these past few days, but no luck.
  • Debbie G. #
    Commented on 06-02-2010 at 4:49 PM
    I'm using IE7, ColdFusion 8, HTML format for CFGrid, bind to a CFC to get the data.

    1) How do I allow the user to manually resize a column width by clicking and dragging the header cell border?

    2) How do I lock a column the way a user freezes columns/panes in Excel?
  • sateesh #
    Commented on 06-03-2010 at 5:01 AM
    whenever i am using cfwindow i'm getting
    (
    imports for tag cfform are missing. use cfajaximport them on your main page.[Enable debugging by adding 'cfdebug' to your url parameters to see more information]
    )

    this error
  • Commented on 06-03-2010 at 6:09 AM
    @Sateesh: So did you try cfajaximport?
  • Commented on 06-03-2010 at 6:45 AM
    @Debbie: I thought you could resize cols by default? As for freezing, you would need to look into the Ext docs for that.
  • Debbie G. #
    Commented on 06-03-2010 at 9:00 AM
    When I click on the header bar/divider, it only resizes the header, not the entire column.
  • Commented on 06-03-2010 at 9:03 AM
    Wow, um, no answer on that. Sorry!
  • Debbie G. #
    Commented on 06-03-2010 at 9:34 AM
    I'm getting "Object doesn't support this property or method" error on the last line of my function below. Can you tell me what's wrong with my syntax? Thanks for all your help.

    function gridSetup()
    {
    var myGrid = ColdFusion.Grid.getGridObject('results');

    cm = myGrid.getColumnModel();
    cm.getColumnById(cm.getColumnID(1)).resizable = true;
    }
  • Commented on 06-03-2010 at 9:44 AM
    If the last line is causing errors, break it up. For example, first try cm.getColumnID(1). Ensure it works. Then try cm.getColumnById. See if that works. Then set resizable to tru.
  • Rob Kopp #
    Commented on 06-21-2010 at 5:01 PM
    Could you please elaborate on mygrid.reconfigure(mygrid.getDataSource(), cm);

    I've been setting up some grids here at work and have found that the reconfigure method slows down the page dramatically. On a whim I commented it out and the custom formatting stayed and loaded much, much faster.

    Am I missing something? Is it necessary to reconfigure the store?
  • Commented on 06-22-2010 at 1:29 PM
    It was my understanding that it was required - but maybe that's changed in more recent Ext versions.
  • Michael Appenzellar #
    Commented on 07-19-2010 at 2:01 PM
    See if I can explain this....Is there a way in one grid renderer to reference more than one column? Say I have a column called File. I want to be able to display the image of the file type along with the title of the file. Now I know how to do this in SQL to trick the display, but then SORTING doesn't work...so I thought a renderer would be the next best place due to its formatting abilities. So I need to do something like <code><img src="images/" + docType + ">" + title + "</code> Both docType and title are seperate fields in the database.
  • Commented on 07-19-2010 at 2:03 PM
    If you look at my sample code, you can see that the entire row is passed to the function. So you can base your custom display on anything from the row.
  • Michael Appenzellar #
    Commented on 07-19-2010 at 2:11 PM
    but you reference a specific field. So when you do a: cm.setRenderer(3....the 3 references a specific column. I need to be able to reference more than 1 column in the same renderer.

    Select docType (col1), title (col2)

    ulimately I need <img src="images/"+docType+">"+title;

    but everything I can find, I could ONLY output col1 the docType OR col2 the title, not both seperate. I apologize if I am speaking jibberish ;o)
  • Commented on 07-19-2010 at 2:14 PM
    I'm not quite sure I get what you mean. I used a custom renderer for one cell. Yes. But you are -given- the entire row. So you can look at other cells when you are determining how to display that one cell.

    In other words, when you want to display the title, as you said, you want to check docttype. You can - its in the row data.
  • Michael Appenzellar #
    Commented on 07-19-2010 at 2:19 PM
    so how do you do that in the same function such as:
    myf = function(data,cellmd,record,row,col,store) {
    if(data == "Product 4") return "<b>" + data + "</b>";
    else return data;
    }

    data seems to only give you info on the column specified. I need like a data1 data2 scenario.
  • Commented on 07-19-2010 at 2:21 PM
    It's the 4th argument - row. It would contain all the cell data.
  • Commented on 07-20-2010 at 9:50 AM
    As a followup, Michael and I spoke "off blog" and I created a new CF9 version of this that demonstrates what he wanted ("customize col X based on col Y"). I'll post a follow up around lunch.
  • Commented on 07-20-2010 at 12:08 PM
    The new blog post: http://www.coldfusionjedi.com/index.cfm/2010/7/20/...
  • Eric Richardson #
    Commented on 07-29-2010 at 4:42 PM
    Sanity check here - adding colheaders="no" to the cfgrid tag in this example does NOT make the column headers disappear, correct? Is this by design? I've spent most of this afternoon playing with cfgrid to use it almost like a select box, but can't figure out a way to hide the column header.
  • Commented on 07-30-2010 at 8:57 PM
    Some arguments to cfgrid are only for the Java or Flash version, or vice versa.
  • Vikram #
    Commented on 03-08-2011 at 8:43 AM
    Thanks a lot...I am new to CF ...I really found this snippet very helpful. Also just wanted to mention that, I tried to adapt my .cfc(without <html>) and it would not work, but embedding this within html on the same .cfc page worked...thanks again!
  • bitShifter #
    Commented on 03-30-2011 at 8:44 PM
    Scott - anyone.. What is the secret to get the drag to work on a cfgrid? If I use an Ext grid it works fine.. But when I use cfgrid and then get the grid object then set 'gridObj.enableDragDrop = true;' I get no drag option at all on the grid. You guys were saying you could get the drag part to work.. I can't even get a row to drag in a cfgrid..?
    cfgrid is Ext.grid so this seems like it should work with using cfgrid.. anyone?
  • Commented on 03-31-2011 at 8:20 AM
    Remember that the Ext lib shipping with CF is not the same as the most recent release by Ext. Personally, my opinion is that if you want to do something complex with cfgrid, you are probably not the audience for cfgrid. ;) Why not just use the grid natively? It sounds like you have a good handle on how to do so already?
  • Commented on 10-26-2011 at 12:32 PM
    Hi All -

    I spent a long time trying to figure out how to style row colors, with this thread being the key to getting it to work. If you need to set row colors based on some logic from SQL, here is a great method to do so in CFGRID. Hope this saves someone else some headaches -

    First - create a column in SQL called 'styles' and setup some rules that will pass in some css classes that define your rows. So, you are passing in class names like 'RedBg', 'BlueBg', whatever. I like using case statements in SQL (to avoid looping the query), but you could also just loop the query and use cf to fill in your column.

    Second - Make a cfgridcolumn for 'styles' and set it to hidden

    Third - Follow Ray's example above, but modify it like this:

       myf = function(data,cellmd,record,row,col,store) {
        cellmd.css = record.data.STYLES;
    return data;
    }

    row_colors = function() {
    mygrid = ColdFusion.Grid.getGridObject('gridname');
    cm = mygrid.getColumnModel();
    var i=0;
    for (i=0; i<=20; i++){
       cm.setRenderer(i,myf);
    };
    mygrid.reconfigure(mygrid.getDataSource(),cm);
    }

    This one will style 20 columns, which is probably more than you have. You can always up the number to make sure it gets all of them.

    Hope this helps someone!
  • egemen ates #
    Commented on 10-31-2011 at 8:12 AM
    hello, i have some issue about coldfusion grid,i try grid example but cold fusion given this error "The tag handler grid does not have a setter for the attribute checkBoxSelection specified in the Tag Library Descriptor.",please can you help me?
    my code is very simple
    <cfquery name = "GetCourses" dataSource = "calisma">
    SELECT id, name, surname,email
    FROM egemen_deneme
    </cfquery>

    <h3>cfgrid Example</h3>
    <i>Currently available courses</i>
    <!--- cfgrid must be inside a cfform tag. --->
    <cfform>
    <cfgrid name = "FirstGrid" format="html"
    height="320" width="580"
    font="Tahoma" fontsize="12"
    query = "GetCourses">
    </cfgrid>
    </cfform>
  • Commented on 10-31-2011 at 8:41 AM
    Odd. You aren't even using that as an attribute. What version of CF?
  • egemen ates #
    Commented on 10-31-2011 at 9:21 AM
    im using coldfusion 9
  • Commented on 10-31-2011 at 9:23 AM
    You got me then. Sorry.
  • egemen ates #
    Commented on 10-31-2011 at 9:31 AM
    maybe later, can you write answer...im waiting for answer thank you
  • Commented on 10-31-2011 at 9:39 AM
    Um... well, no. I don't know why your server is doing this. Your best bet is to contact Adobe technical support.
  • Pavan #
    Commented on 05-22-2012 at 5:31 AM
    Hello Guys,

    I have an issue with grid display, when I click on drop-down list available on header, options are cutting right. When I mouse hover it, options will display properly. I hope this require some changes to ext file or any other CSS files related to grid but not sure file name, can u help me to get this done.
    am using CF 9.

    Thanks in adv
  • Commented on 09-25-2013 at 9:31 AM
    I would like to convert from ExtJS rapped in ColdFusion
    to using CFgrid so I don't have to relearn ExtJS every time I want to upgrade. I have a customer Renderer in ExtJS that I am not sure how to implement in CFgrid using the function
    testgrid = function() {
    mygrid = ColdFusion.Grid.getGridObject('data');
    cm = mygrid.getColumnModel();
    cm.setRenderer(1,myf);
    mygrid.reconfigure(mygrid.getDataSource(),cm);
    }
    MY ExtJS Renderer is
    function renderReference(value, p, record){
    return String.format(
    '<b><a href="read_spill.cfm?hsem_ref_no={1}&hsem_ref_sub={2}" target="_self">{0}-{1}</a>',
    value, record.data.HSEM_REF_NO, record.data.HSEM_REF_SUB);
  • Commented on 09-25-2013 at 10:09 AM
    Ken, this is probably not helpful (ok, it definitely isn't helpful), but I strongly urge you to not use cfgrid. I'd either use Ext "naked" or use something like jqGrid.
  • David Jaocbson #
    Commented on 05-27-2014 at 10:52 AM
    Ray, I'm at my wits end with this but alas I cannot figure out what the issue is and I have exhausted all of my other resources. When you have an exta 2 minutes, would you be able to see what I apparently cannot see?

    changeCellColorStatus = function() {
       Ext.override( Ext.grid.GridView , {
          getRowClass: function(record, rowIndex, colIndex, rp, ds) {
          
          if ((record.get('NAME_STATUS') == 'TDP Requested') && (record.get('TDPCOUNT') > 29 && record.get('TDPCOUNT') < 45)) {
             return '<b style="background:##FFFF00">'+record.get('NAME_STATUS')+'</b>';
             }
             else if ((record.get('NAME_STATUS') == 'TDP Requested') && (record.get('TDPCOUNT') >= 45)) {
             return '<b style="background:##FF0000">'+record.get('NAME_STATUS')+'</b>';
             }
             else return record.get('NAME_STATUS');
          }

       });
    }

    formatCells = function() {
    theGrid = ColdFusion.Grid.getGridObject('requestGrid');
    cm = theGrid.getColumnModel();
    cm.setRenderer(10,changeCellColorStatus);
    }

    The name_status field in the grid become blank, no dtaa and no color.
  • Commented on 05-27-2014 at 11:00 AM
    I haven't used getRowClass so I can't help. I'm guessing this is reflecting newer Ext code (this post is about 7 years old) and I haven't looked at Ext in a very long time. Nor have I used cfgrid in a very long time either.

Post Reply

Please refrain from posting large blocks of code as a comment. Use Pastebin or Gists instead. Text wrapped in asterisks (*) will be bold and text wrapped in underscores (_) will be italicized.

Leave this field empty