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.
You will see in the code below that I have a function called init which is called via ajaxOnLoad() after the grid is loaded. The init() function calls the setDateRenderer() (which will ensures the date is properly formatted when displayed in the grid), and it calls the addValidator() function I created to add a listener to the "validateedit" event. Now whenever the validateedit event fires, it will call the dataValidator() function. The dataValidator() function checks to see if the field that is being edited needs validation, and then validates the data if necessary. In this example, I added validation for the Expiration Date, and the numeric Sponsor ID for the coupon record. If the data fails validation an alert is thrown and the edit event is canceled(reverting the data back to it's original value).
<head>
<title>CFGird Custom Date Validator</title>
<!--- import the Ext date package --->
<cfajaximport tags="cfinput-datefield">
<!--- create javascript function for rendering dates --->
<script language="JavaScript" type="text/javascript">
setDateRenderer = function(){
mygrid = ColdFusion.Grid.getGridObject('CouponsGrid');
cm = mygrid.getColumnModel();
cm.setRenderer(3, Ext.util.Format.dateRenderer('m/d/Y'));
mygrid.reconfigure(mygrid.getDataSource(),cm);
}
dataValidator = function(editEvent){
//Date Field Validation
if (editEvent.field == "EXPIRATIONDATE"){
if (isNaN(Date.parse(editEvent.value))){
alert("Please enter a date in this field.");
editEvent.cancel = true;
}
else {
data = new Date(Date.parse(editEvent.value));
editEvent.value = data.dateFormat("m/d/Y");
}
}
//Numeric Field Validation
if (editEvent.field == "SPONSORID"){
if (isNaN(editEvent.value)){
alert("Please enter a numeric value in this field.");
editEvent.cancel = true;
}
}
}
addValidator = function(){
mygrid = ColdFusion.Grid.getGridObject('CouponsGrid');
mygrid.on('validateedit',dataValidator);
}
init = function(){
setDateRenderer();
addValidator();
}
</script>
</head>
<body>
<!--- Set up the Grid --->
<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" width="200"/>
</cfgrid>
</cfform>
<!--- use AjaxOnLoad to call the init() function --->
<cfset ajaxOnLoad("init")>
</body>
</html>
Comments (13) |
18170 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