Extending DataGrid component, and adding buttons to it

Question

I'd like to extend the standard DataGrid component in flex with mxml. But I want to add buttons to the bottom of the component. I've tried attempting the following but its not working...

Am I adding the Button to the wrong element?

<mx:DataGrid xmlns:fx = "http://ns.adobe.com/mxml/2009"
             xmlns:mx = "library://ns.adobe.com/flex/mx"
             xmlns:s = "library://ns.adobe.com/flex/spark">

    <fx:Script>
        <![CDATA[
            override protected function createChildren():void
            {
                super.createChildren();

                listContent.addChild(button);
            }
        ]]>
    </fx:Script>

    <s:Button id="button" label = "asdasdas"/>
</mx:DataGrid>

JeffryHouser JeffryHouser · Accepted Answer · 2011-02-09T16:54:42

You need to define "Not working"! Are you getting compiler errors? Or runtime errors? Or is the button just not showing up? I'll assume the latter.

The DataGrid does not have any mechanism for positioning or laying out it's children. Your button most likely has a height and width of zero and resides at position 0,0; making it effectively invisible. Many Flex container classes have the ability to size and position their children; but the DataGrid is not a container and does not provide built in functionality for that. It focuses, primarily, on working with the columns array.

You will need to override the updateDisplayList() to position the function. Quite possibly you will need to make changes to commitProperties() and measure() along the way. You may also need to re-work how the columns are positioned and sized as to not interfere with your new button. If stuff is locked away in private methods (which is probable) then you're in a for a not-so-fun-time.

Read up on the Flex Component LifeCycle methods for more information and also review the DataGrid code to figure out what it does.

You may have an easier time just putting the button and DataGrid in a container, and treating that container as a single entity instead of trying to get a Button renderered inside of the DataGrid.

Extending DataGrid component, and adding buttons to it

2 Answers