
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.
Archived Comments
Ray,
ColdFusion.Grid.refresh
not
ColdFusion.Grid.Refresh
:o)
Rob
Oops. Fixed in the zip. Thanks!
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?
beat me to it....thanks
It's that simple?
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.)
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);
Odd - is your CFIDE folder correctly defined?
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
Try 90210. Yes, you do need your own license - unless I kept mine in the zip. If I did - I'm a bad Ray.
Trying to download the zip but getting a "page cannot be found" error
Fixed. Forgot to carry it over I guess.
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?
I'm a bit confused. Are you saying you want more control over what happens when you click?
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 :)
Did you try with bindings? You shuld be able to get any col from the selected row. (afaik)
@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...
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?
@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.
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.
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.
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.
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>>>>
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.
>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.
@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)
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.
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?
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.
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?
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.
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.
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).
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.
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!
Hi Ray,
Can you bind a grid to a URL? If so, do you have some samples that I can refer to?
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}">
@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...
Sorry, mangled the link:
http://deepuverma.wordpress...
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
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?!
Never mind..... finally dug into the object and found the grid.dataSource has the events I wanted to listen on.
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
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.
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!
Nevermind about my previous post. I found the solution here:
http://www.coldfusionjedi.c...
Posts 25 & 34.
THANK YOU!
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
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.
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>