Harish Sivaramakrishnan

In the earlier articles (I, II) , we saw how to use itemEditors on a flex datagrid and also how to validate data that is entered in the itemEditor. Lets take the example in the previous article and improve it a little further.Lets look at the doValidation() method again: We were comparing if the entered value is greater than the upperBound and throw an error message as an Alert in the example. Flex comes with some really cool built in validators that provide a much more usable user experience than throwing an Alert box to the user when an error has occured. In this example, lets try to incorporate a NumberValidator to do the same validation that we were doing earlier using the if conditional.

The code

Well, things havent changed too much from our earlier example, except for the following method – doValidation()

//Validate the data entered / stepped in the itemEditor
private function doValidation(event:DataGridEvent):void
{

//Storing the selection made in the itemEditor to a variable
var selectedData:Object = CustomNumericStepper(datagrid.itemEditorInstance).value
//Store the upper bound to compare
var upperBound:Number = event.target.selectedItem.value;
//create a number validator instance. This can be extended to any validators
nv = new NumberValidator()
//specify the source – in this case the itemEditor instance
nv.source = CustomNumericStepper(datagrid.itemEditorInstance);
//Set the property to validate against. NOTE: always set this, or the validator will throw RTE
nv.property = “value”
//Set the maxvalue to the upperBound
nv.maxValue = upperBound;
//Call validate and take the return value. NOTE: validate() method sends two events valid / invalid based on the validation.
//val contains an event reference
var val:* = nv.validate(selectedData);
//check if validator returned invalid.
if(val.type == “invalid”)
{
//Prevent default action.
event.preventDefault();
}

}

So, whats different here? We are creating a new instance of a NumberValidator (nv) here. Then the source property of the validator is assigned to the control, whose data we are interested in validating. In our case, its the itemEditorInstance – the custom numeric stepper. Important point to note here – once you have set the source property, always set the “property” property (this is NOT redundant typing, there is a property called property for a validator ) of the validator to the property that we are validating against. Set the maxValue of the validator to the upperBound and call validate(value:Object) method on the validator. The validate() method accepts the value that we are validating.

When you run the example, you can see that the validator puts a red box around the wrongly entered field and when you move the mouse over, you can see that the error message is displayed as a red tooltip. Isn’t that cool? Do look up the documentation for the validators, there are many more properties that can be used to customize the validation parameters, error messages etc.

View Sample Application | Download Source