Setting the menu selection mode on a DataGrid control in Flex

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.

11 thoughts on “Setting the menu selection mode on a DataGrid control in Flex

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

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

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

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

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

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

Comments are closed.