Displaying a checkbox column in a Flex DataGrid

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://ift.tt/rYUnH9" 
               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();
    }
}