I have come across a few cases where it was useful to have the column and row positions within an itemRenderer and so have made this sample to demonstrate how to do that.

Here is the application code:

<mx:application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:script>
        <!–[CDATA[
            import mx.events.DataGridEvent;
            import mx.collections.ArrayCollection;

            private static var object1:Object = new Object();
                                object1.name = "Object 1";

            private static var object2:Object = new Object();
                                object2.name = "Object 2";

            private static var object3:Object = new Object();
                                object3.name = "Object 3";

            private static var object4:Object = new Object();
                                object4.name = "Object 4";

            private static var object5:Object = new Object();
                                object5.name = "Object 5";

            private static var object6:Object = new Object();
                                object6.name = "Object 6";

            private static var object7:Object = new Object();
                                object7.name = "Object 7";

            private var things:Array = [object1, object2, object3, object4, object5, object6, object7]–>
            [Bindable]
            public var thingsAC:ArrayCollection = new ArrayCollection(things);

        ]]>
    </mx:script>

    <mx:datagrid id="dg" width="510" height="100">
         draggableColumns="false" dataProvider="{thingsAC}"
         horizontalScrollPolicy="on"
         rowCount="4">

        <mx:columns>
            <mx:datagridcolumn width="200" headertext="Name" datafield="name">
            <mx:datagridcolumn width="200" headertext="Column 2" itemrenderer="MyIR">
            <mx:datagridcolumn width="200" headertext="Column 3" itemrenderer="MyIR">
            <mx:datagridcolumn width="200" headertext="Column 4" itemrenderer="MyIR">
        </mx:datagridcolumn>
    </mx:datagridcolumn>

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

Here is the code for my itemRenderer:

<mx:vbox xmlns:mx="http://www.adobe.com/2006/mxml" horizontalalign="center">
    implements="mx.controls.listClasses.IDropInListItemRenderer"
    preinitialize ="init();">

    <mx:script>
    <!–[CDATA[
        import mx.controls.DataGrid;
        import mx.controls.dataGridClasses.DataGridListData;
        import mx.controls.listClasses.BaseListData;
        import flash.events.Event;
        import mx.collections.ArrayCollection;        

        [Bindable]–>       public var _lbl:String;

        private function onChange(event:Event):void{
            var myListData:DataGridListData = DataGridListData(listData);
        }

        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;

        }  

        public function init():void {
            addEventListener("dataChange", handleDataChanged);
        }    

        public function handleDataChanged(event:Event):void {
            // Cast listData to DataGridListData.
            var myListData:DataGridListData = DataGridListData(listData);

            var row:int=myListData.rowIndex+myDG.verticalScrollPosition;
            //to make 1 based
            var col:int=myListData.columnIndex+1;

            _lbl="row: " + String(row) +
                " column: " + String(col);

        }    

        ]]>
    </mx:script>
    <mx:label id="lbl" text="{_lbl}">
</mx:label>
</mx:vbox>

Here is the running application:

This movie requires Flash Player 9

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




4 Comments »

October 23rd, 2007 by Kyle
Tags: , , , , ,
Posted in: Flex


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.




2 Comments »

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.
Read the rest of this post»




12 Comments »