Displaying a checkbox column in a Flex DataGrid

Question

I am trying to create a custom Flex DataGrid which consists of two columns, one for label and the other for a checkbox. The checkbox is contained within a class called CustomRenderer that inherits from GridItemRenderer and implements IFactory.

In each instance of CustomRenderer, I have a variable called number so that when a checkbox is clicked, it can pass back the number so that I know which row has been clicked.

The problem is that my CustomRenderer does not show when the program runs.

Please could someone help.

Here is my code.

MyProgram.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
               initialize="initData()">

    <fx:Script> 
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.controls.Alert;
            import mx.controls.CheckBox;
            import mx.rpc.events.AbstractEvent;

            private var ArrayItems:Array = [
                {Label:'Table'},
                {Label:'Chair'},
                {Label:'Stool'},
                {Label:'Bench'},
                {Label:'Sofa'}];

            [Bindable]
            private var ArrayCollectionItems:ArrayCollection;

            private var t:CustomRenderer;

            public function initData():void
            {
                ArrayCollectionItems=new ArrayCollection(ArrayItems);

                t = new CustomRenderer();
                t.cb.addEventListener(MouseEvent.CLICK, HandleClick);
                MainGrid.columns[1].itemRenderer = t.newInstance();     
            }

            public function HandleClick(event:Event):void
            {
                var c:CustomRenderer = (event.currentTarget) as CustomRenderer
                var RowClicked:int = c.number;
            }       

        ]]>
    </fx:Script>
    <s:states>
        <s:State name="State1"/>
    </s:states>

    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <s:Panel x="99" y="14" width="379" height="268" skinClass="spark.skins.spark.PanelSkin">
        <s:DataGrid id="MainGrid" x="19" y="17" width="340" height="199"
                    dataProvider="{ArrayCollectionItems}" requestedRowCount="4" requireSelection="false"
                    resizableColumns="false" selectionMode="singleRow" showDataTips="false">
            <s:columns>
                <s:ArrayList>
                    <s:GridColumn minWidth="200" dataField="Label" headerText="Label"></s:GridColumn>
                    <s:GridColumn minWidth="30" dataField="" headerText="">                 
                    </s:GridColumn>
                </s:ArrayList>
            </s:columns>
            <s:typicalItem>
                <fx:Object dataField1="Sample Data" dataField2="Sample Data" dataField3="Sample Data"></fx:Object>
            </s:typicalItem>
        </s:DataGrid>
    </s:Panel>
</s:Application>

CustomRenderer.as

import mx.controls.Alert;
import mx.controls.CheckBox;
import mx.core.IFactory;

import spark.components.gridClasses.GridItemRenderer;

public class CustomRenderer extends GridItemRenderer implements IFactory
{   
    private static var count:int = 0;
    public var number:int;
    public var cb:CheckBox;

    public function CustomRenderer()
    {       
        cb = new CheckBox();
        number = count++;
        cb.x = 22;
        cb.y = 4;           
        addElement(cb);
    }

    public function newInstance():*
    {
        return new CustomRenderer();
    }
}

Philarmon Philarmon · Accepted Answer · 2016-11-14T08:33:03

Probably that's because you pass an instance of the itemrenderer to the column (new CustomRenderer()) instead of a class (CustomRenderer). The common approach is to pass the itemrenderer class to your column and then handle the clicks / selection inside of it:

<s:GridColumn minWidth="30" headerText="" itemRenderer="com.yourpackage.CustomRenderer">

Just start typing "Customrenderer" when you assign it and you should be able to autocomplete so it writes out your full package path.

Then you catch the checkbox select events inside of the renderer and could set some custom data property (for example, data.selected). If you really need to do something outside of your Grid after the selection you might need to fire a custom event from your renderer on selection and listen for it on your datagrid.

Displaying a checkbox column in a Flex DataGrid

1 Answers