Flex 4 - DataGrid with Button in cells

Anonymous1 picture Anonymous1 · Feb 15, 2011 · Viewed 8.6k times · Source

How can I add a button control in cells of a datagrid? I'm looking to have a button in each row of one column in the datagrid. The datagrid control rows don't need to be selectable in any way.

Answer

Ian T picture Ian T · Feb 15, 2011

It's really quite simple. Just define a custom item renderer for the column

<mx:DataGrid width="100%" height="100%" dataProvider="{this.someData}">
        <mx:columns>                
            <mx:DataGridColumn headerText="Buttons" >
                <mx:itemRenderer>
                    <fx:Component>
                        <s:ItemRenderer width="100%">
                            <s:Button label="{data.buttonName}" click="{outerDocument.someFunction()}" />
                        </s:ItemRenderer>
                    </fx:Component>
                </mx:itemRenderer>
            </mx:DataGridColumn>
       </mx:columns>
</mx:DataGrid>

use data to refer to the row's dataprovider object and outerDocument to access methods outside of the item renderer.

Hope this helps!