Flex DataGrid add button to datagridcolumn using ItemRenderer?

Question

I have this code. I want to add buttons to the second data column.

<mx:DataGrid width="100%" height="95%" id="id_variableRefList" > <mx:columns> <mx:DataGridColumn id="id_name" dataField=""/> <mx:DataGridColumn id="id_strip" dataField=""> </mx:DataGridColumn> </mx:columns> </mx:DataGrid> 

How to add buttons in second column using ItemRenderer?

Answer 1

There are many ways to do this.

You can use inline itemRenderer like this:

 <fx:Script> public function myButton_clickHandler(event:Event):void { Alert.show("My button was clicked!"); } </fx:Script> <mx:DataGrid width="100%" height="95%" id="id_variableRefList" > <mx:columns> <mx:DataGridColumn id="id_name" dataField=""/> <mx:DataGridColumn id="id_strip" dataField=""> <mx:itemRenderer> <fx:Component> <mx:VBox> <mx:Button label="My Button" click="outerDocument.myButton_clickHandler(event);" /> </mx:VBox> </fx:Component> </mx:itemRenderer> </mx:DataGridColumn> </mx:columns> </mx:DataGrid> 

Or you could create a custom component and set the itemRenderer DataGridColumn property .

 <mx:DataGrid width="100%" height="95%" id="id_variableRefList" > <mx:columns> <mx:DataGridColumn id="id_name" dataField=""/> <mx:DataGridColumn id="id_strip" dataField="" itemRenderer="MyCustomItemRenderer"/> </mx:columns> </mx:DataGrid> 

UPDATE: To get the ID of the button you clicked, you can use the currentTarget property for event , which will be passed to your eventListener .

  public function myButton_clickHandler(event:Event):void { Alert.show("Button " + Button(event.currentTarget).id + " was clicked!"); }