I can’t count the number of times upon starting to work on a datagrid issue that I turn to the flex docs and copy the code sample at the bottom of the Datagrid API page. Then I usually search around for a simple sample of an itemRenderer that fits my needs. I decided it was high time I posted a simple sample that combined those needs into one sample and was located in an easy place for me and everyone else to find…my blog.

Here is the sample code for the app:

<mx:application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:xmllist id="employees">
        <iployee>
            <name>Christina Coenraets</name>
<phone>555-219-2270</phone>
            <iail>ccoenraets@fictitious.com</iail>
            <active>true</active>
        </iployee>
        <iployee>
            <name>Joanne Wall</name>
<phone>555-219-2012</phone>
            <iail>jwall@fictitious.com</iail>
            <active>true</active>
        </iployee>
        <iployee>
            <name>Maurice Smith</name>
<phone>555-219-2012</phone>
            <iail>maurice@fictitious.com</iail>
            <active>false</active>
        </iployee>
        <iployee>
            <name>Mary Jones</name>
<phone>555-219-2000</phone>
            <iail>mjones@fictitious.com</iail>
            <active>true</active>
        </iployee>
    </mx:xmllist>      

    <mx:datagrid dataprovider="{employees}" width="600" height="400" editable="true">
        <mx:columns>
            <mx:datagridcolumn headertext="Name" datafield="name">
            <mx:datagridcolumn headertext="Phone" datafield="phone">
            <mx:datagridcolumn headertext="Email" datafield="email" itemrenderer="EmailRenderer">
        </mx:datagridcolumn>
    </mx:datagridcolumn>

</mx:datagridcolumn>
</mx:columns></mx:datagrid></mx:application>

Here is the code for the itemrenderer:

<mx:label xmlns:mx="http://www.adobe.com/2006/mxml">
    width="100%" height="100%" paddingLeft="3"
    fontWeight="{currentWeight}" fontStyle="{currentStyle}" >

    <mx:script>
        <!–[CDATA[

            import mx.controls.dataGridClasses.DataGridListData;
            import mx.controls.listClasses.BaseListData;
            import mx.events.FlexEvent;

            private var _listData:DataGridListData;
            [Bindable]–>           private var currentWeight:String = "normal";
            [Bindable]
            private var currentStyle:String = "normal";

            [Bindable]
            override public function set data(value:Object):void{
                super.data = value;
                if(data){
                    currentStyle = (data.active == "false" ? "italic" : "normal");
                }
                dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
            }

            override public function get data():Object {
                return super.data;
            }

            [Bindable("dataChange")]
            override public function get listData():BaseListData
            {
                return _listData;
            }

            override public function set listData(value:BaseListData):void
            {
                _listData = DataGridListData(value);
                text=_listData.label;
                currentWeight = _listData.label == "ccoenraets@fictitious.com" ? "bold" : "normal";
                if(data){
                    currentStyle = (data.active == "false" ? "italic" : "normal");
                }
            }
        ]]>
    </mx:script>
</mx:label>

Here is the running app:

This movie requires Flash Player 9

Browse the source of this example.
Download a zipfile containing the source to this sample.


No Comments »