Select all checkboxes in a datagrid

This problem origianlly came about in a project I was working on for a customer.  I had a datagrid that had a checkbox in the first column of each row.  The user selected this box to determine if they were going to download the selected record to their local database.  The question came up "what if I want all of them?".  I figured it would be easy enough to add a "Select All" box.  I searched around on the regular blogs to see if it had been done before, but I found little to nothing during my search.  What I came up with was a function that loops over my data and simply assigns it the value of the "Select All" box.  After the values are assigned, the data grid is refreshed.

First thing I did was set up a data provider using an Array Collection and initialized it at creation complete:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initgridData();">
   
    <mx:Script>
       <![CDATA[
            //For this example, I'm using an ArrayCollection for my data provider.  This data could also come from
            //the local SQLite database or from a CFC calling to a remote server.
            import mx.collections.ArrayCollection;
           
            [Bindable]
            private var gridData:ArrayCollection = new ArrayCollection([
                {checked:false, name:'Jim Leether', address:'123 Spruce Street', phone:'(555)555-1234'},
                {checked:false, name:'Yancy Wharton', address:'728 Main Street', phone:'(555)555-4926'},
                {checked:false, name:'Anne Smith', address:'923 Log Cabin Lane', phone:'(555)555-7365'},
                {checked:false, name:'Robert Davidson', address:'498 Electric Avenue', phone:'(555)555-1674'},
                {checked:false, name:'Cathy Perdue', address:'246 Cedar Drive', phone:'(555)555-2795'},
                {checked:false, name:'Tom Jones', address:'562 Division Street', phone:'(555)555-4965'}]);
        
            //Initialize your data provider at creation complete
            public function initgridData():void {
                myDataGrid.dataProvider = gridData;
            }

        ]]>
    </mx:Script>

I set up a datagrid to hold this information, using an item renderer to add the check boxes.

<!-- Create a DataGrid with a check box in the first column using the mx:itemRenderer tag -->
    <mx:DataGrid id="myDataGrid" left="10" top="10">
        <mx:columns>
            <mx:DataGridColumn headerText="Selected" textAlign="center" dataField="checked" width="90">
                <mx:itemRenderer>
                    <mx:Component>
                        <mx:CheckBox click="data.checked=!data.checked" selected="{data.checked}"/>
                    </mx:Component>
                </mx:itemRenderer>
            </mx:DataGridColumn>
            <mx:DataGridColumn headerText="Name" dataField="name" width="110"/>
            <mx:DataGridColumn headerText="Address" dataField="address" width="150"/>
            <mx:DataGridColumn headerText="Phone" dataField="phone" width="110"/>
        </mx:columns>
    </mx:DataGrid>

Add a checkbox that will fire the function to select or deselect all boxes in the data grid.

<!-- This checkbox will call the function that selects or deselects all the checkboxes in the datagrid -->
    <mx:CheckBox id = "selectAll" label="Select/Deselect All" click="selectAllCheckboxes();" left="10" top="175"/>

Here is the function used to check or uncheck all the boxes:

 //Loop over your data provider and either check or uncheck all boxes
            private function selectAllCheckboxes():void{
   
                var allRows:int = gridData.length;
               
                for (var i:int = 0; i < allRows; i++){
                    if (selectAll.selected == true){
                        trace ("Checked is true");
                        gridData[i].checked = true;
                    }else{
                        trace ("Checked is false");
                        gridData[i].checked = false;
                    }
                }
               
                //After the loop, reset the data provider to refresh the check boxes
                myDataGrid.dataProvider = gridData;
            }

You'll notice that once the loop completes, the data provider for the grid is called again, refreshing the display of the checkboxes.  This allows the user to check all, uncheck all, or select only the records they want to use.

Complete source code can be viewed at http://www.jimleether.com/index.cfm/2008/9/12/My-entry-for-the-Adobe-AIR-Cookbook