Using a DataGrid control as a pop up in the Flex PopUpButton control

The following example shows you how you can use a DataGrid control as a pop up in a PopUpButton control in Flex.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/01/using-a-datagrid-control-as-a-pop-up-in-the-flex-popupbutton-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Style>
        PopUpButton {
            popUpStyleName: myCustomPopUpStyleName;
        }

        .myCustomPopUpStyleName {
            fontWeight: normal;
            textAlign: left;
        }
    </mx:Style>

    <mx:Array id="arr">
        <mx:Object label="Alert" packageName="mx.controls" />
        <mx:Object label="Button" packageName="mx.controls" />
        <mx:Object label="ButtonBar" packageName="mx.controls" />
        <mx:Object label="CheckBox" packageName="mx.controls" />
        <mx:Object label="ColorPicker" packageName="mx.controls" />
    </mx:Array>

    <mx:PopUpButton id="popUpButton"
            label="Click to open..."
            openAlways="true">
        <mx:popUp>
            <mx:DataGrid dataProvider="{arr}"
                    draggableColumns="false"
                    rowCount="4"
                    width="300">
                <mx:columns>
                    <mx:DataGridColumn dataField="label"
                            headerText="Label:" />
                    <mx:DataGridColumn dataField="packageName"
                            headerText="Package name:" />
                </mx:columns>
            </mx:DataGrid>
        </mx:popUp>
    </mx:PopUpButton>

</mx:Application>

View source is enabled in the following example.

Tagged as: popUp