1 Reply Latest reply on Dec 5, 2006 8:27 PM by BaileyBurger

    click event for datagrid checkbox

    BaileyBurger
      Greetings,

      I'd like to be able to submit the state of a given checkbox in a datagrid when its clicked via a HTTPService or what have you, but I'm having a hard time understanding how itemEditEnd event works. Here's what I've figured so far:

      <?xml version="1.0"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" height="700" width="700">

      <mx:Script>
      <![CDATA[

      import mx.controls.Alert;
      import mx.events.DataGridEvent;
      import mx.controls.CheckBox;



      [Bindable]
      public var myDP:Array = [
      {label1:"Order #2314", contact:"John Doe", quant:3, solddate:new Date(2005, 0, 1), Sent:true},
      {label1:"Order #2315", contact:"Jane Doe", quant:3, solddate:new Date(2005, 0, 5), Sent:false} ];

      public function EditFunction(event:DataGridEvent):void
      {
      var myCheckBox:Boolean= CheckBox(myDG.itemEditorInstance).selected;
      var newVal:Boolean = myCheckBox;
      Alert.show(String(newVal));
      }

      ]]>
      </mx:Script>

      <mx:DataGrid id="myDG" dataProvider="{myDP}" variableRowHeight="true" width="500" height="250" editable="true" itemEditEnd="EditFunction(event);">
      <mx:columns>
      <mx:DataGridColumn dataField="label1" headerText="Order #" editable="false"/>
      <mx:DataGridColumn dataField="quant" headerText="Quantity" itemEditor="mx.controls.NumericStepper" editorDataField="value"/>
      <mx:DataGridColumn dataField="solddate" headerText="Date" itemRenderer="mx.controls.DateField" rendererIsEditor="true" editorDataField="selectedDate"/>
      <mx:DataGridColumn dataField="Sent" itemRenderer="mx.controls.CheckBox" rendererIsEditor="true" editorDataField="selected"/>
      </mx:columns>
      </mx:DataGrid>
      </mx:Application>

      I've got a version that uses a submit button and just cycles thru the grid array, but would like to send the values of the given label1 and checkbox when the user clicks the checkbox. Any insight would be greatly appreciated!
        • 1. Re: click event for datagrid checkbox
          BaileyBurger Level 1
          Figured it based on example from hsivaram:

          CheckRenderer.mxml
          ------------------------------------------------
          <?xml version="1.0" encoding="utf-8"?>
          <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml" width="400" height="300">
          <mx:Script>
          <![CDATA[
          public var _sel:Boolean
          public var _ix:Number
          override public function set data(value:Object):void
          {
          _sel=value.data;
          _ix=value.idx
          cx.selected = _sel
          }
          ]]>
          </mx:Script>
          <mx:CheckBox id="cx" click="parentApplication.modifyData(_ix,cx.selected)"/>
          </mx:Canvas>

          Main.mxml
          -----------------------------------
          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="setData()">
          <mx:Script>
          <![CDATA[
          import mx.collections.ArrayCollection;
          import mx.controls.Alert;

          public var arr:ArrayCollection

          public function setData():void
          {
          arr=new ArrayCollection()
          for(var i:int=0;i<17;i++)
          {
          arr.addItem({label:"image"+(i+1),data:false,idx:i})
          }
          dg.dataProvider=arr;
          }

          public function modifyData(ix:Number,sel:Boolean):void
          {
          dg.dataProvider.getItemAt(ix).data=sel
          Alert.show(dg.dataProvider.getItemAt(ix).label + ":" + dg.dataProvider.getItemAt(ix).data);
          }
          ]]>
          </mx:Script>
          <mx:DataGrid x="246" y="133" width="200" height="200" id="dg" rowHeight="25">
          <mx:columns>
          <mx:DataGridColumn headerText="Column 1" dataField="label"/>
          <mx:DataGridColumn headerText="Column 2" dataField="data" itemRenderer="CheckRenderer"/>
          </mx:columns>
          </mx:DataGrid>
          </mx:Application>