Yesterday I blogged about how to create a custom date renderer for CFGrid. Today I am going to add to that example how to validate the data entered into the CFGrid before it is sent to the cfc to update the database. The CFGrid (Ext.grid.EditorGrid) object has an event called "validateedit", which fires after a cell is edited, but before the value is set in the record. We will be adding a listener to that event that will validate the data that is being submitted and, if the data is not valid, display an alert message and cancel the changes.
Comments (13) | 17838 Views
If you are looking for an experienced, professional, and reliable ColdFusion development company, contact PALADEM today.
I tried the example locally but it didn't work as required, also the working example is not working.
Can you help.
Thanks.
init is not defined
ColdFusion.Event.registerOnLoad(init,null,false,true);
I am new to CF8 and the EXT framework and am not sure what the issue is. Any help is greatly appreciated.
Make sure that the <script> block that contains your init() javascript function is in within the <head> and </head> tags. The ext stuff can be picky if you don't define all your javascript functions in the head of the html.
-Scott
have a ADD button that would add a record to the datagrid which is
is binded to a coldfusion component and then record would be
inserted in the database?
Is there a sample you know of for that?
Here's a trick to get it into the head area if you are using some kind of template system:
<cfsavecontent variable="javascript">
<script type="text/javascript">
function init(){
...
}
</script>
</cfsavecontent>
<cfhtmlhead text="#javascript#">
<cfset ajaxOnLoad("init")>
is open and closed through an index page when the page loads, so I was using the cfhtmlhead tag to throw the init function into the <head> tags. Just can't seem to get it working, any thoughts?
For example:
<script type="text/javascript">
ColdFusion.Event.registerOnLoad(init,null,false,true);
</script>
one day. So 10/1/2009 becomes 11/30/2009. Works in
FF.
And I have no control over what browser my user uses.
It was not displaying the error message or returing the correct
original date.
I changed the code to this for the date validation.
if (isNaN(Date.parse(editEvent.value))){
alert("Please enter a date in this field.");
editEvent.cancel = true;
data = new Date(Date.parse(editEvent.originalValue));
}
else {
data = new Date(Date.parse(editEvent.value));
}
editEvent.value = data.dateFormat("m/d/Y");
ANd now it works like a charm.
In ColdFusion 9 they changed to a new version of the underlying EXT framework. As a result most of the workarounds like this that I did in CF8 will not work. For this example I was making a custom date validator, because that was not built into CF8. However in CF9 they added some new options for the 'type' attribute in the 'cfgridcolumn' tag and now you can just use that to make sure the dates in a cfgrid are valid.
<cfform id="CouponForm" name="CouponForm">
<cfgrid name="CouponsGrid"
format="html"
pagesize="10"
striperows="yes"
selectmode="edit"
bind="cfc:coupons.getCoupons({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection})"
onchange="cfc:coupons.editCoupon({cfgridaction},{cfgridrow},{cfgridchanged})">
<cfgridcolumn name="Couponid" display="false" />
<cfgridcolumn name="SPONSORID" header="Sponsor" width="100"/>
<cfgridcolumn name="COUPON" header="Coupon" width="100"/>
<cfgridcolumn name="EXPIRATIONDATE" header="Exp Date" type="date" width="200"/>
</cfgrid>
</cfform>
One thing to note however is that you in your cfc that is bound to the grid, you will need to add a function to convert the date string returned by the grid to a ColdFusion datetime value.
<cfscript>
function ISODateToTS(str) {
return ParseDateTime(ReplaceNoCase(left(str,16),"T"," ","ALL"));
}
</cfscript>
<cfquery datasource="#THIS.dsn#">
UPDATE COUPONS
SET <cfswitch expression="#colname#">
<cfcase value="EXPIRATIONDATE">#colname# = #createodbcdatetime(ISODateToTS(value))#</cfcase>
<cfdefaultcase>#colname# = '#value#'</cfdefaultcase>
</cfswitch>
WHERE COUPONID = #ARGUMENTS.gridrow.COUPONID#
</cfquery>
I'm using CF9 and I have a couple of cfgrids of html format in my app.
This code is useful for when a user has just changed the content of a cell.
But what about when they insert a new row (insert=yes) and the values are null?
If they submit the form, records w/null values will get submitted (I've checked, it works.)
I'd like to cancel the submit and reload the form page so it re-displays w/out the new insert rows (w/a little 'alert' as to why, of course).
But this is really throwing me for a loop