Flex/DataGrid: update each row dataProvider is changed

Question

In a DataGrid, how can I force data() of all itemRenderers on visible rows to be called when I've made an update to the dataProvider.

I'n the following the Grid isn't updated after pressing doSomething. If I have a large list the update is done when scrolling down and then back up again, or in the case of the TreeGrid i open/close a node.

<?xml version="1.0" ?>
<mx:VBox
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:flexlib="http://code.google.com/p/flexlib/"
initialize="_initialize()">

<mx:Script>
<![CDATA[

    import mx.events.CollectionEvent;

    import mx.controls.Alert;
    import Icons;

    [Bindable]
    private var dataProvider0:XML;

    private function _initialize():void
    {
        dataProvider0 = <node>
                <node label="A" option="1">
                    <node label="C" option="1"/>
                    <node label="D" option="1"/>
                </node>
                <node label="B" option="1">
                    <node label="E" option="1"/>
                    <node label="F" option="1"/>
                </node>
            </node>;

    }

    private function doSomething():void
    {

        dataProvider0.node[0].@option = 0;
        dataProvider0.node[0].node[0].@option = 0;


    }


]]>
</mx:Script>

<flexlib:TreeGrid
    id="treeGrid1"
    width="500"
    height="300"
    showRoot="false"
    verticalTrunks="none"
    paddingLeft="0"
    disclosureClosedIcon="{Icons.folderClosed}"
    disclosureOpenIcon="{Icons.folderOpen}"
    dataProvider="{dataProvider0}">

    <flexlib:columns>
        <flexlib:TreeGridColumn dataField="@label" headerText="Section"/>
        <mx:DataGridColumn dataField="@option" headerText="Option" width="50">
            <mx:itemRenderer>
                 <mx:Component>

                    <mx:Box xmlns:mx="http://www.adobe.com/2006/mxml" paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0" verticalAlign="middle" horizontalAlign="center" width="100%" height="100%">

                        <mx:Script>
                        <![CDATA[

                            [Bindable]
                            override public function set data(value:Object):void
                            {
                                super.data = value;
                                chkMain.selected = value.@option == "1";
                            }

                        ]]>
                        </mx:Script>

                        <mx:CheckBox id="chkMain"/>

                    </mx:Box>

                </mx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>
    </flexlib:columns>

</flexlib:TreeGrid>

<mx:DataGrid
    id="dataGrid1"
    width="500"
    height="300"
    dataProvider="{dataProvider0.node}">

    <mx:columns>
        <mx:DataGridColumn dataField="@label" headerText="Section"/>
        <mx:DataGridColumn dataField="@option" headerText="Option" width="50">
            <mx:itemRenderer>
                 <mx:Component>

                    <mx:Box xmlns:mx="http://www.adobe.com/2006/mxml" paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0" verticalAlign="middle" horizontalAlign="center" width="100%" height="100%">

                        <mx:Script>
                        <![CDATA[

                            [Bindable]
                            override public function set data(value:Object):void
                            {
                                super.data = value;
                                chkMain.selected = value.@option == "1";
                            }

                        ]]>
                        </mx:Script>

                        <mx:CheckBox id="chkMain"/>

                    </mx:Box>

                </mx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>
    </mx:columns>

</mx:DataGrid>

<mx:Button label="Do" click="doSomething()"/>

</mx:VBox>

Answer 1

Have you tried

private function doSomething():void
{

    dataProvider0.node[0].@option = 0;
    dataProvider0.node[0].node[0].@option = 0;

    // force a redraw at earliest opportunity
    treeGrid1.invalidateDisplayList(); 

}

Answer 2

Try this:

private function doSomething():void
{
    dataProvider0.node[0].@option = 0;
    dataProvider0.node[0].node[0].@option = 0;

    treeGrid1.dataProvider.refresh();
    dataGrid1.dataProvider.refresh();
}