1 Reply Latest reply on Nov 25, 2016 4:50 AM by Rodolpho Nascimento

    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.




          <?xml version="1.0" encoding="utf-8"?>

          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"


            xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"





          import mx.collections.ArrayCollection;

          import mx.controls.Alert;

          import mx.controls.CheckBox;

          import mx.rpc.events.AbstractEvent;


          private var ArrayItems:Array = [








          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;






          <s:State name="State1"/>




          <!-- Place non-visual elements (e.g., services, value objects) here -->


          <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:GridColumn minWidth="200" dataField="Label" headerText="Label"></s:GridColumn>

          <s:GridColumn minWidth="30" dataField="" headerText="">





          <fx:Object dataField1="Sample Data" dataField2="Sample Data" dataField3="Sample Data"></fx:Object>









        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;




        public function newInstance():*


        return new CustomRenderer();