Preventing a user from selecting an item in a Flex DataGrid control

The following example shows how you can prevent a user from selecting items in a Flex DataGrid control by setting the selectable property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/01/preventing-a-user-from-selecting-an-item-in-a-flex-datagrid-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.ListEvent;
            import mx.controls.Alert;

            private function dataGrid_itemClick(evt:ListEvent):void {
                Alert.show(evt.itemRenderer.data.label, evt.type);
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object label="Alert" />
        <mx:Object label="Button" />
        <mx:Object label="ButtonBar" />
        <mx:Object label="CheckBox" />
        <mx:Object label="ColorPicker" />
        <mx:Object label="ComboBox" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:CheckBox id="checkBox"
                label="selectable:"
                labelPlacement="left"
                selected="true" />
    </mx:ApplicationControlBar>

    <mx:DataGrid id="dataGrid"
            dataProvider="{arr}"
            selectable="{checkBox.selected}"
            rowCount="4"
            width="200"
            change="dataGrid_itemClick(event);"
            itemClick="dataGrid_itemClick(event);">
        <mx:columns>
            <mx:DataGridColumn dataField="label" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

View source is enabled in the following example.

As you can see, if you click an item in a DataGrid control when the selectable property is false, only the itemClick event is dispatched, but if the selectable property is true, both the change and itemClick events are dispatched.

If you just want to disable the roll over highlighting, see “Disabling item roll over highlighting in the Flex DataGrid control”.

Tagged as: itemClick, selectable