1 Reply Latest reply on Nov 29, 2006 12:46 PM by srach

    using the ITEM_EDIT_END in Datagrid

    srach
      Hi All,

      I was trying to add the the ITEM_EDIT_END event listener to a data grid. The example below is from the flex 2 help. I modified it slightly and was successfull in capturing datagrid edits the following way:

      /********************************CodeI Begins ********************************************************************************/

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

      <mx:Script>
      <![CDATA[
      import mx.controls.CheckBox;

      import mx.controls.TextInput;
      import mx.events.DataGridEvent;
      import mx.events.*;
      import flash.events.*;
      [Bindable]
      public var initDG:Array = [
      {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99, Sent:true},
      {Artist:'Pavement', Album:'Brighten the Corners', Price:11.99, Sent:true}
      ];

      // Define event listener for the itemEditEnd event.
      private function getCellInfo(event:DataGridEvent):void {

      // Get the item editor and cast it to TextInput.

      if( (event.columnIndex == 2)||( event.columnIndex == 1) ||( event.columnIndex == 0)){
      var myEditor:TextInput = TextInput(event.currentTarget.itemEditorInstance);

      // Get the new value from the editor.
      var newVal:String = myEditor.text;

      // Get the old value.
      var oldVal:String = event.currentTarget.editedItemRenderer.data[event.dataField];

      // Write out the cell coordinates, new value,
      // and old value to the TextArea control.
      cellInfo.text = "cell edited.\n";
      cellInfo.text += "Row, column: " + event.rowIndex + ", " + event.columnIndex + "\n";
      cellInfo.text += "New value: " + newVal + "\n";
      cellInfo.text += "Old value: " + oldVal;
      }
      else{
      var myEditor2:CheckBox = CheckBox(event.currentTarget.itemEditorInstance);

      // Get the new value from the editor.
      var newVal:String = myEditor2.selected.toString();

      // Get the old value.
      var oldVal:String = event.currentTarget.editedItemRenderer.data[event.dataField];

      // Write out the cell coordinates, new value,
      // and old value to the TextArea control.
      cellInfo.text = "cell edited.\n";
      cellInfo.text += "Row, column: " + event.rowIndex + ", " + event.columnIndex + "\n";
      cellInfo.text += "New value: " + newVal + "\n";
      cellInfo.text += "Old value: " + oldVal;

      }

      }
      ]]>
      </mx:Script>

      <mx:TextArea id="cellInfo" width="300" height="150"/>

      <mx:DataGrid id="myGrid" dataProvider="{initDG}" editable="true" itemEditEnd="getCellInfo(event)">
      <mx:columns>
      <mx:DataGridColumn dataField="Artist"/>
      <mx:DataGridColumn dataField="Album"/>
      <mx:DataGridColumn dataField="Price"/>
      <mx:DataGridColumn dataField="Sent" itemRenderer="mx.controls.CheckBox"
      rendererIsEditor="true" editorDataField="selected"/>
      </mx:columns>
      </mx:DataGrid>
      </mx:Application>

      /*************************************CodeI ends***************************************************************************/

      But my problem is when I do the same thing using actionscript it doesn't seem to work. My aim is to extract the data entered in the datagrid. Here is the code :

      /************************************CodeII begins****************************************************************************/

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" creationComplete="populateWindow()">
      <mx:Script>
      <![CDATA[
      import mx.controls.LinkButton;
      import flash.events.MouseEvent;
      import mx.events.*;
      import mx.events.DataGridEvent;
      import mx.controls.CheckBox;
      import mx.controls.TextArea;
      import mx.containers.VBox;
      import mx.controls.dataGridClasses.DataGridColumn;
      import mx.controls.DataGrid;
      import mx.controls.Label;
      import mx.containers.TitleWindow;
      import mx.managers.PopUpManager;
      import mx.controls.Button;
      import mx.collections.ArrayCollection;
      import mx.core.IFlexDisplayObject;

      [Bindable]
      public var ARRAY_STATEINFO:Array = [
      {State:"AB", LogA:false, LogB:false, LogC: false},
      {State:"CD", LogA:false, LogB:true, LogC: false},
      {State:"EF", LogA:true, LogB:false, LogC: false}

      ];

      // Datagrid
      var dgStateInfo:DataGrid = new DataGrid();
      var btnState: Button = new Button();
      var vbStateSetup: VBox = new VBox();
      var datagridColState:DataGridColumn = new DataGridColumn();
      var datagridColEvtLog:DataGridColumn = new DataGridColumn();
      var datagridColLED:DataGridColumn = new DataGridColumn();
      var datagridColSNMP:DataGridColumn = new DataGridColumn();
      var taTesting:TextArea = new TextArea();

      private function getCellInfo(event:DataGridEvent):void {

      // Get the item editor and cast it to TextInput.
      var myEditor2:CheckBox = CheckBox(event.currentTarget.itemEditorInstance);

      // Get the new value from the editor.
      var newVal:String = myEditor2.selected.toString();

      // Get the old value.
      var oldVal:String = event.currentTarget.editedItemRenderer.data[event.dataField];

      // Write out the cell coordinates, new value,
      // and old value to the TextArea control.
      taTesting.text = "cell edited.\n";
      taTesting.text += "Row, column: " + event.rowIndex + ", " + event.columnIndex + "\n";
      taTesting.text += "New value: " + newVal + "\n";
      taTesting.text += "Old value: " + oldVal;
      }


      // Draw the data grid using actionscript and add the event listener
      public function populateWindow():void {

      var dgColArray:Array = new Array();

      dgStateInfo.height = 100;
      dgStateInfo.x = 50;
      dgStateInfo.y =400;
      dgStateInfo.dataProvider = ARRAY_STATEINFO;
      dgStateInfo.addEventListener(DataGridEvent.ITEM_EDIT_END, getCellInfo);
      datagridColState.headerText ="State";
      dgStateInfo.enabled = true;
      datagridColState.editable="false" ;
      datagridColState.dataField="State";
      datagridColState.width=200;
      dgColArray.push( datagridColState );

      datagridColEvtLog.headerText = "LogA";
      datagridColEvtLog.dataField="Log A";
      datagridColEvtLog.itemRenderer= new ClassFactory(mx.controls.CheckBox);
      datagridColEvtLog.rendererIsEditor="true";
      datagridColEvtLog.editorDataField="selected";
      dgColArray.push( datagridColEvtLog );

      datagridColLED.headerText = "Log B";
      datagridColLED.dataField="LogB";
      datagridColLED.itemRenderer= new ClassFactory(mx.controls.CheckBox);
      datagridColLED.rendererIsEditor="true";
      datagridColLED.editorDataField="selected";
      dgColArray.push( datagridColLED );

      datagridColSNMP.headerText = "Log C";
      datagridColSNMP.itemRenderer= new ClassFactory(mx.controls.CheckBox);
      datagridColSNMP.rendererIsEditor="true";
      datagridColSNMP.editorDataField="selected";
      datagridColSNMP.dataField="LogC" ;
      dgColArray.push( datagridColSNMP );

      dgStateInfo.columns = dgColArray;
      this.setStyle( 'horizontalAlign', 'center' );
      this.addChild( dgStateInfo );

      }

      ]]>
      </mx:Script>

      <mx:TextArea id="cellInfo" width="300" height="150" x="69" y="98" />
      </mx:Application>

      /********************************************CodeII ends********************************************************************/

      Note in the above code I have :

      dgStateInfo.addEventListener(DataGridEvent.ITEM_EDIT_END, getCellInfo);
      which should be similar to
      <mx:DataGrid id="myGrid" itemEditEnd="getCellInfo(event)">

      When I run codeII thru the debugger it never goes to the Handler( getCellInfo).
      Am I doing something wrong ?????
        • 1. Re: using the ITEM_EDIT_END in Datagrid
          srach Level 1
          I found the solution to my problem. The reason it wasn't working was because
          "the response to a mouse click or key press depends on whether a cell is editable. A cell is editable when the editable properties of the DataGrid control and the DataGridColumn containing the cell are both true."
          I found this in Flex help.

          All I had to do was :
          dgStateInfo.editable = true;
          and it worked