After looking at Dan Vega’s series of posts on CFGRID usage, I decided to put together an example of CFGRID with a full CRUD functionality. ColdFusion 8 has introduced the new HTML format CFGRID which uses AJAX behind the scenes. I quite like the features it offers and I think with EXT framework behind the scenes, there are some nice things that can be done with it. Dan has already covered a lot of these areas and is doing a great job I think in writing these posts up.
My example is basically a “put together” kinda thing where I add custom buttons to the CFGRID toolbar for Add and Delete. The Editing can be done inline in the grid simply by double clicking the field you want to edit. I have used CFWINDOW for bringing up Add and Delete Screens. Its worth mentioning that, the delete functionality is inbuilt in the CFGRID tag and is one of the attributes but I could not find a way to bring up a confirmation window before the actual delete action was done, so I decided to add a custom button to the toolbar to first bring up a confirmation window and then fire off an AJAX call for the delete action. Its also worth mentioning that I have mostly taken the example from Dan’s post
and then modified it to add the add/delete functionality. I thought it was worth putting a full working example together.
Bear in mind that I am not good at design at all, so feel free to change the cfwindow styles I have used to something more pleasing for the eye. It would be really cool to have an automatic detection of the fields you want to be able to display in the ‘Add Window’ from the grid columns, as opposed to hardcoding the form (like I have done), but I would leave that exercise for later, mainly because of lack of time.
The example uses the built-in datasource cfartgallery so should work if you simple copy paste the code in a folder under your webroot.
Here are some screenshots of how it looks and you can download the full code from here including the cfm and cfc.
P.S. I had to set display=false for some of the columns in there for the screenshots to fit in there but feel free to change that.
#1 by Scott on November 20, 2008 - 1:03 am
Quote
I have a simple HTML cfgrid that was works fine on FF and suddenly stopped working on IE6. Here’s the deal, I had added the cumulative 8.01 hotfix patch AND the hf801-71634 patch. That’s when I started getting a blank grid and a “‘ColdFusion.Grid.Actions’ is null or not an object” message in the IE6 error console. I’m going to remove the 71634 patch to see if that makes a difference.
#2 by Scott on November 20, 2008 - 11:16 pm
Quote
Removal of the .jar file in that patch appears to have corrected the problem.
#3 by Jay on December 11, 2008 - 9:14 pm
Quote
Has anyone had success using a cfwindow to *edit* existing db records (as opposed to just adding a new record…)?
I have my code creating the window with my update form (without values for the inputs) fine. I then remotely call my cfc method to query the record details (by id), and then in the result handler for that remote call, I try to set the values of the form inputs. Unfortunately there’s where I run into a problem.
The result handler seems to run…I can alert() from it just fine, and even alert values from the result object of the remote cfc method call.
However the form input values won’t update – UNLESS I add an alert in the remote handler.
So to put this another way, I have (code shortened for brevity…):
updateWin = function() {
// code to instantiate new proxy, set callbackhandler, etc. and invoke the remote cfc method
}
updateWin_resultHandler = function(r) {
document.getElementById(‘uf_title’).value = r.DATA.TITLE[0];
}
…but the form inputs (i.e. title) values do not get set. However if I add an alert (any alert) to the result handler, then the form input values *do* get set, so if I change that result handler to the following, it will work:
updateWin_resultHandler = function(r) {
alert(‘foo’);
document.getElementById(‘uf_title’).value = r.DATA.TITLE[0];
}
Any ideas?
I’ve left a lot out to keep the post short – I have the correct ajaximport and ajaxproxy tags, window attributes, etc all set, and updateWin() is called from a button that passes a bound id from a grid row selection etc.
I just can’t figure out why the .value set won’t work unless I add an alert there…seems really straing.
Thanks in advance for any help/suggestions.
#4 by Jono on December 12, 2008 - 5:30 pm
Quote
Hi guys, I’m new in cf, I already have a cfgrid load (bind to a data base table ) in html from a table releated to another one, with foreign key, but I dont wanna show the id of the key, I want to show the value or description of the foreign key, how do i do this? how can I take a cfgridcolumn and show the value or make a bind of the value of other table?
#5 by Bud Hines on December 13, 2008 - 9:34 pm
Quote
Anuj,
When I copy this code inside an empty cfm – it works great. When I copy the code inside my template, the add and delete buttons disappear? Any thoughts on how to correct this problem. Also, as a note, the grid shows up empty until I commend out this call in my application cfc: On a separate note, I needed to comment out this call in my application cfc to get the data to show up:
Any thoughts on how to resolve these two issues?
thanks,
Bud
#6 by Anuj Gakhar on December 20, 2008 - 1:10 pm
Quote
@Jono, you would have to manage that in your query I guess if I am not mistaken.
@Bud, your comment missed out the code that you wanted to show. And add and delete buttons must be disappearing because of some css that could be overwritten, needs to be checked.
Pingback: ColdFusion Learning « Miguel’s Blog
#7 by Trent on February 12, 2009 - 1:04 am
Quote
Cool demo. Any chance of adding a “modify” button next to the add and delete buttons? Thanks.
#8 by Trent on February 12, 2009 - 1:05 am
Quote
Cool demo. Any chance of adding a “modify” button next to the add and delete buttons? Thanks
#9 by Anuj Gakhar on February 12, 2009 - 9:53 am
Quote
@Trent, you can modify a record by double clicking any row and you should be able to edit inline. However, it shouldnt be too hard to add a Modify button and populate the form with selected row as well.
#10 by E.Jones on February 25, 2009 - 9:26 pm
Quote
This is fantastic. I have one problem: the grid does not refresh after I add a record. (If I manually refresh the page from the browser, the grid reloads and the new record is indeed there.) I have spent a great deal of time troubleshooting this and would appreciate any help.
#11 by gaver on March 31, 2009 - 9:24 pm
Quote
Howdy Anuj!
Thanks for the great article on using the CFGrid element.
I have a quick question for you…
I would like to be able to pass a dynamic variable to the CFC to construct a where clause that would only return a set of values corresponding to the value that is passed to it.
For example.
If I wanted to pass a variable that limited the selection of the data returned to only those individuals with the last name of Johnson.
How would I go about constructing or modifying the existing CFC declaration and what other changes might be required to facilitate the modification?
I hope you can help me figure this out…
Gaver
#12 by Chris Bowyer on March 31, 2009 - 9:34 pm
Quote
As a thought, why not pass the variable in your database query…
WHERE lastName = ‘#lastName#’
#13 by gaver on March 31, 2009 - 10:04 pm
Quote
Dang…
I always do my best thinkin right after I click the submit button
I found the solution to my question – amazingly simple, I guess I was looking for a more difficult solution..
anyway… I stored the var in a SESSION variable and dropped it into a where clause in the CFC for the intial grid load query.
Works like a charm
G
#14 by gaver on March 31, 2009 - 10:10 pm
Quote
Thanks Chris, I probably should have hit the refresh button before I posted my last response…
I was stumped trying to pass a variable inside the cfc declaration – spent most of the day trying to figure out why the orderID value was getting double posted orderID:44,44 instead of a single value. orderID:44
I don’t know why – but I thought I “had” to move variables into the CFC in the delcaration of the function.
Which obviously (now I can say that) is not true.
Thanks again,
G
#15 by Gianluca on April 23, 2009 - 4:44 pm
Quote
Firt of all thi exapmle is fantastic !!
I’ve resolved problem with IE8 about dataproxy error moving line “” the line before ”
// create a new JS proxy object for the CFC” now works fine.
Thanks Anuj Gakhar
#16 by Anuj Gakhar on April 23, 2009 - 5:17 pm
Quote
@Gianluca, Glad you like it. thanks.
#17 by Adam on June 10, 2009 - 4:05 pm
Quote
I think I figured out the issue with dataproxy object not found, simply First: change the jsclassname to “DataProxy” and Second: change the variable from dataproxy to Aproxy. it seems the there is confusion between the class name and the variable name?
#18 by Phillip Senn on June 16, 2009 - 4:03 am
Quote
I’m not sure what’s supposed to happen when you add or delete a row. Is the grid suppose to refresh?
You forgot to include a body tag and to close your table tag.
I added this example as garden #034 to http://www.cfmzengarden.com.
If you would like to polish it, I’d be glad to send you the code that I’ve got.
#19 by Robert Gravel on August 5, 2009 - 9:22 pm
Quote
I’m having the same problem as per Phillip. The grid is not refreshing. Any idea?
#20 by James Lamar on May 18, 2010 - 5:26 pm
Quote
Great post, but I have been unable to reproduce. I am using CF9, bt here is my error: Error invoking CFC /data.cfc : error executing database query.
Any help would be much appreciated. Thanks!
#21 by Anuj Gakhar on May 19, 2010 - 9:05 am
Quote
@James, is your data.cfc in the same folder. Read the comments in this post, a few people had this issue.
#22 by James Lamar on May 19, 2010 - 2:20 pm
Quote
Actually, I did make some progress yesterday, but still no cigar. I ended up installing cf8 and cf9 side by side. Sure enough the code worked flawlessly in 8, but gave me the same error in 9. I added a cfajaximport reference to the old Ajax folder from cf8 and I at least got the data to show, but still will not update. Also, I cannot view the content inside the cfwindows. I stripped the styling out to no avail. I have also tried replacing the JavaScript with the updated versions in Extjs 3, but it just broke it as before. Thanks.
#23 by Chiru on May 19, 2010 - 5:26 pm
Quote
Hi,
I am using cf8 unix version and I am getting this error. I think the args.bind is not returning any data. The data.cfc location is /datalayer/data.cfc.
I am calling the ajaxproxy as .
Here is the error message I am getting. Please help. Thanks
The specified CFC data could not be found.
The path to the CFC must be specified as a full path, or as a relative path from the current template, without the use of mappings.
The error occurred in /vob/parts/grid.cfm: line 88
86 :
87 :
88 :
89 :
90 :
#24 by Chiru on May 19, 2010 - 5:27 pm
Quote
How to fix this error? Please help
The specified CFC data could not be found.
The path to the CFC must be specified as a full path, or as a relative path from the current template, without the use of mappings.
The error occurred in /vob/parts/grid.cfm: line 88
86 :
87 :
88 :
89 :
90 :
#25 by KJ on June 1, 2010 - 11:46 pm
Quote
I have a bindable cfgrid in cf8 that updates just fine (I see the red triangle in the cell). What I need to know is how to refresh the grid after the update so the original cfc that fills the grid runs again to show new updated information. I found these commands but not sure where to put them or how to call them. Should they be in the page or the cfc? ColdFusion.Grid.refresh(‘mygrid’, true) ColdFusion.Grid.getGridObject(‘MyGrid’).render();
#26 by prims on July 8, 2010 - 6:34 pm
Quote
Anuj, I read so many articles to get the simple example on how to make use of cfgrid functionality. Finally I am happy that I ended up this site. Great job and thanks for you and all those CF’ers commenting solutions on this page.
Is there a easy way to get related select using cfgrid and which is editable.
Finally I would like to know how to get refresh work on the example you are showing. Thanks in advance.