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 http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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>

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.

 
Tagged with:
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

9 Responses to Creating a drop down DataGrid control in Flex 4

  1. John says:

    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. Evan Klein says:

    Could add a transition to this too.

  3. Rob McKeown says:

    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
    }

    • John says:

      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–

      • Peter deHaan says:

        @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

  4. John says:

    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..

  5. Deepak says:

    Hi john,
    try editState(this.label.text)
    Deepak