I recently had a request from a customer to demonstrate how a RadioButton in a DataGrid ItemRenderer could select and entire row and indicate that a row is selected. I also had a notion to put code on my blog that demonstrated a simple ItemRenderer that implemented mx.controls.listClasses.IDropInListItemRenderer since that allows you to access data and datagrid properties easily. I seem to often be looking around for a simple example to use as a starting point for many ItemRenderer examples I produce, but can never find a “template” starting point. This entry should take care of both these things.

Here is what I came up with:
Here is the code for a simple app that demos a datagrid (this is straight from the docs, but I added a bit more data to the grid):

<mx:application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:script>
    <!–[CDATA[

        import mx.collections.ArrayCollection; 

        [Bindable]–>       public var employees:ArrayCollection = new ArrayCollection([
            {name: ‘Bob Jones’, phone: ’413-555-1212′,
                email: ‘bjones@acme.com’},
            {name: ‘Sally Smith’, phone: ’617-555-5833′,
                email: ‘ssmith@acme.com’},
            {name: ‘Bob Jones’, phone: ’413-555-1212′,
                email: ‘bjones@acme.com’},
            {name: ‘Sally Smith’, phone: ’617-555-5833′,
                email: ‘ssmith@acme.com’},
            {name: ‘Bob Jones’, phone: ’413-555-1212′,
                email: ‘bjones@acme.com’},
            {name: ‘Sally Smith’, phone: ’617-555-5833′,
                email: ‘ssmith@acme.com’},
            {name: ‘Bob Jones’, phone: ’413-555-1212′,
                email: ‘bjones@acme.com’},
            {name: ‘Sally Smith’, phone: ’617-555-5833′,
                email: ‘ssmith@acme.com’},
            {name: ‘Bob Jones’, phone: ’413-555-1212′,
                email: ‘bjones@acme.com’},
            {name: ‘Sally Smith’, phone: ’617-555-5833′,
                email: ‘ssmith@acme.com’},
            {name: ‘Bob Jones’, phone: ’413-555-1212′,
                email: ‘bjones@acme.com’},
            {name: ‘Sally Smith’, phone: ’617-555-5833′,
                email: ‘ssmith@acme.com’},
            {name: ‘Bob Jones’, phone: ’413-555-1212′,
                email: ‘bjones@acme.com’},
            {name: ‘Sally Smith’, phone: ’617-555-5833′,
                email: ‘ssmith@acme.com’},
            {name: ‘Bob Jones’, phone: ’413-555-1212′,
                email: ‘bjones@acme.com’},
            {name: ‘Sally Smith’, phone: ’617-555-5833′,
                email: ‘ssmith@acme.com’},
            {name: ‘Bob Jones’, phone: ’413-555-1212′,
                email: ‘bjones@acme.com’},
            {name: ‘Sally Smith’, phone: ’617-555-5833′,
                email: ‘ssmith@acme.com’},
            {name: ‘Bob Jones’, phone: ’413-555-1212′,
                email: ‘bjones@acme.com’},
            {name: ‘Sally Smith’, phone: ’617-555-5833′,
                email: ‘ssmith@acme.com’}
        ]);

    ]]>
    </mx:script>

    <mx:panel title="DataGrid Control Example" height="100%" width="100%">
        paddingTop="10" paddingLeft="10" paddingRight="10">

        <mx:datagrid id="dg" width="100%" height="100%">
            rowCount="5" dataProvider="{employees}" change="dg.invalidateList();">
            <mx:columns>
                <mx:datagridcolumn datafield="name" headertext="Name">
                <mx:datagridcolumn datafield="phone" headertext="Phone">
                <mx:datagridcolumn datafield="email" headertext="Email">
                <mx:datagridcolumn width="80" textalign="center" editable="false">
                    headerText="Select" itemRenderer="RBRenderer"/>
            </mx:datagridcolumn>
        </mx:datagridcolumn>
        <mx:form width="100%" height="100%">
            <mx:formitem label="Name">
                <mx:label text="{dg.selectedItem.name}">
            </mx:label>
            <mx:formitem label="Email">
                <mx:label text="{dg.selectedItem.email}">
            </mx:label>
            <mx:formitem label="Phone">
                <mx:label text="{dg.selectedItem.phone}">
            </mx:label>
        </mx:formitem>
    </mx:formitem>
</mx:formitem>
</mx:form></mx:datagridcolumn></mx:datagridcolumn></mx:columns></mx:datagrid></mx:panel></mx:application>

Here is my itemRenderer, RBRenderer.mxml:

<mx:hbox xmlns:mx="http://www.adobe.com/2006/mxml" horizontalalign="center">
    implements="mx.controls.listClasses.IDropInListItemRenderer">

    <mx:script>
    <!–[CDATA[
        import mx.controls.DataGrid;
        import mx.controls.dataGridClasses.DataGridListData;
        import mx.controls.listClasses.BaseListData;

        private var _listData:BaseListData;

        private var myDG:DataGrid;

        public function get listData():BaseListData {
          return _listData;
        }
        public function set listData( value:BaseListData ):void {
            _listData = value;
            myDG = _listData.owner as DataGrid;

        }  

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
            super.updateDisplayList(unscaledWidth, unscaledHeight);
            if(myDG){
                if(myDG.selectedItem){
                    if(myDG.selectedItem.mx_internal_uid == _listData.uid){
                        rdo.selected=true;
                    }
                    else{
                        rdo.selected=false;
                    }
                }
            }
        }   

    ]]–>
    </mx:script>
    <mx:radiobutton id="rdo" selected="false">
</mx:radiobutton>
</mx:hbox>

Note how I access the listData property and use it to access properties of the dataGrid and its data, as well as the data of the current item that is being renderer (very useful!).

Here is a link to a Flex Builder 2.0.1 project (compiled with SDK hotfix1) containing a sample demonstrating the solution described above.

Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • Slashdot
  • StumbleUpon
  • Technorati
  • TwitThis



12 Comments »