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?

Hildick

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!");
  }

Defend

sir i want to ask one thing more.How i can generate event from this Button which i put in side the datagrid. and can handle in outside datagrird.i want when i click this button an event is occur which i want handle out side from data grid...........??? – Hildick

@ali I've updated my answer to show how you can call a function outside of the DataGrid when the button is clicked. If my answer has helped answer you question, you can mark it as the accepted answer by clicking on the check mark next to my answer. :) – Defend

how can i access the id of the button <mx:Button label="My Button" click="outerDocument.myButton_clickHandler(event);" /> in myButton_clickHandler(event) to set the filled color peopery......?? – Hildick

@ali It would probably be better if you posted that as a new question with your updated code so we can see what you've tried so far. :) – Defend