<cfsilence>

CFGrid Date Picker Editor

Posted At : April 7, 2008 5:29 PM | Posted By : todd sharp
Related Categories: Ext, ColdFusion, Ajax

A few weeks ago Dan Vega blogged about creating a comboxbox (drop down) cell editor for the editable <cfgrid> before he realized that cfgrid supports in cell drop downs. I commented that I'd like to see something like a date picker cell editor and after using Dan's orginal code as inspiration and some hints from this post by Scott Bennett I finally got the thing working. Yes, I do realize that sometimes it'd just be easier to roll your own Ajax widget from scratch, but sometimes hacking it is more fun.

I'll leave it to Dan and Scott's original posts to explain the details, but here is what you'll end up with:

And here's the code:

<cfsetting showdebugoutput="false">

<cfajaximport tags="cfinput-datefield" />

<html>
<head>
<title>Edit Artist Grid</title>
<link href="/CFIDE/scripts/ajax/ext/resources/css/ytheme-aero.css" rel="stylesheet" type="text/css">

<style>
.x-menu-list{
margin: 0px; padding: 0px;
}
</style>

<script type="text/javascript" src="/CFIDE/scripts/ajax/ext/ext-all.js"></script>

<script type="text/javascript">
function init(){
//grid object
grid = ColdFusion.Grid.getGridObject("ArtistGrid");

//column model
cm = grid.getColumnModel();

//we need to know the column id
stIndex = cm.findColumnIndex("LASTMODIFIED");

var df = new Ext.grid.GridEditor(
   new Ext.form.DateField(
      {
         format: 'm/d/Y',
         minValue: '04/01/08',
      }
   )
);

cm.setEditor(stIndex, df);
cm.setRenderer(stIndex, Ext.util.Format.dateRenderer('m/d/Y'));

grid.reconfigure(grid.getDataSource(),cm);
}
</script>
</head>

<body>

<cfquery name="getArtists" datasource="cfartgallery">
SELECT artistId, firstname, lastname, address, city, state,
postalcode, email, '04/01/2008' as lastModified
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="address" header="Address">
<cfgridcolumn name="city" header="City">
<cfgridcolumn name="state" header="State">
<cfgridcolumn name="postalcode" header="Zip">
<cfgridcolumn name="lastModified" header="Last Modified">
</cfgrid>
</cfform>

<cfset ajaxOnLoad("init")>
</body>
</html>

Comments (18) |

Print |

Send |

Code |

del.icio.us |

Linking Blogs | 3755 Views

Comments

[Add Comment]

Nice example Todd.

I know that if I google and try for some hours I'd maybe find out by myself, but I figure you could probably answer from the top of your head: How can I use the same datefield picker in a "normal" cfform (not in a grid)?

# Posted By Trond Ulseth | 4/16/08 12:08 PM

Well, I think your best bet would be to check out Dan Vega's cfext project - I believe he has a custom tag for that.

http://cfext.riaforge.org

# Posted By todd sharp | 4/17/08 9:51 AM

This is awesome. I have been trying to do this since last fall. Do you have a working demo? I am having trouble getting it to work (datepicker).

# Posted By Kevin Jamison | 4/28/08 6:51 PM

What goes wrong Kevin?

# Posted By todd sharp | 4/29/08 11:01 AM

Hi Todd, when the page loads in IE I get an error:"init" is undefined and it is just a plain grid. In Safari it loads and the datepicker shows up, but the database doesn't update on refresh (changes will update in IE). Thanks for any help and thanks for the AWESOME site, it is a great help!

# Posted By Kevin Jamison | 4/30/08 12:28 PM

Would you be willing to post your cfc?

I'm having trouble with correctly formatting the date for the update query.

# Posted By Yvonne Shevnin | 5/2/08 5:49 PM

This is awesome

# Posted By Jackie | 5/23/08 2:09 PM

This works great in Firefox but I get a similar JS error to Kevin when I load it in IE6 and IE7. It's having trouble with this line:

ColdFusion.Event.registerOnLoad(init,null,false,true);

which is what the ajaxonload gets expanded to. The error is "Expected identifier, string or number". If you click OK to that js alert, it then says "init is not defined."

# Posted By Sheila Handler | 6/1/08 12:40 AM

Just a hunch, but try renaming the init function to something else? Maybe 'init' is a reserved word in IE?

# Posted By todd sharp | 6/1/08 9:35 AM

No, I renamed it to "wasinit". Same problem. Have you run this successfully in IE6 or IE7?

# Posted By Sheila Handler | 6/1/08 10:37 AM

To isolate the error, I commented out these statements:

var df = new Ext.grid.GridEditor(
new Ext.form.DateField(
{
format: 'm/d/Y',
minValue: '04/01/08',
}
)
);

cm.setEditor(stIndex, df);

and the js error goes away (of course, so does the date picker). It seems IE doesn't like this syntax.

# Posted By Sheila Handler | 6/1/08 11:02 AM

OK I've figured it out. Seems there is issues with the generated JavaScript - CF is putting the code to create the grid after my script, so the grid doesn't exist when I try to create the renderer. The solution is to wrap the init script in a cfsavecontent and then use cfhtmlhead to write that to the head. Code below:

<cfsetting showdebugoutput="false">

<cfajaximport tags="cfinput-datefield" />

<html>
<head>
<title>Edit Artist Grid</title>
<link href="/CFIDE/scripts/ajax/ext/resources/css/ytheme-aero.css" rel="stylesheet" type="text/css">

<style>
.x-menu-list{
margin: 0px; padding: 0px;
}
</style>

<script type="text/javascript" src="/CFIDE/scripts/ajax/ext/ext-all.js"></script>

</head>

<cfsavecontent variable="js">
<script type="text/javascript">
init = function(){
//grid object

grid = ColdFusion.Grid.getGridObject("ArtistGrid");

//column model

cm = grid.getColumnModel();

//we need to know the column id

stIndex = cm.findColumnIndex("LASTMODIFIED");

var df = new Ext.grid.GridEditor(
   new Ext.form.DateField(
      {
         format: 'm/d/Y',
         minValue: '04/01/08'
      }
   )
);

cm.setEditor(stIndex, df);
cm.setRenderer(stIndex, Ext.util.Format.dateRenderer('m/d/Y'));

grid.reconfigure(grid.getDataSource(),cm);
}
</script>
</cfsavecontent>
<cfhtmlhead text="#js#" />
<cfset ajaxOnLoad("init") />
<body>

<a href="javascript:init();">init</a>
<cfquery name="getArtists" datasource="cfartgallery">
SELECT artistId, firstname, lastname, address, city, state,
postalcode, email, '04/01/2008' as lastModified
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="address" header="Address">
<cfgridcolumn name="city" header="City">
<cfgridcolumn name="state" header="State">
<cfgridcolumn name="postalcode" header="Zip">
<cfgridcolumn name="lastModified" header="Last Modified">
</cfgrid>
</cfform>

</body>
</html>

# Posted By todd sharp | 6/2/08 10:36 AM

Thank you! Thank you! Thank you!
You saved the day and a project. I will try this and let you know if it works for me.

# Posted By Sheila Handler | 6/2/08 11:37 AM

It works perfectly in IE. Thanks again, Todd.

# Posted By Sheila Handler | 6/2/08 11:42 PM

You are awesome, it works! Thanks for all your time.

# Posted By Kevin Jamison | 6/3/08 12:11 PM

Totally awesome, you have saved my life with this one!!! Thank you so much for your blog. I have my grid opening in a modal cfwindow, and it's so cool; I have two date selection columns, so I just adjusted the javascript a little bit.

Now I have a few questions, kinda related:

1) Within an html edit grid utilizing cfcs, is there any way to have a select list which allows multiple selections?

2) I am confused about how to call my cfcs in the bind/onchange attributes if they reside in the cf8/CustomTags folder on my c drive (and the websites are on another drive). I can't seem to find an actual example of the exact syntax to use, help?

3) I'm very new to the ext stuff and at this time am totally confused about how to install whatever's needed to use the stylesheets such as you use (ytheme-aero.css), because I really like how they render a grid. Is it too complicated, or is it something which can be explained to me? I've been looking around the extjs.com site, but I just don't seem to be getting it yet. Also, do I look at the 1.1 ext material for ColdFusion or 2.0?

Thank you so much!!!

# Posted By Carla Scepaniak | 6/4/08 7:22 PM

Has anyone tested this with Firefox 3.0, the calender doesn't render properly. Its way too wide, numbers missing & unable to make selections..anyone has a fix?

# Posted By sneha | 8/2/08 3:05 AM

sneha,

put this in your page.

<code>
<style>
.x-date-picker{
width:150px;
}
</style>
</code>

# Posted By David Fry | 8/10/08 9:01 PM

[Add Comment]