Problems adding new rows to mx DataGrid

Question

I'm using mx:DataGrid and I cannot change to spark (it's a legacy project). The DataGrid is editable and when the users get in the last column I want to add a new column and start the edit mode in the first column of the new row. I can do this.

My problem is that sometimes the last column cannot be edited, so I added an itemEditBeginning listener to stop the edit and add the new row. That's my problem. When the user get in the last field, the new row is added but I cannot see it. I have to click in the column header to sort datagrid data, then the new rows appears. It's kind of a delay.

My code is bigger, but this simple code can reproduce the same problem:

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/mx" 
           creationComplete="application1_creationCompleteHandler(event)"
           minWidth="955" minHeight="600">
    <fx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        import mx.events.CollectionEvent;
        import mx.events.CollectionEventKind;
        import mx.events.DataGridEvent;
        import mx.events.FlexEvent;

        [Bindable] public var itens:ArrayCollection;

        protected function application1_creationCompleteHandler(event:FlexEvent):void {
            itens = new ArrayCollection();
            itens.addEventListener(CollectionEvent.COLLECTION_CHANGE, onCollectionChange);

            itens.addItem({a: '1', b: '2'});
        }

        protected function onCollectionChange(event:CollectionEvent):void {
            if (event.kind == CollectionEventKind.ADD) {
                var row:int = itens.length - 1;
                var column:int = 0;
                var args:Array = [row, column];
                callLater(moveTo, args);
            }
        }

        protected function moveTo(row:int, col:int):void    {
            itensDg.editedItemPosition = { rowIndex:row, columnIndex:col };
        }

        protected function addInfo():void {
            itens.addItem({a: '10', b: '20'});
        }

        protected function itensDg_itemEditBeginningHandler(event:DataGridEvent):void {
            if (event.columnIndex == 1) {
                event.preventDefault();
                addInfo();
            }
        }

    ]]>
    </fx:Script>

    <mx:DataGrid id="itensDg" dataProvider="{itens}" editable="true" 
             itemEditBeginning="itensDg_itemEditBeginningHandler(event)" />
</s:Application>

Any tips about how to solve this?

Thanks.

Answer 1

Try updating addInfo() as follows:

    protected function addInfo():void {
        itens.addItem({a: '10', b: '20'});
        itens.refresh();
    }

Answer 2

Trish answer led me to a solution that works. DataGrid has its own itemEditBeginning listener that modifies the editedItemPosition. Firstly I tried to stop the propagation of the itemEditBeginning event, but I realized some focus and mouse events modifies the editItemPosition too. So, the item was added in the array, my onCollectionChange listener was called, but then other events modified the editedItemPosition later.

So, instead of changing the editedItemPosition in the CollectionEvent listener, I simply changed it after adding the element:

protected function addInfo():void {
    itens.addItem({a: '10', b: '20'});
    var row:int = itens.length - 1;
    var column:int = 0;
    var args:Array = [row, column];
    callLater(moveTo, args);
}