Question

I am trying to use the same custom renderer for all the columns in a spark DataGrid. I need to know the dataField or columnIndex based on which I can change state in my custom itemrenderer.

Earlier in mx:DataGrid, this can be achieved by extending the MXDataGridItemRenderer which implements IDropInListItemRenderer and hence dataGridListData property is available.

But using the spark DataGrid, I am extending the GridItemRenderer which DOES NOT implement the IDropInListItemRenderer and hence unable to access dataGridListData property. I have tried to write an action script class extending GridItemRenderer and implementing dataGridListData but flex throws an error in the set function of this variable.

Can anyone help me in accomplishing this?

// Sample itemRenderer used for mx:DataGrid [Working Code]

<fx:Script>
    <![CDATA[
        import mx.events.FlexEvent;

        import scripts.valueObjects.CellRendererVO;

        private var _cellRenderer:CellRendererVO = new CellRendererVO();
        [Bindable]
        private var _lineColor:uint = 0xFF0000;
        [Bindable]
        private var _lineWidth:int = 5;

        override public function set data(value:Object):void
        {
            //able to access the dataGridListData.dataField variable
            _cellRenderer = (value[dataGridListData.dataField] as CellRendererVO);
            currentState = _cellRenderer.stateName;
        }

        private function connectingLinesState_enterStateHandler(event:FlexEvent):void
        {
        }

        protected function orgChartNodeState_enterStateHandler(event:FlexEvent):void
        {
        }

    ]]>
</fx:Script>

<s:states>

    <s:State name="emptyState" />

    <s:State name="orgChartNodeState" enterState="orgChartNodeState_enterStateHandler(event)"/>

    <s:State name="connectingLinesState" enterState="connectingLinesState_enterStateHandler(event)"/>

</s:states>

<s:HGroup width="100%" height="100%" includeIn="orgChartNodeState"
          horizontalAlign="center" verticalAlign="middle">


</s:HGroup>

<s:HGroup width="100%" height="100%" includeIn="connectingLinesState"
          gap="0" horizontalAlign="center" verticalAlign="middle"
          paddingLeft="0" paddingRight="0" paddingTop="0"
          paddingBottom="0">


</s:HGroup>

// sample spark DataGrid itemRenderer [NOT Working]

package customComponents.myOrgChart
{
import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.listClasses.BaseListData;
import mx.controls.listClasses.IDropInListItemRenderer;
import mx.controls.listClasses.IListItemRenderer;

import spark.components.gridClasses.GridItemRenderer;

public class TestRenderer extends GridItemRenderer implements IListItemRenderer, IDropInListItemRenderer
{

    private var _listData:BaseListData;

    public function TestRenderer()
    {
        super();
    }

    override public function set data(value:Object):void
    {
        //Flex throws error here.
        //ERROR: TypeError: Error #1009: Cannot access a property or method of a null object reference.
        trace('dataField: ' + DataGridListData(listData).dataField);
    }

    public function get listData():BaseListData
    {
        return _listData;
    }

    public function set listData(value:BaseListData):void
    {
        _listData = value;
    }
}

}

Thanks,

Anji

Answer 1

The Spark GridItemRenderer still has a data property, just as any other ItemRenderer does, so you’re fine there.

What you need in addition to that is the column property, which returns a GridColumn instance. This is the same instance you probably defined in mxml when creating the DataGrid, hence it has all its properties. The ones you’ll use most are dataField and columnIndex.

For instance:

var value:* = data[column.dataField];
var index:int = data[column.columnIndex];