We saw in the earlier article about using itemEditors in a flex datagrid. Now, Lets dive a little deeper into doing some more complex things with itemEditors in a flex datagrid. Before we get started, let us get introduced to the events that are most critical when we are performing an edit operation in a flex datagrid.
(Description of each of these events are available in the livedocs, readers are requested to check up)
itemEditBegin – Fired when you click on an editable cell of the datagrid (also when the editedItemPosition is set on an editable DataGrid)
itemEditBeginning - Fired when the mouse is released
itemEditEnd - Fired when the edit is committed / editor is destroyed there by terminating the edit session.
Now, Lets get back to our scenario. Let us take a simple example – We have a datagrid with a numeric stepper used as an itemEditor similar to the example stated in the part I of this article. Now, let us add an additional functionality of adding a validation to the data that gets entered in the itemEditor. Take a look at the example attached along with this post to see this in action.
Let us dig into the code now:
<mx:DataGrid editable=”true” id=”datagrid” x=”105″ y=”85″ height=”176″ width=”317″ dataProvider=”{arr}” itemEditEnd=”doValidation(event)”>
<mx:columns>
<mx:DataGridColumn headerText=”Data” dataField=”disp” editable=”false”/>
<mx:DataGridColumn headerText=”Available” dataField=”value” editable=”false”/>
<!– itemEditor is set to our class CustomNumericStepper. Always remember to set the editorDataField to the dataField on which the operation is performed–>
<mx:DataGridColumn headerText=”Order Qty” dataField=”order” itemEditor=”CustomNumericStepper” editorDataField=”value”/>
</mx:columns>
</mx:DataGrid>
when the itemEditEnd event of the DataGrid fires, we invoke a method call doValidation() which performs the validation of rhe data entered in the editor. So,whats the logic for validation? We validate if the new value that is getting entered in the column is less than or equal to the value in the available column. on fail, we will throw an alert indicating the error to the user. showError() method is used to achieve this.
//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;
//Compare if the entered value is > upper bound
if(selectedData > upperBound)
{
//Destroy the instance of the itemEditor by calling destroyEditor()
datagrid.destroyItemEditor()
//Call preventDefault() so that the new value is NOT committed
event.preventDefault();
//Invoke a method to display an error message
showError(upperBound);
}
}
//Display the error message
private function showError(value:Number):void
{
//Show the error message in an Alert Box
Alert.show(“Please Enter a value less than “+value)
}
So, whats doValidation() doing?
doValidation() receives the datagrid event as its parameter. The first step is to store the Object corresponding the edited item into a variable – selectedData
Now we find out what is the upper bound to validate against. This is the value in the available column for the current record that we are editing. Now we store that value to another variable – upperBound
Lets check if selectedData > uppedBound. On this condition being satisfied, we do the following steps.
Destroy the editor instance – destroyItemEditor() is called. This is to close the editor
Prevent committing of the data – event.preventDefault() is called. This prevents the default action that a particular event triggers. In this case, the committing of the data is prevented.
Finally, showError() method is called to alert the error message to the user.
There we go! We have a simple working sample of applying a validation to an itemEditor of a flex datagrid up and running.
View Sample | Download Source
Download Source
