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:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*" >
    <mx:Array id="arr">
        <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" />
        <mx:Object articleName="Setting an icon in an Alert control" data="14" />
        <mx:Object articleName="Setting an icon in a Button control" data="13" />
        <mx:Object articleName="Installing the latest nightly Flex 3 SDK build into Flex Builder 3" data="10" />
        <mx:Object articleName="Detecting which button a user pressed to dismiss an Alert dialog" data="9" />
        <mx:Object articleName="Using the Alert control Formatting data tips in a Slide" data="8" />
    </mx:Array>
    <mx:ArrayCollection id="AC" source="{arr}" />    

    <mx:DataGrid height="250" dataProvider="{AC}" variableRowHeight="true" width="60%" editable="true">
        <mx:columns>
            <mx:DataGridColumn dataField="data" headerText="ID" editable="false" width="125"/>
            <mx:DataGridColumn
                editable="false" wordWrap="true"
                headerText="Article Name"              
                itemRenderer="MyRenderer" dataField="articleName"/>
        </mx:columns>
    </mx:DataGrid>
</mx:Application>
 

Read the rest of this post»



4 Comments »