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

7 thoughts on “Preventing a user from selecting an item in a Flex DataGrid control

  1. Kyle Hayes,

    Yeah, but I guess technically it is correct since you are clicking an item, and it isn’t getting selected/highlighted.
    I just added the itemClick business in there because I eventually expected somebody to ask how you could detect a click, and then I wouldn’t have to go figure it out and then reply in the comments like I actually know what I’m doing.

    Regards,
    Peter

  2. How can I disable individual rows of a datagrid? I have a grid that’s displaying current and forecasted data. I don’t want the users to be able to do anything with forecast data.

  3. I notice selectable=”false” also disables the rollover highlighting. We want to keep the rollover highlight for a visual aid but not allow the rows to be selected. I tried forcing useRollover to true but that did not work as selectable seems to take precedence. Is there a way to keep the highlighting for rollover with selectable set to false?

  4. I’ve been searching for a way to disable individual rows as well but can’t find an answer. Anyone have an idea?

    Great site, btw. I monitor it daily for solutions. Thanks so much for making it.

Comments are closed.