Setting the menu selection mode on a DataGrid control in Flex at Flex Examples

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.

March 2008
M	T	W	T	F	S	S
« Feb		Apr »
	1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

March 2008

« Feb

Apr »

8 Responses to “Setting the menu selection mode on a DataGrid control in Flex”

Feed for this Entry View blog reactions

1 Michael Matti Mar 27th, 2008 at 5:29 am

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 Mar 27th, 2008 at 7:39 am

so do i,i really don’t konw what does it do?
3 Kalle Mar 27th, 2008 at 8:39 am

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 Mar 27th, 2008 at 10:29 am

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 Mar 27th, 2008 at 1:34 pm

Now I get it!
Thanks Peter!
6 Luis Mar 27th, 2008 at 3:26 pm

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 Mar 28th, 2008 at 3:02 am

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 Mar 28th, 2008 at 6:54 am

Klaus Busse,

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

Peter