A DataGrid with a Custom ItemRenderer

Question

Hi all,
I have a DataGrid whose DataProvider is bound to a simple Array. I have a custom ItemRenderer that includes a button that can remove the item itself (I don't want two separate columns with a remove button in one of them). However, I don't understand the behaviour - clicking the button rearranges the data in the DataGrid and sometimes duplicate the entries! See the example attached. Any idea what's happening?
Martin.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="onCreationComplete();" xmlns:local="*">
    <mx:Script>
        <![CDATA[
            [Bindable]
            public var _data : Array;
            protected function onCreationComplete() : void {
                _data = new Array();
                _data.push(1, 2, 3, 4, 5);
        ]]>
    </mx:Script>
    <mx:VBox>
        <mx:DataGrid dataProvider="{_data}">
            <mx:columns>
                <mx:DataGridColumn>
                    <mx:itemRenderer>
                        <mx:Component>
                            <mx:HBox implements="mx.controls.listClasses.IDropInListItemRenderer" creationComplete="dataLabel.text = String(data);">
                                <mx:Script>
                                    <![CDATA[
                                        import mx.collections.ArrayCollection;
                                        import mx.controls.DataGrid;
                                        import mx.controls.listClasses.BaseListData;
                                        protected var _listData : BaseListData;
                                        public function get listData() : BaseListData {
                                            return _listData;
                                        public function set listData(d : BaseListData) : void {
                                            _listData = d;
                                        protected function onClick(e : Event) : void {
                                            var dp : ArrayCollection = (owner as DataGrid).dataProvider as ArrayCollection;
                                            dp.removeItemAt(listData.rowIndex);
                                    ]]>
                                </mx:Script>
                                <mx:Label id="dataLabel" width="100%" />
                                <mx:Button click="onClick(event);"/>
                            </mx:HBox>
                        </mx:Component>
                    </mx:itemRenderer>
                </mx:DataGridColumn>
            </mx:columns>
        </mx:DataGrid>
    </mx:VBox>
</mx:Application>

Answer 1

creationComplete is rarely used in renderers.  See the itemrenderer posts on my blog
Alex Harui
Flex SDK Developer
Adobe Systems Inc.
Blog: http://blogs.adobe.com/aharui