Question

I have 2 flex datagrids on a screen. The user can select one or more rows from either datagrid and move them to the other datagrid. The lower table is empty when entering the application. For example:

Item    Color   Price
--------------------
item57  red    $5.55
item62  blue   $5.29
item808 green  $2.21

Row  Item    Color   Price
---------------------------

Note there is a column that numbers the rows on the bottom datagrid (only).

When I enter the application and move, for example, 3 rows from the top to bottom grid, the row numbers are fine (they show rows 1, 2, and 3). For example:

Item    Color   Price
--------------------

Row  Item    Color   Price
---------------------------
1    item57  red    $5.55
2    item62  blue   $5.29
3    item808 green  $2.21

If I then move, for example, row 1 in the bottom grid back to the top…

Item    Color   Price
--------------------
item57  red    $5.55

Row  Item    Color   Price
---------------------------
1    item62  blue   $5.29
2    item808 green  $2.21

and then back again to the bottom grid…

Item    Color   Price
--------------------


Row  Item    Color   Price
---------------------------
1    item62  blue   $5.29
2    item808 green  $2.21
1    item57  red    $5.55

the row number is supposed to display 3 because it inserts into the bottom grid at the end of the list, but when it does this, it displays the (old) row number value of 1.

When I debug and look at the dataprovider = _myData, I see the rowNumber value for the row in question (for item57 above) equals 3 (as it should). However, it is displayed in the lower datagrid as 1.

How can the dataprovider value be different than what is displayed in the DataGrid?

[I can also debug and look at gridLower column information, and it also shows the correct value of 3 for rowNumber for the data in question.]

The lower datagrid is similar to the following (although I’m using a custom itemRenderer, removed for simplicity here):

[Bindable]
private var _myData:ListCollectionView=new ListCollectionView(new ArrayList());
...
<s:DataGrid dataProvider="{_myData}">
    <s:columns>
        <fx:Array>
            <s:GridColumn id="gridLower" headerText="myHeader" dataField="rowNumber"/>  
            ...

The function that adds the upper table’s row(s) to the lower table is:

private function addRow():void {    
    var selectedIndices:Object=gridUpper.grid.selectedIndices;
    for (var i:int=selectedIndices.length-1;i>=0;i--) {
        var item:Object=_upperTableData.removeItemAt(selectedIndices[i]);
        item.rowNumber=_myData.length+1;
        _myData.list.addItem(item);
    } 
    // I tried adding "_myData.refresh();" here and it had no effect
    // I tried adding "ListCollectionView(gridLower.dataProvider).refresh();" and it had no effect
    // I tried adding "grid2.dataProvider.refresh();" here but it had no effect
}

UPDATE 1: If I re-sort any column in the lower table, the correct values appear. I seem to be observing what’s reported in this link:
http://www.barneyb.com/barneyblog/2007/06/23/another-flex-weirdnessgotcha/
Haven’t found a solution yet though. See attempts in my addRow() function above. Am I on the right track?

UPDATE 2: While re-sorting manually corrects the data in the lower grid, I haven’t found a way to do this programmatically. I tried inserting:

_myData.sort=null;
var complete:Boolean=_myData.refresh();

just before the end of addRow() function above, but it didn’t resolve my issue. When debugging, complete is true, but still the lower grid displays the stale data.

Answer 1

New answer 🙂 I will delete the old one if this helps.

I haven’t used Spark DataGrid yet, was expecting it to behave like a List.

Found this in this in some comments in the source for this method of DataGrid:

public function invalidateCell(rowIndex:int, columnIndex:int):void

You can invalidate an entire row/col by passing -1 for the other value. In the quote from the docs below, you can also use dataProvider.itemUpdated()

If the specified cell is visible, it is redisplayed. If
variableRowHeight=true, then doing so may cause the height of the
corresponding row to change. If columnIndex is -1, then the entire row
is invalidated. Similarly if rowIndex is -1, then the entire column is
invalidated.

This method should be called when there is a change to any aspect of
the data provider item at rowIndex that might have some impact on the
way the specified cell is displayed. Calling this method is similar to
calling the dataProvider.itemUpdated() method, which advises the Grid
that all rows displaying the specified item should be redisplayed.
Using this method can be relatively efficient, since it narrows the
scope of the change to a single cell.

Now I finally know where the itemUpdated() method on collections (ArrayCollection, ListCollectionView) can actually be used!

[edit]

Give your grid an id:

<s:DataGrid id="lowerDataGrid" dataProvider="{_myData}">

Then you should be able to do this in your addRow() method after updating the collection:

lowerDataGrid.invalidateCell(item.rowNmber -1, 1); // assuming rowNumbers are 0 based