1 Reply Latest reply on Sep 18, 2006 5:58 AM by hsivaram

    Datagrid CheckBox Update Database

    phillips1021
      Anyone know of a good tutorial or other resource for using checkboxes in a datagrid that the user can then click on and then click on a button below the datagrid. The button click will call a function that should update the database for just the rows the user has clicked (ie update the record for that row).

      I've got the checkbox displaying on the datagrid, but I cannot figure out the code for the function to process the rows that the user checked. Is there some way to iterate over the datagrid and determine if the row's check box was selected?

      Bruce
        • 1. Re: Datagrid CheckBox Update Database
          hsivaram
          This is a sample implementation for your question:

          CheckRenderer.mxml (Item Renderer)
          ------------------------------------------------------------------------------------------ ----------
          <?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;

          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
          {
          arr.getItemAt(ix).data=sel
          }
          private function showSel():void
          {
          ta.text=""
          for(var i:int=0;i<dg.dataProvider.length;i++)
          {
          ta.text+="State of record "+i+":" +dg.dataProvider.getItemAt(i).data+"\n";
          }
          }
          ]]>
          </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:Button x="583" y="256" label="Track" click="showSel()"/>
          <mx:TextArea x="456" y="133" height="115" width="192" id="ta"/>
          </mx:Application>


          Run main.mxml. after clicking checkboxes, click on the 'Track' button which will display the selection states of each record in the textarea, Hope this helps!