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.
Comments
Oops. Fixed in the zip. Thanks!
# Posted By Raymond Camden
| 5/31/07 10:54 AM
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?
It's that simple?
# Posted By Lola LB
| 5/31/07 8:21 PM
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.)
# Posted By Raymond Camden
| 5/31/07 8:25 PM
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);
# Posted By sophek
| 5/31/07 11:15 PM
Odd - is your CFIDE folder correctly defined?
# Posted By Raymond Camden
| 6/1/07 8:35 AM
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...
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
# Posted By AJ
| 6/5/07 7:28 PM
Try 90210. Yes, you do need your own license - unless I kept mine in the zip. If I did - I'm a bad Ray.
# Posted By Raymond Camden
| 6/5/07 8:14 PM
Trying to download the zip but getting a "page cannot be found" error
# Posted By Joe Danziger
| 6/8/07 11:40 AM
Fixed. Forgot to carry it over I guess.
# Posted By Raymond Camden
| 6/8/07 11:58 AM
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?
# Posted By Will
| 8/1/07 11:32 AM
I'm a bit confused. Are you saying you want more control over what happens when you click?
# Posted By Raymond Camden
| 8/1/07 1:23 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 :)
# Posted By Will
| 8/1/07 2:17 PM
Did you try with bindings? You shuld be able to get any col from the selected row. (afaik)
# Posted By Raymond Camden
| 8/1/07 5:19 PM
@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.com/ColdFusion/blog/index...
# Posted By Scott Bennett
| 11/2/07 6:35 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?
# Posted By Paul Stewart
| 1/11/08 9:16 AM
@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.com/index.cfm/2007/8/20/...
I have an example of a custom date renderer here:
http://www.coldfusionguy.com/ColdFusion/blog/index...
Theoretically, you could make a javascript function to format the data in any way you like.
# Posted By Scott Bennett
| 1/11/08 9:52 AM
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.
# Posted By James
| 3/10/08 10:19 AM
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.
# Posted By Trond Ulseth
| 4/14/08 2:10 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.
# Posted By Paul
| 6/16/08 12:54 PM
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>>>>
# Posted By goldcoastnerd
| 7/2/08 12:28 AM
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.
# Posted By Raymond Camden
| 7/2/08 6:15 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 disappearsI 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.
# Posted By Paul
| 7/16/08 3:31 PM
@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)
# Posted By Raymond Camden
| 7/16/08 3:54 PM
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.
# Posted By Paul
| 7/21/08 4:36 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?
# Posted By Paul
| 7/25/08 10:03 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.
# Posted By Raymond Camden
| 7/28/08 7:59 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?
# Posted By Paul
| 7/29/08 9:23 AM
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.
# Posted By Raymond Camden
| 7/29/08 9:29 AM
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.
# Posted By Paul
| 7/29/08 9:52 AM
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).
# Posted By Raymond Camden
| 7/29/08 9:54 AM
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.
# Posted By Paul
| 7/29/08 10:49 AM
I'm taking your Ajax presentation from CFUnited and mixing it with http://www.brucephillips.name/cf8test/employees.cf... 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!
# Posted By Kate
| 7/30/08 2:55 PM
Hi Ray,Can you bind a grid to a URL? If so, do you have some samples that I can refer to?
# Posted By Melvin
| 12/5/08 8:46 AM
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}">
# Posted By Raymond Camden
| 12/5/08 9:07 AM
@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.com/2007/08/23/cfgrid-...;
# Posted By Dylan
| 12/17/08 9:56 AM
# Posted By Dylan
| 12/17/08 10:03 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
# Posted By Chris Ulrich
| 1/29/09 2:29 PM
ColdFusion.Grid.refresh
not
ColdFusion.Grid.Refresh
:o)
Rob