ActionScript Item Renderer in DataGrid

Question

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

Answer 1

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>

Answer 2

To dynamically create a button in AS3 syntax you would do this:

var button:Button = new Button();

Then after you've created the button, you can set it's properties like this:

button.label = "Click Me!";

And lastly you would add it to one of your items as such:

var dp:Array = [{label: "Button 1", button: button},{label: "Button 2", button: button}];
myDg.dataProvider = dp;

Then you would feed it to your datagrid that is laid out like this:

<mx:DataGrid id="myDG" variableRowHeight="true">
  <mx:columns>
    <mx:DataGridColumn dataField="label" headerText="Labels"/>
    <mx:DataGridColumn dataField="button" headerText="Buttons"/>
  </mx:columns>
</mx:DataGrid>

Not sure if that would actually work though, you may have to have an button itemRenderer on the entire column like this example.