Setting the menu selection mode on a DataGrid control in Flex

by Peter deHaan on March 26, 2008

in DataGrid

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.

{ 9 comments… read them below or add one }

1 Michael Matti March 27, 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.

Reply

2 Anonymous March 27, 2008 at 7:39 am

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

Reply

3 Kalle March 27, 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.

Reply

4 peterd March 27, 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

Reply

5 eternalko March 27, 2008 at 1:34 pm

Now I get it!
Thanks Peter!

Reply

6 Luis March 27, 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.

Reply

7 Klaus Busse March 28, 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

Reply

8 peterd March 28, 2008 at 6:54 am

Klaus Busse,

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

Peter

Reply

9 Greg Landers April 24, 2009 at 10:59 am

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.

Reply

Leave a Comment

Sorry, this blog is terrible at eating HTML comments.
If you're pasting any HTML/XML/MXML code, you need to convert your < characters to &lt; and your > characters to &gt; .

You can 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

Previous post:

Next post: