Issue: Scrollable and Editable datagrid jumps rows while editing the cell values

[rlella]

Hi All,


I am having an issue with the editable datagrid which is also scrollable. I have a datagrid with 6 columns. First Column is "Item"
which is readonly. Next 4 columns from T1 to T4 are editable and the sum of all (T1+T2+T3+T4) will be stored in the Total column.
While trying to edit each of the cells using the mouse, the control jumps from current row to some other row randomly.

In order to reproduce this , when i click on 3rd row (Item3) of Column T1 in the datagrid, control jumps to some other row.
Similar behavior is observed for other rows as well. Not sure as to why this happens.
Can anyone let me know how this can be fixed. I am attaching the complete mxml below.

Note: It works fine when we use the Tab key control to enter data into the cells. Fails when we use mouse control to edit the cell values.

Below is the complete mxml. This is kind of urgent requirement. Quickly reply will be greatly appreciated.

Thanks in advance,
Ravi


==================================================================

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%"
        height="100%">

    <mx:Script>
        <![CDATA[
        import mx.collections.ArrayCollection;
        import mx.validators.NumberValidator;
        import mx.events.ValidationResultEvent;
        import mx.controls.TextInput;
        import mx.events.DataGridEventReason;
        import mx.events.DataGridEvent;
       
            [Bindable]
            public var dgData:ArrayCollection = new ArrayCollection([
            {Item:'Item1', T1:'0', T2:'0', T3:'0', T4:'0', Total: ''},    
            {Item:'Item2', T1:'0', T2:'0', T3:'0', T4:'0', Total: ''},
            {Item:'Item3', T1:'0', T2:'0', T3:'0', T4:'0', Total: ''},
            {Item:'Item4', T1:'0', T2:'0', T3:'0', T4:'0', Total: ''},
            {Item:'Item5', T1:'0', T2:'0', T3:'0', T4:'0', Total: ''},
            {Item:'Item6', T1:'0', T2:'0', T3:'0', T4:'0', Total: ''},              
            {Item:'Item7', T1:'0', T2:'0', T3:'0', T4:'0', Total: ''},
            {Item:'Item8', T1:'0', T2:'0', T3:'0', T4:'0', Total: ''},
            {Item:'Item9', T1:'0', T2:'0', T3:'0', T4:'0', Total: ''},
            {Item:'Item10', T1:'0', T2:'0', T3:'0', T4:'0', Total: ''}
            ]);
           
            private function validate(value:String) : Boolean {
                var isError:Boolean;
                var validateValue : NumberValidator = new NumberValidator();
                validateValue.domain = "int";
                validateValue.integerError = "Enter Integer value.";
                validateValue.invalidCharError = "The input contains invalid characters.";
                validateValue.allowNegative = false;
                validateValue.negativeError = "The number may not be negative.";
                var validationResult : ValidationResultEvent;
                validationResult = validateValue.validate(value);
                if(validationResult.type ==ValidationResultEvent.INVALID){
                    isError= true;
                }else{
                    isError= false;
                }
                return isError;
            }
                   
            private function validateData(event:DataGridEvent = null) : void {
       
                if (event.reason == DataGridEventReason.CANCELLED) {
                    return;
                }
                // Get the new data value from the editor.
                var newData:String= null;
                    newData =
                        TextInput(event.target.itemEditorInstance).text;
                if(newData == "") {
                    event.preventDefault();
                    TextInput(editableDG.itemEditorInstance).errorString=
                        "Enter a valid value.";
                }else if(validate(newData)) {
                    event.preventDefault();
                    TextInput(editableDG.itemEditorInstance).errorString=
                        "Enter a valid value.";
                } else {
                    updateDG(newData, event.rowIndex, event.columnIndex);
               
                }      
            }
       
            //Function to update the server datagrid
            private function updateDG (newData:String, rowIndex:int, columnIndex:int) : void {
       
                var dataGridElements:ArrayCollection =
                    dgData as ArrayCollection;
                var dataGridElement:Object;
                var annualTotal:Number = 0.0;
                if( dataGridElements.length > 0) {
                    for(var i:int=0; i<dataGridElements.length; i++){
                        dataGridElement = dataGridElements[i];
                        if (i==rowIndex) {
                            if(columnIndex == 1){
                                dataGridElement.T1 = newData;
                            }else if(columnIndex == 2){
                                dataGridElement.T2 = newData;
                            }else if(columnIndex == 3) {
                                dataGridElement.T3 = newData;
                            }else if(columnIndex == 4){
                                dataGridElement.T4 = newData;
                            }
                            annualTotal = parseFloat(dataGridElement.T1) +
                                          parseFloat(dataGridElement.T2) +
                                          parseFloat(dataGridElement.T3) +
                                          parseFloat(dataGridElement.T4) ;
                            dataGridElement.Total = annualTotal;
                        }
                    }
                }
                dgData.refresh();
            }
         ]]>
    </mx:Script>
         
   
            <mx:DataGrid id="editableDG" width="70%"
            editable="true" height="26%" dataProvider="{dgData}"
            verticalScrollPolicy="auto" rowCount="{dgData.length}"
            itemEditEnd="validateData(event)">
                <mx:columns>
                    <mx:DataGridColumn dataField="Item"
                        fontWeight="bold" showDataTips="true" editable="false"/>
                    <mx:DataGridColumn dataField="T1" textAlign="right"
                        showDataTips="true" editable="true"/>
                    <mx:DataGridColumn dataField="T2" textAlign="right"
                        showDataTips="true" editable="true"/>
                    <mx:DataGridColumn dataField="T3" textAlign="right"
                        showDataTips="true" editable="true"/>
                    <mx:DataGridColumn dataField="T4" textAlign="right"
                        showDataTips="true" editable="true"/>
                    <mx:DataGridColumn dataField="Total" textAlign="right"  
                        showDataTips="true" editable="false"/>
                </mx:columns>
            </mx:DataGrid>
</mx:Application>