Apache – Selecting row on selection of CheckBox in Datagrid

We wanted to have a checkbox in a datagrid that allowed multiple selections. We extended the DataGrid object:

package obj
{
import mx.controls.DataGrid;
import flash.display.Sprite;
import flash.events.KeyboardEvent;
import mx.controls.CheckBox;
import mx.controls.listClasses.IListItemRenderer;

public class CheckboxDataGrid extends DataGrid
{

    override protected function selectItem(item:IListItemRenderer,
                              shiftKey:Boolean, ctrlKey:Boolean,
                              transition:Boolean = true):Boolean
    {
        // only run selection code if a checkbox was hit and always
        // pretend we're using ctrl selection
        if (item is CheckBox)
            return super.selectItem(item, false, true, transition);
        return false;
    }

    // turn off selection indicator
    override protected function drawSelectionIndicator(
                                indicator:Sprite, x:Number, y:Number,
                                width:Number, height:Number, color:uint,
                                itemRenderer:IListItemRenderer):void
    {
    }

    // whenever we draw the renderer, make sure we re-eval the checked state
    override protected function drawItem(item:IListItemRenderer,
                                selected:Boolean = false,
                                highlighted:Boolean = false,
                                caret:Boolean = false,
                                transition:Boolean = false):void
    {
        CheckBox(item).invalidateProperties();
        super.drawItem(item, selected, highlighted, caret, transition);
    }

    // fake all keyboard interaction as if it had the ctrl key down
    override protected function keyDownHandler(event:KeyboardEvent):void
    {
        // this is technically illegal, but works
        event.ctrlKey = true;
        event.shiftKey = false;
        super.keyDownHandler(event);
    }

}
}

We also created a CheckboxRenderer:

package obj
{
import flash.display.DisplayObject;
import flash.events.KeyboardEvent;
import flash.events.MouseEvent;
import flash.text.TextField
import mx.controls.CheckBox;
import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.listClasses.ListBase

public class CheckBoxRenderer extends CheckBox
{
    public function CheckBoxRenderer()
    {
        focusEnabled = false;
    }

    override public function set data(value:Object):void
    {
        super.data = value;
        invalidateProperties();
    }

    override protected function commitProperties():void
    {
        super.commitProperties();
        if (owner is ListBase)
            selected = ListBase(owner).isItemSelected(data);
    }

    /* eat keyboard events, the underlying list will handle them */
    override protected function keyDownHandler(event:KeyboardEvent):void
    {
    }

    /* eat keyboard events, the underlying list will handle them */
    override protected function keyUpHandler(event:KeyboardEvent):void
    {
    }

    /* eat mouse events, the underlying list will handle them */
    override protected function clickHandler(event:MouseEvent):void
    {
    }

    /* center the checkbox if we're in a datagrid */
    override protected function updateDisplayList(w:Number, h:Number):void
    {
        super.updateDisplayList(w, h);

        if (listData is DataGridListData)
        {
            var n:int = numChildren;
            for (var i:int = 0; i < n; i++)
            {
                var c:DisplayObject = getChildAt(i);
                if (!(c is TextField))
                {
                    c.x = (w - c.width) / 2;
                    c.y = 0;
                }
            }
        }
    }
}
}

Then in your flash page:

<obj:CheckboxDataGrid id="notificationsCheckboxGrid"
dataProvider="{_myModel._grid}"
allowMultipleSelection="true"
showHeaders="false"                            
change="emailAddressesSelected()">
<qmsAdmin:columns>                                     
    <mx:DataGridColumn width="20" sortable="false" itemRenderer="CheckBoxRenderer"/>
    <mx:DataGridColumn width="150" dataField="email"/>
    <mx:DataGridColumn dataField="notificationType"/>
</qmsAdmin:columns>     
</obj:CheckboxDataGrid>

Notice the change method "emailAddressesSelected()". Calls this method:

private function emailAddressesSelected():void
{
_emailAddressIndexesSelected = notificationsCheckboxGrid.selectedIndices;
}

_emailAddressIndexesSelected is just an Array object in the class defined as:

private var _emailAddressIndexesSelected:Array;

The Adobe Cookbook offers a solution for your problem: Datagrid headerRenderer checkbox to select checkboxes in the row