1 Reply Latest reply on Jan 17, 2013 12:00 AM by Supreet R

    Good example of using a spark datagrid itemEditor or rendererAsEditor ?

    iamcootis Level 1

      I've searched all over for an example for how to do this but I can't find one anywhere.

       

      I'm basically looking for an example of a datagrid that is editable, and when you edit one cell it manipulates the values of other cells in that row. Does anyone know of an example online or have one they would share with me?

       

      Thanks!

        • 1. Re: Good example of using a spark datagrid itemEditor or rendererAsEditor ?
          Supreet R

          Hi,

           

          Set the 'editable' property of Datagrid to 'true' for the Datagrid to be editable,
          if you want particular column of Datagrid to be non-editable then set that column's
          'editable' property to 'false'.

          For editing operations on the cells of datagrid you can use the following events:
          1. spark.events.GridItemEditorEvent.GRID_ITEM_EDITOR_SESSION_STARTING - Dispatched when a new item editor session has been requested.
          2. spark.events.GridItemEditorEvent.GRID_ITEM_EDITOR_SESSION_START - Dispatched immediately after an item editor has been opened.
          3. spark.events.GridItemEditorEvent.GRID_ITEM_EDITOR_SESSION_SAVE - Dispatched after the data in item editor has been saved into the data provider and the editor has been closed.
          4. spark.events.GridItemEditorEvent.GRID_ITEM_EDITOR_SESSION_CANCEL - Dispatched after the item editor has been closed without saving its data.


          The above events can be used to manipulate cells value of the same row when another cell value of the same row is edited.

           

          The  example which performs the required action,

           

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

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

                  xmlns:s="library://ns.adobe.com/flex/spark"

                  xmlns:mx="library://ns.adobe.com/flex/mx">

          <!-- Below code displays a Datagrid which changes the 'Result' as the 'Score' changes. -->

          <fx:Script>

            <![CDATA[

             import mx.collections.ArrayCollection;

             import mx.controls.Alert;

             import mx.events.FlexEvent;

            

             import spark.events.GridItemEditorEvent;

            

             [Bindable]

             private var dataProv:ArrayCollection;

            

             private const FAIL:String = "Fail";

             private const PASS:String = "Pass";

             private const THIRD:String = "Third class";

             private const SECOND:String = "Second class";

             private const FIRST:String = "First class";

             private const DISTINCTION:String = "Distinction";

            

             protected function init(event:FlexEvent):void

             {

              dataProv = new ArrayCollection();

              dataProv.addItem({score:"70",res:FIRST});

              dataProv.addItem({score:"90",res:DISTINCTION});

              dataProv.addItem({score:"35",res:PASS});

              dataProv.addItem({score:"48",res:THIRD});

              dataProv.addItem({score:"55",res:SECOND});

              dataProv.addItem({score:"30",res:FAIL});

             }

            

             protected function onEditSave(event:GridItemEditorEvent):void

             {

              // 'event.currentTarget.dataProvider' - provides the dataProvider of Datagrid.

              // 'event.rowIndex' - provides the index of the row of Datagrid that is being edited.

              // 'event.column.dataField' - provides the dataField of the column that is being edited.

             

              var score:String = (event.currentTarget.dataProvider).getItemAt(event.rowIndex)[event.column.dataField];

              var result:String = (event.currentTarget.dataProvider).getItemAt(event.rowIndex)["res"]; //here 'res' is the datafield of Result column.

              if(isNaN(Number(score))) //typeCast score from String to Number and check whether the score is number of not

              {

               Alert.show("Please enter numeric value.");

               (event.currentTarget.dataProvider).getItemAt(event.rowIndex)[event.column.dataField] = "";

               (event.currentTarget.dataProvider).getItemAt(event.rowIndex)["res"] = "";

              }

              else

              {

               var val:Number = Number(score);

               if(val >= 0 && val < 35)

                (event.currentTarget.dataProvider).getItemAt(event.rowIndex)["res"] = FAIL;

               else if(val >= 35 && val < 40)

                (event.currentTarget.dataProvider).getItemAt(event.rowIndex)["res"] = PASS;

               else if(val >= 40 && val < 50)

                (event.currentTarget.dataProvider).getItemAt(event.rowIndex)["res"] = THIRD;

               else if(val >= 50 && val < 60)

                (event.currentTarget.dataProvider).getItemAt(event.rowIndex)["res"] = SECOND;

               else if(val >= 60 && val < 85)

                (event.currentTarget.dataProvider).getItemAt(event.rowIndex)["res"] = FIRST;

               else if(val >= 85 && val <= 100)

                (event.currentTarget.dataProvider).getItemAt(event.rowIndex)["res"] = DISTINCTION;

               else

               {

                Alert.show("Please enter valid number (Range: 0 - 100).");

                (event.currentTarget.dataProvider).getItemAt(event.rowIndex)[event.column.dataField] = "";

                (event.currentTarget.dataProvider).getItemAt(event.rowIndex)["res"] = "";

               }

              }

             }

            

            ]]>

          </fx:Script>

           

          <fx:Declarations>

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

          </fx:Declarations>

           

          <s:DataGrid id="dg" width="50%" dataProvider="{dataProv}"

              editable="true"

              initialize="init(event)"

              gridItemEditorSessionSave="onEditSave(event)">

            <s:columns>

             <s:ArrayList>

              <s:GridColumn dataField="score" headerText="Score" />

              <s:GridColumn dataField="res" headerText="Result" editable="false"/>

             </s:ArrayList>

            </s:columns>

          </s:DataGrid>

          </s:WindowedApplication>