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

    Displaying a checkbox column in a Flex DataGrid

    andrewp69079881

      Hello,

       

      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();

        }

        }