Creating a drop down DataGrid control in Flex 4

The following example shows how you can create a drop down MX DataGrid control in Flex 4 using the Spark PopUpAnchor control in Flex 4.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.

For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/03/09/creating-a-drop-down-datagrid-control-in-flex-4/ -->
<s:Application name="Spark_PopUpAnchor_DataGrid_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:layout>
        <s:VerticalLayout horizontalAlign="center" paddingTop="20" />
    </s:layout>
 
    <s:Group>
        <s:Button label="Pop up DataGrid"
                click="popUpAnc.displayPopUp = !popUpAnc.displayPopUp;" />
        <s:PopUpAnchor id="popUpAnc"
                popUpPosition="below"
                width="100%" height="100%">
            <mx:DataGrid>
                <mx:dataProvider>
                    <s:ArrayList>
                        <fx:Object c1="Row 1, Column 1" c2="Row 1, Column 2" />
                        <fx:Object c1="Row 2, Column 1" c2="Row 2, Column 2" /> 
                        <fx:Object c1="Row 3, Column 1" c2="Row 3, Column 2" /> 
                        <fx:Object c1="Row 4, Column 1" c2="Row 4, Column 2" /> 
                        <fx:Object c1="Row 5, Column 1" c2="Row 5, Column 2" /> 
                        <fx:Object c1="Row 6, Column 1" c2="Row 6, Column 2" /> 
                        <fx:Object c1="Row 7, Column 1" c2="Row 7, Column 2" /> 
                        <fx:Object c1="Row 8, Column 1" c2="Row 8, Column 2" /> 
                        <fx:Object c1="Row 9, Column 1" c2="Row 9, Column 2" /> 
                    </s:ArrayList>
                </mx:dataProvider>
            </mx:DataGrid>
        </s:PopUpAnchor>
    </s:Group>
 
</s:Application>

[GoogleAdsWide]

View source is enabled in the following example.

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

9 thoughts on “Creating a drop down DataGrid control in Flex 4

  1. Hi…

    I am really new to Flex, I mean I am just 2 weeks doing Flex. I had encountered some difficulties…

    I had a button and the click event will call a function that returns a value of type string.

    Below is the code;
    click=”editState()”

    This event cannot be raised as this function requires a string value to pass and executes the function.

    Below is the function code;
    private function editState(passedValue:String):void {
    //code goes here
    }

    Now, what I want to do is to capture a label.text value and put it in the call function under click event but how am I supposed to do that? I tried putting like editState(’label.text’). Sorry, I am very new… Please advice

    –John–

  2. John – What you want to do is:

    click=”editState(Button(event.currentTarget).label)”

    Typically though, you would pass the event as the parameter and then access the currentTarget from your handler:

    private function editState(event:Event):void {
    var passedValue:String = Button(event.currentTarget).label;
    //code goes here
    }

    1. Thanks for you respond,

      I’ve modified my code like what u said and i got an error “1067: Implicit coercion of a value of type String to an unrelated type flash.events:Event.

      Hope you can help..

      –John–

      1. @John,

        What about something like this:

        <?xml version="1.0" encoding="utf-8"?>
        <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
         
            <mx:Script>
                <![CDATA[
                    import mx.controls.Alert;
         
                    private function editState(passedValue:String):void {
                        Alert.show("You entered: " + passedValue);
                    }
                ]]>
            </mx:Script>
         
            <mx:TextInput id="lbl" />
         
            <mx:Button id="myBtn"
                       label="mx:Button"
                       click="editState(lbl.text);" />
         
        </mx:Application>

        Peter

  3. Hi Peter,

    Thanks for your respond. Yes I know that code works but somehow when I do that, it appears that the page do not recognize the label and resulting an error of “1120: Access of undefined property lblTry.”. Any ideas of why it is happening? I tried pasting my code here but somehow the page thought my comments are spams.

    Hope you can help..

Comments are closed.