CRUD with cfgrid html format
Tagged Under : ColdFusion
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.
Looks great.
[...] and then shows a slightly more advanced custom grid editor. Inspired by Dan’s efforts, Anuj Gakhar shows off a complete CFGrid editing solution which is very tidy indeed. ColdExt, the ExtJS library for ColdFusion (including CF7 as well as CF8) [...]
Hi i am trying the code with ColdfusionMX7 but some attributes are deprecated can you help me out
@Ravi, this code work only on CF8. Cfgrid html format was introduced only in CF8.
Hey Guys,
i’m just over this code, but can’t get it work with my database.
I’m using CF 8, so there should’nt be a Problem.
The Problem i guess is the bindonload function.
where does the function what cfgridpage or cfgridpagesize is?
@Rene, what do you see when you run the code? an empty grid? if yes, may be the problem is in your /CFIDE/ mapping…
wow, thanks for your quick response…
of course, my mapping is different. but anyway. i changed the path, but i still get an empty cfgrid.
when i comment this out:
i get an empty grid, otherwise i get
If the bind attribute is specified for an editable HTML grid, the onChange attribute must also be specified.
damn, am i to stupid for that cake
i love it…
just got it, superb function indeed…
i forgot the onchange argument *rofl*
thx guys
glad you liked it. potentially, theres a lot more that can be done with the underlying Ext framework..
If you’re getting an empty grid try adding an application.cfm file with the . Worked for me.
sorry.. lost some of my comment there. Put the in an application.cfm file.
Oh well..I guess I can’t put CF code in this reply. Soooo…. put the dsn variable in the application file.
@Don, comments with code are turned off, but you can enter some normal code without the tags. There is a this.dsn in the cfc so you wouldnt have to set that up in the application.cfm ?
Hello;
This is a wonderful complete example and has been a terrific help to my noviceness.
I am however having a problem with, apparently, browser specifics.
I works well from my mac (safari and firefox) and works with firefox at my work location however im getting a JS error “‘dataproxy’ is null or not an object” when running from our company MSIE (6). The testing server is not on my development machine. Any suggestions?
I’ve tried linking down to the DataProxy.js file but no help.. scratching my head.. any suggestion would be appreciated.
Chris
@Chris, there is no dataproxy.js to be linked to. dataproxy is the name of the javascript variable that calls the CFC via ajaxproxy. Have you checked your /CFIDE/ mapping.
Aww just found my problem… was the
whoo hoo.. thanks
case in the jsclassname argument in the
cfajaxproxy statement .. with jsclassname=”DataProxy” it started working
ps.. did correct the grid refresh stmt
in the sample code to
ColdFusion.Grid.refresh(‘ArtistGrid’,true);
neet.. thanks
This is the kind of stuff we need from CF gurus. Complete examples that can help people like me make more use of CF. Thank you very very much.
This is exactly what I have been trying to find for 2 days. Awesome.
Thank you so much.
I get an error invoking cfc..
can help?
i’ve oso put some of the codes into my cfm..it works fine, but it seems like the ajaxOnLoad is not fired. Cant see custom buttons.
@R, looks like your /CFIDE/ mapping is not getting picked up . You might want to check that.
I get an error of not finding the function grid.refresh() in the Javascript. I changed it to the ColdFusion.Grid.refresh function and it worked. I modified your example to work on what I am working on so is there a grid.refres function somewhere?
@Anuj, i’ve solved the error. It seems like i dont hv the default database. I’ve dwnloaded the db and it’s solved.
But, i still cant get the two custom buttons out when i put the codes into my coding.
The mapping should be alright since your example works fine. any specific place that i should put the ajaxOnLoad line?
@Andy, if you see in the init() function, the variable grid is getting initialised here.
grid = ColdFusion.Grid.getGridObject(“ArtistGrid”);
So as long as you have that, grid.refresh() shuld work.
@R, <cfset ajaxOnLoad(“init”)> line of code ideally should be placed after the init() function and after the grid. The idea is to run the init() function onload.
I am getting the same error as Chris with IE. It works fine with Netscape but IE I get the dataproxy is a null or not an object when trying to submit from the CFWINDOW. Weird…
Thanks for all your help.
@Andy, did you try the fix that worked for Chris ?
Upon further investigation, it seems like AJAX is a bit wonky with IE6. I tried what Chris recommended but it didn’t work (I think he referred directly to the EXT’s DataProxy.js). I made two CFAJAXProxy references and also moved the var Aproxy = new dataproxy(); (changed from var Dataproxy = new dataproxy()) to be within the addArtist function. It works now.
Just a thought… since i was getting different results with different server setups… i was thinking the reference issues may be related to the installation classpath’s or perhaps environment variable settings… just a thought
This is great, but what I can’t figure out is how use this functionality with a form that has a cfselect dropdown populated from a look up list. Cannot figure out how to get it to select the current record’s dropdown value (id) when the row is clicked. Seems to be a feature that is lacking with cf8 ajax stuff that is a pretty essential task for any web application. any help would be a great help in solving this issue.
@Tim, is it not a case of binding the grid column to the dropdown ?
Yes I want to bind a grid column to the drop down. The drop down is a list that is pulled from a look up table with a value=’id’ which is the primary key of the lookup table and a foreign key in the table populating the grid. I want to take that foreign key value(the column value) and make that select the correct option from the dropdown list on edit. That way the user can update the record or make a new selection if they desire. Hopefully that is more clear. Any help would be much appreciated. Thanks in advance.
The other thing is that it is not in grid edit mode. i want to click the row and bind it to form elements. Binds to cfinputs work great using bind=”{gridName.columnName}” but cannot get that work as i want to choose the option in the cfselect based on the id in the column value in the grid record that is selected. thank again.
Unless, I haven’t misunderstood , will this not do it ?
<cfselect name=”myselect” bind=”javascript:someMethod({mygrid.id})” bindonload=”yes” … />
and then you can write a someMethod in javascript to set the selected value in cfselect..
Bind from a grid to a cfselect that is populated from a bind or query. Since the cfselect is populated with many options from a lookup list i want those options there always so the form can be used for inserts or updates. I pass the ID to a hidden field which is bound to a javascript function that accepts two arguments (element’s id and the value to be selected). This way it calls my javascript function yet lets the drop down stay populated by a bind or query but react to the grid row selection and choose the appropriate selection from the drop down. Might not be the most graceful solution but it is working great. Hopefully this helps someone out as I know i’ve tried everything i could think of to get this to work. If someone has a better solution that would be more than welcomed.
var hasRun = false;
function selectDropDown(x,val) {
if(!hasRun) {
var dd = document.getElementById(x);
for(var i = 0; i < dd.length; i++){
if(dd.options[i].value == val){
dd.selectedIndex = i;
}
}
}
hasRun = true;
}
*Category:
— Select a Category –
looks like it stripped some things from my post. i posted this solution here.
http://groups.google.com/group/macromedia.coldfusion.advanced_techniques/browse_thread/thread/4580647dba1e50d7/33f8d421c332ec20?lnk=raot
looks like it stripped my post. Click my name to view this solution posted on a google groups thread.
Question…
Is there a way to clear the CFWINDOW’s form fields after submission?
Chris, That should be an easy one, did you try doing that in Javascript after submit ?
Anuj,
I haven’t tried anything yet. I was just looking through your sample code and noticed when you clicked the “Add Artist” link, the last artist added was still displayed.
@Chris, that should be an easy JS thing to do. However, I plan to update my sample code to make it more generic , if I get the time to do it. Should be soon though.
Bravo!!! Sweet tutorial, thank you.
i replaced grid.refresh(); with ColdFusion.Grid.refresh(’ArtistGrid’,true); in both the addartist() and deleteArtist(s) functions. but i’m still not getting my grid to refresh instantly upon the add/delete button. any suggestions would be appreciated.
This is great!
A question…When I delete an artist it still shows up in the table until I do a browser refresh. Is that the expected outcome? Is there a way to have the deleted person vanish without requiring the user to do a browser refresh?
Thanks.
Great stuff! Any chance of a popup cfwindow invoked by clicking on a record row to show master detail set? There are a lot of people looking for this and no answers.
Chris, James, I will try and come up with a revised version of the code later today.
Anuj, updated code would be good. I have used your example but would be interested in what gets updated. THANK YOU
[...] response to reader’s comments from my previous post, I have updated the code for this little [...]
Hi all, The updated code is out there in the new blog post. Any further updates would be posted in that post as this one is getting a bit long. Cheers.
Anuj,
Thank you so much for this example. I have been working with grids all weekend but was not successful in getting any of my attempts to update my database with grid edit. I copied Dan’s code, Ben’s code and examples from many others. I could create great looking grids but none would actually update my database. Thank you for sharing.
@Bud, thanks. I am glad I was able to help. Cheers.
I think I have the correct CFIDE path. Also I am using the access database: artgallery.mdb. But I am still getting a blank grid. I have tried both firefox 3 and IE7…
Any help would be greatly appreciated.
John
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.
Removal of the .jar file in that patch appears to have corrected the problem.
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.
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?
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
@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.
[...] else. For instance, some time ago, I was searching for CFGRID samples when I came across “CRUD with cfgrid html format“. I thought, I would share it it with you. I am curius to see what you guys stumble [...]
Cool demo. Any chance of adding a “modify” button next to the add and delete buttons? Thanks.
Cool demo. Any chance of adding a “modify” button next to the add and delete buttons? Thanks
@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.
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.
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
As a thought, why not pass the variable in your database query…
WHERE lastName = ‘#lastName#’
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
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
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
@Gianluca, Glad you like it. thanks.
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?
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.
I’m having the same problem as per Phillip. The grid is not refreshing. Any idea?