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
case in the jsclassname argument in the
cfajaxproxy statement .. with jsclassname=”DataProxy” it started working 🙂 whoo hoo.. thanks
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