Flex dataGrid add button in datagridcolumn using ItemRenderer?

Question

I have this code. I want to add Buttons in the second column of the data grird.

<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 can I add buttons in second column using an ItemRenderer?

Answer 1

There are many ways you can do this.

You could use an inline itemRenderer like so:

<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 property of the DataGridColumn.

<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 that was clicked, you can use the currentTarget property of the event that gets passed to your eventListener.

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