When the new grid features were announced in ColdFusion 8 people got very excited. I am not quite sure why but not to many people are talking about this feature these days. If you are new to grid editing support I encourage you to read an article by Ben Forta that outlines how to edit data in a grid. I am going to repeat some of that article but also show you a little more. Think of this as a refresher because the next tutorial I have will dive into some customization techniques.

Getting started with the tutorial we are going to stick with what got us here. I will be using the cfartgallery data source that ships with ColdFusion 8 so this should work out of the box. Here we have the code that creates our grid. There are only 2 attributes we need to add to our grid to make this work. First we set select mode to edit. This tells our grid to add editing capabilities. If we wanted to add deleting capabilities we could set the delete attribute to true but we will just be editing in this tutorial. The second difference is the the onChange attibute. We will look into this a little deeper in a second.

view plain print about
1<cfquery name="getArtists" datasource="cfartgallery">
2 SELECT artistId, firstname, lastname, address, city, state, postalcode, email
3 FROM Artists
4 </cfquery>
5
6 <cfset args = structNew()>
7 <cfset args.name = "ArtistGrid">
8 <cfset args.format = "html">
9 <cfset args.query = "getArtists">
10 <cfset args.stripeRows = true>
11 <cfset args.selectColor = "##D9E8FB">
12 <cfset args.selectmode = "edit">
13 <cfset args.onchange = "cfc:artists.editArtist({cfgridaction},{cfgridrow},{cfgridchanged})">
14
15 <cfform>
16 <cfgrid attributeCollection="#args#">
17 <cfgridcolumn name="artistid" display="false">
18 <cfgridcolumn name="firstname" header="First Name">
19 <cfgridcolumn name="lastname" header="Last Name">
20 <cfgridcolumn name="email" header="Email Address">
21 <cfgridcolumn name="address" header="Address">
22 <cfgridcolumn name="city" header="City">
23 <cfgridcolumn name="state" header="State">
24 <cfgridcolumn name="postalcode" header="Zip">
25 </cfgrid>
26 </cfform>
Here is a how our grid turns out. You will notice that when you double click in a cell a text editor appears and after you make a change a red marker appears in the grid noting that the data has changed.

Now that we understand how to enable editing we need to cover how we actually save the changed data. If you look at the grid image you will notice that the last name Donolan now has a z on the end. If we enable firebug and take a look at the post we will see the following information. As you can see our grid passes 3 parameters; gridAction, gridRow and gridChanged. The gridAction argument will pass U for update and D for delete. The gridRow is a name value pair of the row being changed. Finally the gridChanged argument tells us what column is being changed and what the new value is.
view plain print about
1{"gridaction":"U","gridrow":{"ARTISTID":1,"FIRSTNAME":"Aiden","LASTNAME":"Donolan","EMAIL":"aiden.donolan@donolan.com","ADDRESS":"352 Corporate Ave.","CITY":"Denver","STATE":"CO","POSTALCODE":"80206-4526","CFGRIDROWINDEX":1},"gridchanged":{"LASTNAME":"Donolanz"}}
If we look back at our code we should look at the onChange attribute. Here we are telling the grid that when the data changes we want to call our artists cfc and the method editArtist and into that method we are going to pass those 3 parameters.
view plain print about
1<cfset args.onchange = "cfc:artists.editArtist({cfgridaction},{cfgridrow},{cfgridchanged})">
Finally here is the code from Ben's tutorial. If we get passed U for update we set the name of the column being changed and the new value and use that to update our database.
view plain print about
1<cffunction name="editArtist" access="remote">
2 <cfargument name="gridaction" type="string" required="yes">
3 <cfargument name="gridrow" type="struct" required="yes">
4 <cfargument name="gridchanged" type="struct" required="yes">
5
6 <cfset var colname = "">
7 <cfset var value = "">
8
9 <cfswitch expression="#arguments.gridaction#">
10 <!--- update --->
11 <cfcase value="U">
12 <cfset colname = StructKeyList(arguments.gridchanged)>
13 <cfset value = arguments.gridchanged[colname]>
14
15 <cfquery datasource="#variables.dsn#">
16 UPDATE Artists
17 SET #colname# = '#value#'
18 WHERE artistid = <cfqueryparam value="#arguments.gridrow.artistid#" cfsqltype="cf_sql_integer">
19 </cfquery>
20 </cfcase>
21 <!--- delete --->
22 <cfcase value="D">
23 <cfquery datasource="#THIS.dsn#">
24 DELETE FROM Artists
25 where artistid = <cfqueryparam value="#arguments.gridrow.artistid#" cfsqltype="cf_sql_integer">
26 </cfquery>
27 </cfcase>
28 </cfswitch>
29
30 </cffunction>
As you can see editing inline on the grid is very easy to do. I see many question out there about customizing the editing features, stay tuned because I have something you are going to like.
 

This entry was posted on March 12, 2008 at 10:15 AM and has received 10599 views. Comments 20 | Print this entry.