739 Saint Louis St » Blog Archive » Datagrid popup as itemEditor

Datagrid popup as itemEditor

December 12th, 2007 by Kyle
Posted in: Flex

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:

<?xmlversion="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>

Here is the itemRenderer:

<?xmlversion="1.0" encoding="utf-8"?>

<mx:Text xmlns:mx="http://www.adobe.com/2006/mxml"
implements="mx.controls.listClasses.IDropInListItemRenderer"

    toolTip="Double Click to Edit…" doubleClick="callLater(openPopup)" doubleClickEnabled="true"
text="{txt}">
    <mx:Script>

    <![CDATA[

        import mx.controls.DataGrid;

        import mx.controls.listClasses.ListData;

        import mx.controls.dataGridClasses.DataGridListData;

        import mx.controls.listClasses.BaseListData;

        import mx.managers.PopUpManager;

        import mx.events.FlexEvent;
        private var _listData:DataGridListData;          

        [Bindable]

        public var txt:String;

        private var pop:Popup
        override public function set data(value:Object):void {

            super.data = value;   

            txt=data[_listData.dataField];

        }
        override public function get data():Object {

            return super.data;

        }            

     override public function get listData():BaseListData

        {

            return _listData;

        }

        override public function set listData(value:BaseListData):void

        {

            _listData = DataGridListData(value);

        }   
        private function openPopup():void{

            pop= Popup(PopUpManager.createPopUp(this.owner,Popup,true));

            pop.txt=this.txt;

            pop.opener=this;

        }         

        public function updateDP(str:String):void{

            var myDG:DataGrid=this.owner as DataGrid;

            var row:int=_listData.rowIndex+myDG.verticalScrollPosition;

            this.data[_listData.dataField]=str;

            myDG.dataProvider.itemUpdated(data);

        }

    ]]>

    </mx:Script>

</mx:Text>

Here is the popup:

<?xmlversion="1.0" encoding="utf-8"?>

<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
width="350"height="250" showCloseButton="false" creationComplete="centerMe()"

    defaultButton="{btnSave}"> 
    <mx:Script>

        <![CDATA[

            import mx.managers.FocusManager;

            import mx.managers.PopUpManager;
            [Bindable]

            public var txt:String;

            public var opener:Object;

            private function save():void{

                (opener as MyRenderer).updateDP(ta.text);

                cancel();

            }

            private function cancel():void{

                PopUpManager.removePopUp(this);

                returnFocus();

            }

            private function returnFocus():void{

                opener.setFocus();

            }

            private function centerMe():void{

                PopUpManager.centerPopUp(this);

                ta.setFocus();      

            }

        ]]>

    </mx:Script>
    <mx:TextArea id="ta" text="{txt}" height="100%" width="100%"/>

    <mx:ControlBar>

        <mx:HBox>

            <mx:Button id="btnSave" label="save" click="save()"/>

            <mx:Button id="btnCancel" label="cancel" click="cancel()"/>    

        </mx:HBox>

    </mx:ControlBar>

</mx:TitleWindow>