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>
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.