My entry for the Adobe AIR Cookbook

Posted At : September 12, 2008 12:54 PM | Posted By : Jim
Related Categories: Adobe Air

Well, I finally decided on my entry for the Adobe AIR Cookbook contest. I had to do this for a work project and I found very little documentation on how to pull this off. My entry is the addition of a "Select/Deselect All" checkbox that will automatically select or deselect all checkboxes in a certain column of a datagrid. For my application at work, the user was selecting the checkboxes to determine which records they would be downloading to their local machine. In some cases the datagrid had several hundred entries, so checking them all manually just wouldn't do. Let's take a look at the code...

<?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;
}

//Loop over your data provider and either check or uncheck all boxes
private function selectAllCheckboxes():void{

                var allRowss: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;
            }
]]>
</mx:Script>

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

    
    <mx:CheckBox id = "selectAll" label="Select/Deselect All" click="selectAllCheckboxes();" left="10" top="175"/>


</mx:WindowedApplication>

As you can see, it looks complicated, but it's really very simple. The code simply loops over the value of each checkbox in the datagrid's data provider and gives it the same value as the "Select/Deselect All" checkbox. Once it finishes updating the datasource, it just refreshes the display. The check boxes will still function independantly from the Select All box as well. Hopefully this will get some attention.