This isn’t as difficult as some may think. Basically your itemRenderer opens up a popup. When the renderer creates the popup, it sets an “opener” property on the popup pointing back to “this”, which is the itemRenderer. That way, when the editing is finished in the popup, the popup can pass data back to a function in the itemRenderer to do the update, close itself, and set focus back to the itemRenderer.

Here is the code for the app:

  1.  
  2. <?xml version="1.0" encoding="utf-8"?>
  3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*" >
  4.     <mx:Array id="arr">
  5.         <mx:Object articleName="Finding out a characters Unicode character code Downloading the latest Adobe Labs version of Flex 3 SDK/Flex Builder 3 (codename: Moxie)" data="15" />
  6.         <mx:Object articleName="Setting an icon in an Alert control" data="14" />
  7.         <mx:Object articleName="Setting an icon in a Button control" data="13" />
  8.         <mx:Object articleName="Installing the latest nightly Flex 3 SDK build into Flex Builder 3" data="10" />
  9.         <mx:Object articleName="Detecting which button a user pressed to dismiss an Alert dialog" data="9" />
  10.         <mx:Object articleName="Using the Alert control Formatting data tips in a Slide" data="8" />
  11.     </mx:Array>
  12.     <mx:ArrayCollection id="AC" source="{arr}" />
  13.  
  14.     <mx:DataGrid height="250" dataProvider="{AC}" variableRowHeight="true" width="60%" editable="true">
  15.         <mx:columns>
  16.             <mx:DataGridColumn dataField="data" headerText="ID" editable="false" width="125"/>
  17.             <mx:DataGridColumn
  18.                 editable="false" wordWrap="true"
  19.                                 headerText="Article Name"
  20.                 itemRenderer="MyRenderer" dataField="articleName"/>
  21.         </mx:columns>
  22.     </mx:DataGrid>
  23. </mx:Application>
  24.  

Here is the itemRenderer:

  1.  
  2. <?xml version="1.0" encoding="utf-8"?>
  3. <mx:Text xmlns:mx="http://www.adobe.com/2006/mxml"
  4.         implements="mx.controls.listClasses.IDropInListItemRenderer"
  5.         toolTip="Double Click to Edit…" doubleClick="callLater(openPopup)" doubleClickEnabled="true"
  6.         text="{txt}">
  7.  
  8.         <mx:Script>
  9.         <![CDATA[
  10.                 import mx.controls.DataGrid;
  11.         import mx.controls.listClasses.ListData;
  12.                 import mx.controls.dataGridClasses.DataGridListData;
  13.                 import mx.controls.listClasses.BaseListData;
  14.                 import mx.managers.PopUpManager;
  15.                 import mx.events.FlexEvent;
  16.  
  17.                 private var _listData:DataGridListData;
  18.  
  19.                 [Bindable]
  20.                 public var txt:String;
  21.  
  22.                 private var pop :P opup
  23.  
  24.                 override public function set data(value:Object):void {
  25.                         super.data = value;
  26.                         txt=data[_listData.dataField];
  27.                 }
  28.  
  29.                 override public function get data():Object {
  30.                         return super.data;
  31.                 }
  32.  
  33.                 override public function get listData():BaseListData
  34.                 {
  35.                         return _listData;
  36.                 }
  37.  
  38.                 override public function set listData(value:BaseListData):void
  39.                 {
  40.                         _listData = DataGridListData(value);
  41.                 }
  42.  
  43.                 private function openPopup():void{
  44.                         pop= Popup(PopUpManager.createPopUp(this.owner,Popup,true));
  45.                         pop.txt=this.txt;
  46.                         pop.opener=this;
  47.                 }
  48.  
  49.                 public function updateDP(str:String):void{
  50.                         var myDG:DataGrid=this.owner as DataGrid;
  51.                         var row:int=_listData.rowIndex+myDG.verticalScrollPosition;
  52.                         this.data[_listData.dataField]=str;
  53.                         myDG.dataProvider.itemUpdated(data);
  54.                 }
  55.         ]]>
  56.         </mx:Script>
  57. </mx:Text>
  58.  

Here is the popup:

  1.  
  2. <?xml version="1.0" encoding="utf-8"?>
  3. <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
  4.         width="350" height="250" showCloseButton="false" creationComplete="centerMe()"
  5.         defaultButton="{btnSave}">
  6.  
  7.         <mx:Script>
  8.                 <![CDATA[
  9.                         import mx.managers.FocusManager;
  10.                         import mx.managers.PopUpManager;
  11.  
  12.                         [Bindable]
  13.                         public var txt:String;
  14.  
  15.                         public var opener:Object;
  16.  
  17.  
  18.                         private function save():void{
  19.                                 (opener as MyRenderer).updateDP(ta.text);
  20.                                 cancel();
  21.                         }
  22.  
  23.                         private function cancel():void{
  24.                                 PopUpManager.removePopUp(this);
  25.                                 returnFocus();
  26.                         }
  27.  
  28.                         private function returnFocus():void{
  29.                                 opener.setFocus();
  30.                         }
  31.  
  32.                         private function centerMe():void{
  33.                                 PopUpManager.centerPopUp(this);
  34.                                 ta.setFocus();
  35.                         }
  36.  
  37.                 ]]>
  38.         </mx:Script>
  39.  
  40.         <mx:TextArea id="ta" text="{txt}" height="100%" width="100%"/>
  41.         <mx:ControlBar>
  42.                 <mx:HBox>
  43.                         <mx:Button id="btnSave" label="save" click="save()"/>
  44.                         <mx:Button id="btnCancel" label="cancel" click="cancel()"/>
  45.                 </mx:HBox>
  46.         </mx:ControlBar>
  47. </mx:TitleWindow>
  48.  
  49.  

Browse the source of this example.
Download a zipfile containing the source to this sample.

This movie requires Flash Player 8

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Add to favorites
  • LinkedIn
  • Reddit
  • RSS
  • Slashdot
  • Technorati
  • Tumblr
  • Twitter



10 Comments »