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....

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. ;)

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?

DK: Share your code, will help you get it figured out. Sounds like something simple.

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.

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.

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.

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?

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.

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.

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.

A BIG HUG from me

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:

Give this a look:

http://extjs.com/forum/archive/index.php/t-702.htm...

I am also looking for something to change the row color based on a value from the query. Any luck?

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?

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?

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

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.

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

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

I'm confused. Are you saying you want to make every product have bold?

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.

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

Yes, thats correct, in ONE column I need to be able to see Yes, No, True, or False.

Thanks,
Scott

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.

Great ideas, thanks for the help. I have a feeling the cheat is the easiest way around this issue.

Kind Regards,
Scott

Nevermind, I figured it out. Thanks for the great info. It has helped.

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.

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

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"?

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..

It looks like row is the row #, not all the data. I'm working on a solution for this now.

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);
}

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...

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!

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.

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.

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.

> 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!

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>

Looks fine to me. Do you have it online where we can see?

Sorry, it's an internal app limited by login and IP addresses.

@ 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);
   }