Check this example code: Example: Using a custom item editor with a Tree control In a Tree control, you often display a single label for each node in the tree. However, the data provider for each node may contain additional data that is normally hidden from view.
In this example, you use the Tree control to display contact information for different companies. The Tree control displays the company name as a branch node, and different department names within the company as leaf nodes. Selecting any node opens a custom item editor that lets you modify the phone number or contact status of the company or for any department in the company. The top node in the Tree control is not editable. Therefore, this example uses the itemEditBeginning event to determine if the user selects the top node. If selected, the event listener for the itemEditBeginning event prevents editing for occurring, as the following example shows: <?xml version="1.0"?> <!-- itemRenderers\tree\MainTreeEditor.mxml --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; width="600" height="600"> <mx:Script> <![CDATA[ import mx.events.ListEvent; import myComponents.TreeEditor; private var contacts1:Object = {label: "top", children: [ {label: "Acme", status: true, phone: "243-333-5555", children: [ {label: "Sales", status: true, phone: "561-256-5555"}, {label: "Support", status: false, phone: "871-256-5555"} ]}, {label: "Ace", status: true, phone: "444-333-5555", children: [ {label: "Sales", status: true, phone: "232-898-5555"}, {label: "Support", status: false, phone: "977-296- 5555"}, ]}, {label: "Platinum", status: false, phone: "521-256-5555"} ]}; private function initCatalog(cat:Object):void { myTree.dataProvider = cat; } // Define the event listener for the itemEditBeginning event // to disable editing when the user selects // the top node in the tree. private function disableEditing(event:ListEvent):void { if(event.rowIndex==0) { event.preventDefault(); } } // Define the event listener for the itemEditEnd event // to copy the updated data back to the data provider // of the Tree control. public function processData(event:ListEvent):void { // Disable copying data back to the control. event.preventDefault(); // Get new phone number from editor. myTree.editedItemRenderer.data.phone = TreeEditor (event.currentTarget.itemEditorInstance).contactPhone.text; // Get new status from editor. myTree.editedItemRenderer.data.status = TreeEditor (event.currentTarget.itemEditorInstance).confirmed.selected; // Close the cell editor. myTree.destroyItemEditor(); // Notify the list control to update its display. myTree.dataProvider.notifyItemUpdate(myTree.editedItemRenderer); } ]]> </mx:Script> <mx:Tree id="myTree" width="400" height="400" editable="true" itemEditor="myComponents.TreeEditor" editorHeightOffset="75" editorWidthOffset="-100" editorXOffset="40" editorYOffset="30" creationComplete="initCatalog(contacts1);" itemEditBeginning="disableEditing(event);" itemEditEnd="processData(event);"/> </mx:Application> You specify the custom item editor using the itemEditor property of a tree control. You also use the editorHeightOffset, editorWidthOffset, editorXOffset, and editorYOffset properties to position the item editor. The following item editor, defined in the file TreeEditor.mxml, lets you edit the data associated with each item in a Tree control: <?xml version="1.0" encoding="iso-8859-1"?> <!-- itemRenderers/tree/myComponents/TreeEditor.mxml --> <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml";> <mx:Script> <![CDATA[ // Define variables for the new data. public var newPhone:String; public var newConfirmed:Boolean; ]]> </mx:Script> <!-- Display item label.--> <mx:Label text="{data.label}"/> <!-- Display the text 'Phone:' and let the user edit it.--> <mx:HBox> <mx:Text text="Phone:"/> <mx:TextInput id="contactPhone" width="150" text="{data.phone}" change="newPhone=contactPhone.text;"/> </mx:HBox> <!-- Display the status using a CheckBox control and let the user edit it.--> <mx:CheckBox id="confirmed" label="Confirmed" selected="{data.status}" click="newConfirmed=confirmed.selected;"/> </mx:VBox> --- In [email protected], Alex Harui <[EMAIL PROTECTED]> wrote: > > And make sure editable=true > > From: [email protected] [mailto:[EMAIL PROTECTED] On Behalf Of Tracy Spratt > Sent: Tuesday, September 09, 2008 7:42 AM > To: [email protected] > Subject: RE: [flexcoders] Programatically Edit a Tree Node > > On DataGrid, you use editedItemPosition property. Check to see if that applies to Tree. > Tracy > > ________________________________ > From: [email protected] [mailto:[EMAIL PROTECTED] On Behalf Of Charlie Hubbard > Sent: Tuesday, September 09, 2008 9:42 AM > To: [email protected] > Subject: [flexcoders] Programatically Edit a Tree Node > > > I've googled and googled for this, but I could never find out how to invoke the itemEditor on a Tree programatically. This seems like such a simple thing. How do you do it? > > Thanks > Charlie >
