actionscript-3apache-flexdatagridflex3itemrenderer

ActionScript Item Renderer in DataGrid


I am using this example from blog.flexexamples.com.

I have a datagrid and trying to dynamically add button to one of datagrid column. But I want this Button as an ItemRenderer to be written in ActionScript and not MXML.

How can I do that ?

Thanks


Solution

  • I think this is what you need.

    ActionButtonItemRenderer.as :

    package
    {
        import flash.events.MouseEvent;
    
        import mx.controls.Alert;
        import mx.controls.Button;
        import mx.controls.listClasses.IDropInListItemRenderer;
        import mx.controls.listClasses.IListItemRenderer;
        import mx.core.IFlexDisplayObject;
    
        public class ActionButtonItemRenderer extends Button implements IFlexDisplayObject, IListItemRenderer, IDropInListItemRenderer
        {
            public var btn:Button;
            public function ActionButtonItemRenderer()
            {
                super();
                btn = new Button();
                btn.label = "Take Action";
                btn.addEventListener(MouseEvent.CLICK,clickHandler);
                btn.visible = btn.includeInLayout = true;
    
            }
    
            override protected function clickHandler(event:MouseEvent):void
            {
                super.clickHandler(event);
                Alert.show("Button clicked");
    
            }
        }
    }
    

    DynamicDataGridButton.mxml :

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600">
        <mx:ApplicationControlBar dock="true">
            <mx:Button label="Add column" click="init();" />
        </mx:ApplicationControlBar>
        <mx:Script>
            <![CDATA[
                import mx.collections.ArrayCollection;
                [Bindable]
                private var arr:ArrayCollection = new ArrayCollection
                    (
                        [
                            {fname:'A',lname:'B'},
                            {fname:'C',lname:'B'},
                            {fname:'D',lname:'B'}
                        ]           
                    );
    
                private function addDataGridColumn(dataField:String):void {
                    var dgc:DataGridColumn = new DataGridColumn(dataField);
                    dgc.itemRenderer = new ClassFactory(ActionButtonItemRenderer);
                    var cols:Array = dg.columns;
                    cols.push(dgc);
                    dg.columns = cols;
                }
    
                private function init():void {
                    addDataGridColumn("Details");
                }
            ]]>
        </mx:Script>
        <mx:DataGrid id="dg" dataProvider="{arr}">
            <mx:columns>
                <mx:DataGridColumn id="dgc1" dataField="fname" headerText="First Name" 
                                   width="75"/>
                <mx:DataGridColumn id="dgc2" dataField="lname" headerText=" Last Name" 
                                   width="150"/>
    
            </mx:columns>
        </mx:DataGrid>
    
    </mx:Application>