ColdFusion 8 Grid Editor Select Menu

Word Count: 945

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.

<cfquery name="getArtists" datasource="cfartgallery">
SELECT artistId, firstname, lastname, address, city, state, postalcode, email
FROM Artists
</cfquery>

<cfset args = structNew()>
<cfset args.name = "ArtistGrid">
<cfset args.format = "html">
<cfset args.query = "getArtists">
<cfset args.stripeRows = true>
<cfset args.selectColor = "##D9E8FB">
<cfset args.selectmode = "edit">
<cfset args.onchange = "cfc:artists.editArtist({cfgridaction},{cfgridrow},{cfgridchanged})">

<cfform>
<cfgrid attributeCollection="#args#">
<cfgridcolumn name="artistid" display="false">
<cfgridcolumn name="firstname" header="First Name">
<cfgridcolumn name="lastname" header="Last Name">
<cfgridcolumn name="email" header="Email Address">
<cfgridcolumn name="address" header="Address">
<cfgridcolumn name="city" header="City">
<cfgridcolumn name="state" header="State" >
</cfgrid>
</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.

<cfset state_abbr = "AL,AK,AZ,AR,CA,CO,CT,DE,DC,FL,GA,HI,ID,IL,IN,IA,KS,KY,LA,ME,MD,MA,MI,MN,MS,MO,MT,NE,NV,NH,NJ,NM,NY,NC,ND,OH,OK,OR,PA,RI,SC,SD,TN,TX,UT,VT,VA,WA,WV,WI,WY">
<cfset state_name = "Alabama,Alaska,Arizona,Arkansas,California,Colorado,Connecticut,Delaware,District of Columbia,Florida,Georgia,Hawaii,Idaho,Illinois,Indiana,Iowa,Kansas,Kentucky,Louisiana,Maine,Maryland,Massachusetts,Michigan,Minnesota,Mississippi,Missouri,Montana,Nebraska,Nevada,New Hampshire,New Jersey,New Mexico,New York,North Carolina,North Dakota,Ohio,Oklahoma,Oregon,Pennsylvania,Rhode Island,South Carolina,South Dakota,Tennessee,Texas,Utah,Vermont,Virginia,Washington,West Virginia,Wisconsin,Wyoming">

<cfform>
<cfgrid attributeCollection="#args#">
<cfgridcolumn name="artistid" display="false">
<cfgridcolumn name="firstname" header="First Name">
<cfgridcolumn name="lastname" header="Last Name">
<cfgridcolumn name="email" header="Email Address">
<cfgridcolumn name="address" header="Address">
<cfgridcolumn name="city" header="City">
<cfgridcolumn name="state" header="State" width="125" select="true" values="#state_abbr#" valuesdisplay="#state_name#">
</cfgrid>
</cfform>

This makes it really easy to for you to create select menu editors. Here is a quick image of my example.


Comments

#1 Posted By: todd sharp Posted On: 3/28/08 3:45 PM
So could you modify your previous demo to use a date picker or some other such widget (radio buttons, check boxes, etc, etc, etc)?
#2 Posted By: todd sharp Posted On: 3/28/08 3:46 PM
And for the record, I knew it was there, but honestly totally forgot.
#3 Posted By: Zane Posted On: 4/2/08 8:48 AM
Dan,

Thanks for all your posts! They have gotten me up and running with CF extremely fast. I've been following your posts on cfgrid and one thing I haven't seen yet is how you would pass the cfgrid change data to a javascript for processing via cfajaxproxy? My problem is like this:
I have it setup so that when they select the item a dropdown menu comes up and they can change the item details. The problem is that it references a foreign key and when it does the onchange event it does the update but leaves the ugly number in there instead of what it is referencing. I've tried for the last couple days to get it to pass the required onchange variables to javascript and then have the javascript do a grid refresh but when I try and pass it from javascript to the cfc it breaks (the 3 variables show up as "U", and then many 'null' values for cfgridrow and cfgridchanged). Is there a way to pass the cfgridrow and cfgridchanged variables to javascript via the onchange command? I hope this makes sense, as this is the only place i've found that even comes close to answering these questions!
#4 Posted By: vinnyp Posted On: 5/1/08 11:59 PM
The drop down list values completely stopped working for me. I have been racking my brain now for many days and the only conclusion i can come to is that the EXT libraries have changed and are now causing problems. Can anyone else validate my pain?
#5 Posted By: Dan Vega Posted On: 5/2/08 8:05 AM |
Author Comment
Are you seeing any errors in firebug or in the ColdFusion Ajax debugger?
#6 Posted By: vinnyp Posted On: 5/5/08 3:04 PM
It is a bug with Coldfusion 8.01 that they are working on a hot fix for now.


Post Your Comment







Show Captcha

If you subscribe, any new posts to this thread will be sent to your email address.

Copyright © 2007 Dan Vega | BlogCFC was created by Raymond Camden. This blog is running version 5.8.001.