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. 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.
#7 Posted By: Carla Scepaniak Posted On: 6/4/08 6:06 PM
Thank you for your blog, and for several other of you guys out there. My question is, is it possible to allow the select list within an html cfgrid accept multiple selections? Right now, it appears you can only select one thing at a time in a drop-down listing.
#8 Posted By: steve Posted On: 7/18/08 2:32 AM
This is very cool. Is there a way to "default" the selected index that you know of? Suppose I wanted to have a state drop down just like you have above but I wanted each row to default to the state that the user lives in which is stored as part of the user record in the database?
#9 Posted By: Regina Posted On: 8/19/08 1:55 PM
Hi Dan,

Does this only work for applet cfgrids? Mine is html and I don't see the dropdown. Help!
#10 Posted By: Dan Vega Posted On: 8/19/08 1:57 PM |
Author Comment
No this is the html grid in ColdFusion 8. What version of cf are you using? Are you sure that you are in edit mode?
#11 Posted By: S Posted On: 8/21/08 1:38 PM
I read Zane's comment (#3) and am having the exact same problem. Has anyone found a solution to it?
#12 Posted By: Zane Posted On: 8/21/08 1:43 PM
Hey S, I wish I had an answer for you but I gave up on it. I figured out ways to pass variables to the same cfc function and just added a 'refresh' button that calls the javascript. Not the most elegant thing in the world but it works.
#13 Posted By: Dan Vega Posted On: 8/21/08 1:48 PM |
Author Comment
I would love to help guys but I have not done much using cfajaxproxy.
#14 Posted By: S Posted On: 8/21/08 2:52 PM
Thanks for the immediate response. I also figured a quick work around where I posted the actual text and did a lookup on the key from that. Again not the best solution, but it works for now. Zane, I will give the refresh button a try.
#15 Posted By: Giedrius Posted On: 9/22/08 1:35 PM
On ColdFusion 8.0.1 this example did not work. However, previous example using Ext and JS worked, but not quite.

Both display <div class="x-grid-col-7 x-grid-cell-inner"><div class="x-grid-cell-text" unselectable="on">&nbsp;</div></div> when double clicked, too.

Great tutorials!
#16 Posted By: ADS Posted On: 12/2/08 11:15 AM
Two questions: 1) should this example work with cfform format="flash"? I have not been able to get it to work. 2) when if first load the page and click a cell with the select menu, the grid shifts to the right of my screen but the select menu remains on the screen in its orginal position (this is happening in IE 6 and FF 2. How can I correct this?
#17 Posted By: Dan Vega Posted On: 12/2/08 2:26 PM |
Author Comment
This is for the CF8 Ajax grid and I am not sure why you are having the display problems. I am on FF3 and its working ok for me.
#18 Posted By: Hammergood Posted On: 12/11/08 8:06 AM
When will this fix be released?

Quote:

#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.
#19 Posted By: jono Posted On: 12/12/08 11:32 AM
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?
#20 Posted By: Jason Posted On: 2/25/09 7:39 AM
I just applied hotfix hf801-71634.zip at http://is.gd/kNAs and now I am seeing what Dan shows above.
#21 Posted By: Gary Habermann Posted On: 2/26/09 1:08 PM
Is there any way to tell how many records are being loaded onto a CFGRID page. For example the CFGRID pages sizes is set to 15 records, but on the last page there are only 10 records to display. Is there any way I can tell that there are only 10 records loaded on the page? because when I loop through the records on the page it blows up when we get to a blank row on the cfgrid.

Thank you
Gary
#22 Posted By: zaher Posted On: 4/16/09 5:48 PM
thanks for this example. it helped me alot.
but i have a problem. whenevr i choose a value from the dropdown list and i want to change this value to another one, the dropdwon list only shows me the value that i selected the first time and all other values disappears.

can you help in thta?

Thanks
#23 Posted By: Dan Posted On: 6/18/09 1:31 PM
Ok. So I follow the tutorial and I have 1 issue amd 2 questions. First I have a scroll bar appear at the bottom of my drop down. What's up with that? My first question is how do you set the default value of the dropdown to match what is currently in the database and my second question is how do you make the column editable multiple times? For example a user may choose a 'status' for a record and when that status changes over time they would need to update that in the record. Right now, once you choose an item from the list the field gets locked or at least that has been my experience.
#24 Posted By: Dan Posted On: 6/18/09 1:36 PM
Quick followup question to my previous question. Is there a way to capture a change history when the dropdown is changed? I ask because I have a situation where records are tracked based on days of inactivity. A person can potentially game the system by changing the dropdown daily and resetting the modified date. I'd like to mitigate this behavior


Post Your Comment

Leave this field empty







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.