FLEX: Datagrid, how to select an item given my data attribute values

Question

hi,

I'm using a custom component CheckBoxList DataGrid (http://blogs.adobe.com/aharui/2008/02/checkbox_selection_in_datagrid.html) and as dataProvider I have an ArrayCollection with items such this one:

name="item name" selected="true"

I would like the CheckBox list updated when the selected attribute is set to false or true in the data model.

thanks

Answer 1

By far the easiest way is to refresh the ArrayCollection after having updated some of the objects within it. There is an example of doing so at the end.

I don't believe that you are able to bind to the data within the ArrayCollection. I think that what you would need to do is extend Object (or perhaps FlashProxy) to make a custom class that, whenever some of its properties have changed, tells the Application to update the given data list in the same way we have done so manually in the example.

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx"
                       width="426" height="243"
                       showStatusBar="false">

    <fx:Script>
        <![CDATA[
            import mx.collections.ICollectionView;
            import mx.controls.Alert;
            import mx.events.CollectionEvent;
            import mx.events.FlexEvent;

            protected function randomizeData_click(event:MouseEvent):void
            {
                for each (var o:Object in data)
                {
                    o.name = Math.round(Math.random() * 100);
                    o.selected = Math.random() < 0.5;
                }

                data.refresh();
            }

        ]]>
    </fx:Script>

    <fx:Declarations>
        <s:ArrayCollection id="data">
            <fx:Object name="1" selected="false" />
            <fx:Object name="2" selected="false" />
            <fx:Object name="3" selected="true" />
            <fx:Object name="4" selected="false" />
        </s:ArrayCollection>
    </fx:Declarations>

    <mx:DataGrid id="dataGrid" dataProvider="{data}" top="10" left="10" bottom="39" right="10">
        <mx:columns>
            <mx:DataGridColumn headerText="Item" dataField="name"/>
            <mx:DataGridColumn headerText="Selected" dataField="selected" itemRenderer="mx.controls.CheckBox" />
        </mx:columns>
    </mx:DataGrid>

    <s:Button label="Randomize Data" right="10" bottom="10" click="randomizeData_click(event)"/>
</s:WindowedApplication>