ColdFusion 8: Demo of CFGRID, Ajax binding, and CFWINDOW

So I plan to spend time later on talking more about the Ajax work in ColdFusion 8, but I thought I'd share a demo I whipped up for Ben a few weeks back. This demo integrates with Yahoo's Traffic service using my CFYahoo library. Simply enter a zip, hit Go, and the grid will populate with traffic data. When you select a row, I then use a map to show you information about the traffic hot spot.

All of the "magic" can be seen in one line:

<cfinput type="text" name="zip" />

<cfgrid name="reportsGrid" format="html" pageSize="5" stripeRows="true" bind="cfc:yahooProxy.getTraffic({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection},{zip})">

The bind attribute tells ColdFusion to speak to my CFC and use the results for the data.

The code is available below. To run this, be sure to download the CFYahoo package first. And yes - I was trying to be artsy with my design here. Normally I'm not allowed to design anything. ;)

And yes - I hope to have everything up and running on CF8 here soon.

Download attached file.

Archived Comments

Comment 1 by Roberto posted on 5/31/2007 at 7:48 PM

Ray,

ColdFusion.Grid.refresh
not
ColdFusion.Grid.Refresh

:o)

Rob

Comment 2 by Raymond Camden posted on 5/31/2007 at 7:54 PM

Oops. Fixed in the zip. Thanks!

Comment 3 by Jason posted on 5/31/2007 at 8:03 PM

Ray-

Nice stuff. But......tried it out, and I'm getting

ColdFusion.Grid.Refresh is not a function in the onclick of the button. What am I missing?

Comment 4 by Jason posted on 5/31/2007 at 8:03 PM

beat me to it....thanks

Comment 5 by Lola LB posted on 6/1/2007 at 5:21 AM

It's that simple?

Comment 6 by Raymond Camden posted on 6/1/2007 at 5:25 AM

Lola - yes. I had to do a bit of magic to get the query ok for the grid. It took... one more function. I'll blog it tomorrow. (And to be fair, I had to make my cfc notice the paging. Wow, that was hard too. Really. Ahem.)

Comment 7 by sophek posted on 6/1/2007 at 8:15 AM

Am I doing something wrong? I'm getting this errors in firebug.

ColdFusion is not defined
[Break on this error] ColdFusion.Ajax.importTag('CFWINDOW');
h127424.cf8beta.c... (line 43)
ColdFusion is not defined
[Break on this error] ColdFusion.Ajax.importTag('CFFORM');
h127424.cf8beta.c... (line 47)
ColdFusion is not defined
[Break on this error] ColdFusion.Ajax.importTag('CFGRID');
h127424.cf8beta.c... (line 65)
ColdFusion is not defined
[Break on this error] ColdFusion.objectCache['reportsGrid'] = new ColdFusion.Grid.Actions('CFGRID11...
h127424.cf8beta.c... (line 69)
ColdFusion is not defined
[Break on this error] };ColdFusion.Event.registerOnLoad(_cf_bind_init_1180671087207);
h127424.cf8beta.c... (line 87)
ColdFusion is not defined
[Break on this error] };ColdFusion.Event.registerOnLoad(_cf_window_init_1180671087208);

Comment 8 by Raymond Camden posted on 6/1/2007 at 5:35 PM

Odd - is your CFIDE folder correctly defined?

Comment 9 by David posted on 6/1/2007 at 9:07 PM

I found that in dealing with HostMySite.com, you have to contact their support people for them to add the /CFIDE mapping for you. They don't do it automatically. So make sure you ask them to map it. At least thats what happened to me...

Comment 10 by AJ posted on 6/6/2007 at 4:28 AM

What is a good zip code to use?
I have tried 90502 - but it is not returning any records :-)

I don't seem to be getting any errors.

Do I need my own key/licence?

Thx
Andrew

Comment 11 by Raymond Camden posted on 6/6/2007 at 5:14 AM

Try 90210. Yes, you do need your own license - unless I kept mine in the zip. If I did - I'm a bad Ray.

Comment 12 by Joe Danziger posted on 6/8/2007 at 8:40 PM

Trying to download the zip but getting a "page cannot be found" error

Comment 13 by Raymond Camden posted on 6/8/2007 at 8:58 PM

Fixed. Forgot to carry it over I guess.

Comment 14 by Will posted on 8/1/2007 at 8:32 PM

Hey Ray, I'm playing with the new ajax grid in CF8 and everything works great.. pulling the correct data, sorting, paging, etc.. all beautiful.. but for the life of me I can't figure out how to make columns clickable with appending values from the row.

More specifically, I have a user grid that I want to do 2 things on... the email column is clickable just as a mailto: with the email address in it and the Person's name column clicks through to the edit page and passes "person_id=" and append the value from the hidden person_id column... the best I could do was getting it to do gridkey= but I'd like to not have to change my edit code and I'd also like to be able to make different columns pass different or even multiple url variables. Am I out of luck or is there a way to actually do this?

Comment 15 by Raymond Camden posted on 8/1/2007 at 10:23 PM

I'm a bit confused. Are you saying you want more control over what happens when you click?

Comment 16 by Will posted on 8/1/2007 at 11:17 PM

yeah, sorry :) I basically want to be able to append as many url variables as I want and name them whatever I want, but I've only been able to either send 1 url variable named "gridkey", or a comma delimited list of all the values as "gridkey".

Our existing plain vanilla grid does something like this (stripped down to basics):

<cfoutput query="theQuery">
<tr><td><a href="index.cfm?myid=#theQuery.myid#&otherid=#theQuery.otherid#">#theQuery.name#</a></td></tr>
</cfoutput>

And I'd like to do something similar with the grid. I'd also like to be able to do a mailto link.

I tried doing something like href="index.cfm?myid={personGrid.myid}" and href="mailto:{personGrid.email}" but that didn't work :)

Comment 17 by Raymond Camden posted on 8/2/2007 at 2:19 AM

Did you try with bindings? You shuld be able to get any col from the selected row. (afaik)

Comment 18 by Scott Bennett posted on 11/3/2007 at 3:35 AM

@Will,
you can probably do something like(untested): <cfajaxproxy bind="javascript:window.location.href='index.cfm?otherid='+{FormName:GridName.otherid};">

Also, with the Ext object you can write a javascript functions to do all kinds of cool stuff. here is an example of how to edit the data in a cell, save it to your db via a cfc call, and refresh the row in the grid without having to reload all the data in the grid with ColdFusion.Grid.refresh and loose your selected row.

http://www.coldfusionguy.co...

Comment 19 by Paul Stewart posted on 1/11/2008 at 8:16 PM

from what i can gather in a HTML format cfgrid the mask and type attributes of cfgridcolumn cannot be used. Meaning i can not format a column in a currency. Is this correct?

Comment 20 by Scott Bennett posted on 1/11/2008 at 8:52 PM

@Paul,

To ensure your data is formatted correctly in an HTML CFGrid, you can apply a custom renderer to the column via javascript. Ray gives an example of a currency renderer here.

http://www.coldfusionjedi.c...

I have an example of a custom date renderer here:

http://www.coldfusionguy.co...

Theoretically, you could make a javascript function to format the data in any way you like.

Comment 21 by James posted on 3/10/2008 at 7:19 PM

I'm having problems with Internet Explorer. I know we all are!!!
I am using cfwindow and cfgrid, all works beautifully in firefox, but in IE I get an

"Error: Unexpected call to method or property access"
the line that is references is
this.form.appendChild(this.editField);

After much frustration it seems that it is when the cfgrid is html, and I need it to be html because I an using the bind attribute for some nice ajax.

Also found that if it isn't in cfwindow then it works fine. So something with cfwindow and cfgrid being html together.

Any pointers would be much appreciated.

Comment 22 by Trond Ulseth posted on 4/14/2008 at 11:10 PM

Similar problems as James. I'm developing a application on my mac (using a lot of cfwindow, cfgrid etc), and have been using Safari (for the beauty of it) and Firefox (for the Firebug) during the development process. But now that I tested it in IE I get errors (pretty vague errors like "Expecting string value on line 145" - I don't have windows open right now so I don't remember exactly the wording).

Before getting into analyzing and trying to fix this for IE I wondered if James or anyone else have solved similar situations by now.

Comment 23 by Paul posted on 6/16/2008 at 9:54 PM

I am having a problem with cfgrid in IE also. After you edit the data in an editable cfgrid the data in the cell disappears. Works fine in FireFox, and in IE in the EXT samples I have found. So this seems to be a cfgrid specific problem. Any insight or suggestions would be appreciated.

Comment 24 by goldcoastnerd posted on 7/2/2008 at 9:28 AM

been trying to get this working for 4 hours nw, i just keep getting weird errors. plz help raymond>>

fist i got heaps of error invoking CFC, internal server error.
checked the cfide folder in IIS and nothing wrong with that , nw i get this new weird error ,
Error invoking CFC /admin/CFC/filter.cfc : Element VALIDATIONHEADER is undefined in ERROR. (no idea what that means)

heres my cfgrid:

<cfgrid format="html" name="employeeGrid" pagesize=50
stripeRows=true stripeRowColor="gray"
bind="cfc:admin.cfc.filter.getfilterIP({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection})"
delete="yes" selectmode="edit"
onchange="cfc:admin.cfc.filter.editfilterIP({cfgridaction},{cfgridrow},{cfgridchanged})">

<cfgridcolumn name="filterID" display=true header="filter ID"/>
<cfgridcolumn name="ipAddress" display=true header="IP Address"/>
<cfgridcolumn name="ipFraudRating" display=true header="Fraud Rating"/>

</cfgrid>
the path to the CFC in correct, i'm at my wits end, plz help mate>>>>

Comment 25 by Raymond Camden posted on 7/2/2008 at 3:15 PM

It means: Somewhere your code uses an Erorr variable, and uses it like so:

error.validationheader

and validationheader is not part of error. You need to check your error logs. This will tell you exactly that file and line this error is being thrown in. It sounds like your error validation code is actually throwing an error itself.

Comment 26 by Paul posted on 7/17/2008 at 12:31 AM

>I am having a problem with cfgrid in IE also. After you edit the data in an editable cfgrid the data in the cell disappears

I can confirm this happens in IE with every editable grid I create. Why is this bug not being addressed by Adobe? I tried to post this to the live docs and of course they gonged my post. Any insight or workarounds would be appreciated.

Comment 27 by Raymond Camden posted on 7/17/2008 at 12:54 AM

@Paul: First, you have to report it. Be sure to report the bug to www.adobe.com/go/wish.

Secondly - be sure you are running the very latest version (8.0.1 with Cumulative Hot Fix)

Comment 28 by Paul posted on 7/22/2008 at 1:36 AM

Thanks Ray. I have reported it to Adobe as a bug. I am running the latest version (8.01). This bug is very easy to reproduce, it affect any editable grid in IE 6.

Comment 29 by Paul posted on 7/25/2008 at 7:03 PM

Ray: Still no response to this bug from Adobe. This makes the editable html cfgrid basically unusable, since most users in the real world are still using IE 6. Any ideas, suggestions, workarounds?

Comment 30 by Raymond Camden posted on 7/29/2008 at 4:59 AM

You most likely _wont_ get a response I think. It is kind of a black hole, but I can promise someone does read it. That doesn't mean they will fix it - but the emails are read.

Comment 31 by Paul posted on 7/29/2008 at 6:23 PM

Ray: Thank you for your response! I am a little bewildered, however. How can Adobe not respond to this? What is the point of creating an editable cfgrid that can't_be_used in production because the data disappears when you edit it?

Comment 32 by Raymond Camden posted on 7/29/2008 at 6:29 PM

Err well, I can't speak for Adobe. It's all about time and resources ya know. Speaking personally, it's hard to even test w/ IE6 now since IE7 takes it over.

Comment 33 by Paul posted on 7/29/2008 at 6:52 PM

Ray: Well I hate to say this but professional web developers have to test in IE6 since that is what most users are running. Oh, and it does not work correctly in IE7 either.
Edit the data, it disappears, I just tested it.

Comment 34 by Raymond Camden posted on 7/29/2008 at 6:54 PM

RIght, but Paul, I'm just saying, at this point, I can't do much more. It's really in Adobe's court. I can say this though - if you can send me a test CFM to run with IE7, I'll give it a try myself (I'm sure the code is above, I'm just a bit behind, so if you can directly email me one file I can run and play with, I'll see if maybe I can suggest an alternative).

Comment 35 by Paul posted on 7/29/2008 at 7:49 PM

Ray: Thanks, I did not mean to imply that it is your problem. I am emailing you a simple example so you can see for your self. I really appreciate the fact that you have gone to the trouble to answer my posts.

Comment 36 by Kate posted on 7/30/2008 at 11:55 PM

I'm taking your Ajax presentation from CFUnited and mixing it with http://www.brucephillips.na... and it turned out pretty well, but when I move the .cfm and the .cfc to a different folder (but keeping them in the same folder, just a different folder from where they started) I get a strange error. In IE it says 'Exception thrown and not caught' and in Firefox there're no JS errors. I looked in the CF logs and it says that cfgridsortcolumn is undefined, but I don't see where you define it in any of your example files. If I add ?cfdebug to the URL, it shows all the right information is being returned by the CFC. It works fine if I move it to another folder branch! Any thoughts? Thanks!

Comment 37 by Melvin posted on 12/5/2008 at 7:46 PM

Hi Ray,

Can you bind a grid to a URL? If so, do you have some samples that I can refer to?

Comment 38 by Raymond Camden posted on 12/5/2008 at 8:07 PM

Yes, binding in CF typically allows 3 formats: to a js function, to a url, and to a cfc. url is just:

bind="url:foo.cfm"

You need to add the arguments for cfgrid at the end though.

bind="url:foo.cfm?page={cfgridpage}&pagesize={cfgridpagesize}&sort={cfgridsortcolumn}&sortdir={cfgridsortdirection}">

Comment 39 by Dylan posted on 12/17/2008 at 8:56 PM

@Paul: I ran into the same issues as you on IE, but with a small tweak of the CF js suggested by Deepak Verma, I got it work properly for me (changing the selection mode to Ext.grid.CellSelectionModel):

<a href="http://deepuverma.wordpress...">http://deepuverma.wordpress...

Comment 40 by Dylan posted on 12/17/2008 at 9:03 PM

Sorry, mangled the link:

http://deepuverma.wordpress...

Comment 41 by Chris Ulrich posted on 1/30/2009 at 1:29 AM

I've used Deepak's modification. It is great with the view-only grids, but it causes havoc if you try to bind to the rows. I my case, I have a CFDIV bound to the grid and as they change rows, the DIV calls a cfc that looks up customer info (customerID is in the grid) and returns info.

When it is in the CellSelectionModel, it doesn't return the ID (since it now longer selects the row).

Has anyone been able to do CellSelectionModel and still keep BINDs to the grid working?

Thanks!

Chris

Comment 42 by Stacey Abshire posted on 9/30/2009 at 11:15 PM

Is there a way that we can detect if the grid is in the process of refreshing? I have a page that I want to auto-update every N seconds, but only if it is not currently performing a refresh. Thanks?!

Comment 43 by Stacey Abshire posted on 10/1/2009 at 3:50 PM

Never mind..... finally dug into the object and found the grid.dataSource has the events I wanted to listen on.

Comment 44 by DougS posted on 11/25/2009 at 8:52 PM

I just started playing with cfgrid and ran into two things I don't understand.

First, how do you bind to a cfc that is in a mapped directory? Or is it even possible?

Second, I want to send in a variable orgID that is set at the top of the page ( possibly from a url variable ) to the cfc for the query. If I put the variable in as {orgID} I get a bind error. If I use #orgID# the bind is happy. I feel like I'm missing something here. Does a {variable} have to be set using cfinput within the cfform? Hope that makes sense.

Doug

Comment 45 by Raymond Camden posted on 11/25/2009 at 8:55 PM

You can't bind to a CFC in a CF mapping. Remember bindings use Ajax which are HTTP requests, and CF mappings mean squat for HTTP. Only CF code recognizes them. You can though simply put a CFC under your web root that acts as a proxy to your mapped CFC.

Second: Nope, if you want to hard code a value to use int he bind, the orgID is fine. And yes, {...} is meant for client side variables only.

Comment 46 by Sandra posted on 12/19/2009 at 4:11 AM

Hi Ray,

I'm using bind="cfc:files.getFiles......" to get the data from a query. I'm also using <cfajaxproxy bind="javascript:details({files.id@click})" />, which calls a JS function to open the cfwindow. The problem is, say the user clicks on a row, the cfwindow opens, then the user closes this window by accident and they want to open this window again by clicking on the same row. It won't work unless you click on another row and go back to the previous row. Any ideas how to fix this? I've also used @change and that doesn't work. I was trying to follow this example: http://www.brianflove.com/p... which has the same issue as well. Thank you!

Comment 47 by Sandra posted on 12/19/2009 at 5:47 AM

Nevermind about my previous post. I found the solution here:

http://www.coldfusionjedi.c...

Posts 25 & 34.

THANK YOU!

Comment 48 by Chuck posted on 4/15/2010 at 1:35 AM

I'm new to coldfusion and have been learning about the cfgrid. One thing I can't seem to figure out is how to hide the cfgrid if there are no records to display. I read that the cfgrid will return 10 empty rows if there are no records to return. I believe I read that at coldfusionjedi.com. I use a cfc to bind my grid to. How would I hide the cfgrid and display a "no records found" message to the user in a div tag? I've tried several ways to get it to work but nothing works. I get an empty grid with 10 rows. Thanks in advance for your help. Oh yeah, we use CF8

Comment 49 by Raymond Camden posted on 4/17/2010 at 12:34 AM

I've got this post on noticing an empty grid:

http://www.coldfusionjedi.c...

You could wrap your grid in a div and hide it.

Comment 50 by KJ posted on 6/1/2010 at 6:36 PM

I have a cfgrid that has a editable column and it updates to the database just fine but the grid doesn't refresh with the new values. I need the grid to render again or refresh and not sure how.

<cfgrid format="html" name="Pricestandardreview" pagesize="10" bindonload="true" sort="true"
bind = "cfc:test.getSTDReview({cfgridPage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection})" selectmode="edit"
onchange= "cfc:test.editSTDReview({cfGridAction},{cfgridrow},{cfgridchanged})" >
<cfgridcolumn name="full_account" display=true header="Customer Number"/>
<cfgridcolumn name="DBID" header="DBID" select="no" display=no />
<cfgridcolumn name="SCENARIO_SEQ" header="SCENARIO_SEQ" select="no" display=no />
<cfgridcolumn name="ACCOUNT_NUM" header="ACCOUNT_NUM" select="no" display=no />
<cfgridcolumn name="SCENARIO_DET_SEQ" header="SCENARIO_DET_SEQ" select="no" display=no />
<cfgridcolumn name="account_name" display=true header="Customer Name" select="no"/>
<cfgridcolumn name="tank_num" display=true header="Tank Number" select="no"/>
<cfgridcolumn name="product" display=true header="Product Code" select="no"/>
<cfgridcolumn name="department_code" display=true header="Department code" select="no"/>
<cfgridcolumn name="tank_acquired" display=true header="Tank Acquisition Date" mask="mm/dd/yyyy" select="no"/>
<cfgridcolumn name="zone" display=true header="Zone" select="no"/>
<cfgridcolumn name="tank_size" display=true header="Tank Size" select="no"/>
<cfgridcolumn name="tank_rental_amount" display=true header="Tank Rental Amount" select="no"/>
<cfgridcolumn name="tank_rental_period" display=true header="Total Rental Period" select="no"/>
<cfgridcolumn name="tank_rental_status" display=true header="Tank Rental Status" select="no"/>
<cfgridcolumn name="curr_price_sub_level" display=true header="Price Sublevel" select="no"/>
<cfgridcolumn name="minimum_bill_table" display=true header="Minimum Bill Code" select="no"/>
<cfgridcolumn name="curr_base_price_code" display=true header="Base Price Code" select="no"/>
<cfgridcolumn name="curr_deviation" display=true header="Deviation" select="no"/>
<cfgridcolumn name="gross_amount" display=true header="Gross Amount" select="no"/>
<cfgridcolumn name="r12_gallons" display=true header="Gallons" select="no"/>
<cfgridcolumn name="new_base_price_code" display=true header="New Bpc" select="yes" />
<cfgridcolumn name="new_deviation" display=true header="New Deviation" select="yes" />
<cfgridcolumn name="new_price_per_gallon" display=true header="New Price" select="no" />
<cfgridcolumn name="PRICE_VARIANCE" display=true header="Price Variance" select="no" />
<cfgridcolumn name="TOTAL_VARIANCE" display=true header="Total Variance" select="no" />
</cfgrid>