The following example shows how you can set the menu selection mode on a Flex DataGrid control by setting the menuSelectionMode property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/26/setting-the-menu-selection-mode-on-a-datagrid-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Array id="arr">
        <mx:Object c1="1a" c2="1b" />
        <mx:Object c1="2a" c2="2b" />
        <mx:Object c1="3a" c2="3b" />
        <mx:Object c1="4a" c2="4b" />
        <mx:Object c1="5a" c2="5b" />
        <mx:Object c1="6a" c2="6b" />
        <mx:Object c1="7a" c2="7b" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="menuSelectionMode:">
                <mx:CheckBox id="checkBox" selected="false" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:DataGrid id="dataGrid"
            dataProvider="{arr}"
            menuSelectionMode="{checkBox.selected}" />

</mx:Application>

View source is enabled in the following example.

 
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.

11 Responses to Setting the menu selection mode on a DataGrid control in Flex

  1. Michael Matti says:

    So, what exactly does menuSelectionMode do for a DataGrid? It’s great to have these live examples, but in this case, I can’t find any difference in the grid after clicking the checkbox.

  2. Anonymous says:

    so do i,i really don’t konw what does it do?

  3. Kalle says:

    Try “dragging” a selection.
    If menuSelectionMode is on it will behave like an application menubar,
    at least as far as I can tell.
    Ie. it’ll end up selection the row where the mouse-button-up-event occurs.

  4. peterd says:

    With the menuSelectionMode CheckBox deselected, try clicking on row 2, keeping the mouse button down and then dragging and releasing over row 5. Row 2 should still be selected.
    Do the same thing with the menuSelectionMode CheckBox selected. Now when dragging your mouse you should see the rows highlight and select the item that your cursor was over when you released the button. So, in this case row 5 should be selected.

    Peter

  5. eternalko says:

    Now I get it!
    Thanks Peter!

  6. Luis says:

    Hello I have a web www.worldletting.com and I would like to make it with flex and some database. Can you explain in diferents articles how can I make filters. For example when some user select “Property type” how can I present my diferents properties depending the type of the property that was selected.

    Which database you recomend me?

    Thanks a lot. Your blog is excelent.

  7. Klaus Busse says:

    Mmmh, here the selection in menu selection mode switches not before a mouse move.

    So if menuSelectionMode is on, and I drag from row 2 to row 5, row 2 stays selected until I make the next mouse move after the mouse up. Any idea how to fix it?

    Thanks

    Klaus

  8. peterd says:

    Klaus Busse,

    Which version of Flex are you using (201? 3?)

    Peter

  9. Greg Landers says:

    I have been scratching my on this one trying to figure out what the real application of this feature would be? It seems to be pointless from what I can figure. I am sure I am missing something though.

  10. Anonymous says:

    The following example shows how you can write blogs on flexexamples by setting the writeBlogs property.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree