Pop up in flex tree item renderer

Question

I have an mx:tree with with TreeItemRenderer as below.

Parent1 (Delete | Rename)
Child1
Child2
Parent2 (Delete | Rename)
Child3
Child4

Delete and Rename are link buttons

Now when i click Rename a popUp should be shown like

    OldName       : Parent1(Text Input showning present Name)
    Enter New Name: Parent1NewName(Text Input for entering New name) 

         OK | CANCEL Buttons

Afetr Entering the new name,click OK,popup should be closed and need to get the value in the treeItemRenderer.

I have the logic to rename the Parent1 in TreeItemRenderer and also I m able to get the Parent1 in the popup OldName TextInput.But after entering the new name i m not able to get that new name in the TreeItemRenderer.Please help me out

Thanks in advance:)

What kind data your tree data provider consists of? – Constantiner May 09 '11 at 09:22 — Constantiner, May 09 '11 at 09:22

score 0 · Accepted Answer · answered May 09 '11 at 12:29

You have two ways to reach your goal:

1) Pass current XML node to your dialog instead of pure label (as in your current implementation). When user press Ok just replace old label in XML with new one as in the following sample code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application layout="absolute" xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
    <![CDATA[
        [Bindable]
        private var rawData:XML = <tree><parent label="Parent1"><child label="Child1"/><child label="Child2"/></parent>
                <parent label="Parent2"><child label="Child3"/><child label="Child4"/></parent></tree>;

        private function displayLabel(node:XML):String
        {
            return node.@label;
        }
    ]]>
    </mx:Script>
    <mx:VBox horizontalCenter="0" verticalCenter="0">
        <mx:Tree dataProvider="{rawData}" height="300" id="tree" labelFunction="displayLabel" showRoot="false"
            width="300" />
        <mx:HBox enabled="{tree.selectedItem}">
            <mx:TextInput id="labelEdit" text="{tree.selectedItem ? tree.selectedItem.@label : ''}" />
            <mx:Button click="tree.selectedItem.@label = labelEdit.text" label="Apply" />
        </mx:HBox>
    </mx:VBox>
</mx:Application>

2) Create custom event class with label field and "labelSubmit" and "labelCancel" events and fire it from your dialog passing new label value with "labelSubmit" event. And set new label to XML node (as described above) in dialog's event handler.

Pop up in flex tree item renderer

1 Answers1