NEVER use selectable=false for editable List or DataGrid Flex components

June 15th, 2009

It is very likely that the authors of Adobe Flex SDK have never devised the following simple use-case for both List and DataGrid components from Flex SDK:

  • “selectable” property is set to false
  • “editable” property is set to true

    To prove this fact, try to play with the following samples:

    mx:List

    Get Adobe Flash player

    Click the first row, in a List, then the itemEditor appears on the first row.
    Click the second row in a List , but the itemEditor doesn’t appear on the second row

    That’s bug SDK-15309, documented over year ago.

    mx:DataGrid

    Get Adobe Flash player

    Code listing:

    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
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                    creationComplete="initApp();"
                    width="400"
                    height="300"
                    styleName="plain"
                    paddingLeft="0"
                    paddingRight="0"
                    paddingTop="0"
                    paddingBottom="0">
     
        <mx:Script>
            <![CDATA[
                import mx.events.DataGridEvent;
     
                private function initApp():void {
                    dg.dataProvider =                     [
                        {Artist:'Carole King', Album:'Tapestry', Price:11.99},
                        {Artist:'Paul Simon', Album:'Graceland', Price:10.99},
                        {Artist:'Original Cast', Album:'Camelot', Price:12.99},
                        {Artist:'The Beatles', Album:'The White Album', Price:11.99}
                        ];
                }
     
                private function onItemEditBegin(event : DataGridEvent) : void
                {
                    trace ("DG onItemEditBegin");
                }
     
            ]]>
        </mx:Script>
        <mx:DataGrid id="dg"
                     rowHeight="20"
                     editable="true"
                     selectable="false"
                     width="100%"
                     height="100%"
                     itemEditBegin="onItemEditBegin(event)">
            <mx:columns>
                <mx:DataGridColumn
                                   dataField="Artist"
                                   width="100">
                </mx:DataGridColumn>
                <mx:DataGridColumn
                                   dataField="Album"/>
                <mx:DataGridColumn
                                   dataField="Price"/>
            </mx:columns>
        </mx:DataGrid>
    </mx:Application>

    Now, try to click on the DataGrid header, oops, you’ve just hit SDK-19436 bug (itemEditor instance is created unwillingly at first column, first row of DataGrid).

    Then try to scroll the DataGrid with scroller buttons, and again you’ve hit another, albeit similar, SDK-21726 bug (itemEditor instance is created unwillingly at first column, first row of DataGrid).

    Now scroll the contents of Datagrid a little bit down with a scroller thumb and start to edit cell in the first topmost visible row, first column, now move the current focus by pressing keyboard combination Shift+Tab, and once again, you’ve hit a SDK-16262 bug.

    To conclude this post: do not set selectable on mx:List or mx:DataGrid components to false if you are going to edit their values using itemEditors, until all above mentioned bugs will be fixed.