A couple weeks ago I wrote an tutorial on how to create a custom Grid Editor. The tutorial explained how you could tap into the power of Ext to create a select menu editor. In the example we used state as the edit field. This is a perfect example of where you would want to pick from a list rather than key in your answer. It has come to my attention that this functionality is baked right in to ColdFusion 8. This raises 1 important question for me, is nobody is reading my articles or did nobody know this was baked in?

So to get started with this tutorial you need a little knwoledge of how editing works with the html grid. Lucky for you I wrote a quick start on basic editing using the grid. The following code should look pretty similair if you have been following along. Here we are just running a query and setting up some basic properties for our grid. If you double click in any of the cells you should be able to edit the data.

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 </cfgrid>
25 </cfform>
The real power comes from the cfgridcolumn tag that has a couple of attributes that I did not know existed.
  • select - Determines selection behavior if the cfgrid selectmode attribute value is column, edit, or single; ignored for row or browse values.
  • values - Formats cells in column as drop-down list boxes; specify items in drop-down list, for example: values = "arthur, scott, charles, 1-20, mabel"
  • valuesDisplay - Maps elements in the values attribute to string to display in the drop-down list. Delimited strings and/or numeric ranges.
So with this knowledge you can set some values for a user to select from when editing a column. The great thing about this is we can grab our values from anywhere such as a list, query or even a web service. In my example I am just setting the state abbreviations and display values using lists. This makes it really easy to for you to create select menu editors. Here is a quick image of my example.

 

This entry was posted on March 28, 2008 at 3:48 PM and has received 8724 views. Comments 24 | Print this entry.