Use the DataGrid component

Use a local data provider with a DataGrid component:

This example creates a DataGrid to display a softball team’s roster. It defines the roster in an Array ( aRoster ) and assigns it to the DataGrid’s dataProvider property.

1. In Flash, select File > New, and then select Flash File (ActionScript 3.0).

2. Drag the DataGrid component from the Components panel to the Stage.

3. In the Property inspector, enter the instance name aDg .

4. Open the Actions panel, select Frame 1 in the main Timeline, and enter the following ActionScript code:

   import fl.data.DataProvider; 
    
   bldRosterGrid(aDg); 
   var aRoster:Array = new Array(); 
   aRoster = [ 
           {Name:"Wilma Carter", Bats:"R", Throws:"R", Year:"So", Home: "Redlands, CA"},  
           {Name:"Sue Pennypacker", Bats:"L", Throws:"R", Year:"Fr", Home: "Athens, GA"}, 
           {Name:"Jill Smithfield", Bats:"R", Throws:"L", Year:"Sr", Home: "Spokane, WA"}, 
           {Name:"Shirley Goth", Bats:"R", Throws:"R", Year:"Sr", Home: "Carson, NV"}, 
           {Name:"Jennifer Dunbar", Bats:"R", Throws:"R", Year:"Fr", Home: "Seaside, CA"}, 
           {Name:"Patty Crawford", Bats:"L", Throws:"L", Year:"Jr", Home: "Whittier, CA"}, 
           {Name:"Angelina Davis", Bats:"R", Throws:"R", Year:"So", Home: "Odessa, TX"}, 
           {Name:"Maria Santiago", Bats:"L", Throws:"L", Year:"Sr", Home: "Tacoma, WA"}, 
           {Name:"Debbie Ferguson", Bats:"R", Throws:"R", Year: "Jr", Home: "Bend, OR"}, 
           {Name:"Karen Bronson", Bats:"R", Throws:"R", Year: "Sr", Home: "Billings, MO"}, 
           {Name:"Sylvia Munson", Bats:"R", Throws:"R", Year: "Jr", Home: "Pasadena, CA"}, 
           {Name:"Carla Gomez", Bats:"R", Throws:"L", Year: "Sr", Home: "Corona, CA"}, 
           {Name:"Betty Kay", Bats:"R", Throws:"R", Year: "Fr", Home: "Palo Alto, CA"}, 
   ]; 
   aDg.dataProvider = new DataProvider(aRoster); 
   aDg.rowCount = aDg.length; 
    
   function bldRosterGrid(dg:DataGrid){ 
       dg.setSize(400, 300); 
       dg.columns = ["Name", "Bats", "Throws", "Year", "Home"]; 
       dg.columns[0].width = 120; 
       dg.columns[1].width = 50; 
       dg.columns[2].width = 50; 
       dg.columns[3].width = 40; 
       dg.columns[4].width = 120; 
       dg.move(50,50); 
   };

   The bldRosterGrid() function sets the size of the DataGrid and sets the order of the columns and their sizes.

5. Select Control > Test Movie.

Specify columns and add sorting for a DataGrid component in an application

Notice that you can click any column heading to sort the DataGrid’s content in descending order by that column’s values.

The following example uses the addColumn() method to add DataGridColumn instances to a DataGrid. The columns represent player names and their scores. The example also sets the sortOptions property to specify the sort options for each column: Array.CASEINSENSITIVE for the Name column and Array.NUMERIC for the Score column. It sizes the DataGrid appropriately by setting the length to the number of rows and the width to 200.

1. In Flash, select File > New, and then select Flash File (ActionScript 3.0).

2. Drag the DataGrid component from the Components panel to the Stage.

3. In the Property inspector, enter the instance name aDg .

4. Open the Actions panel, select Frame 1 in the main Timeline, and enter the following ActionScript code:

   import fl.controls.dataGridClasses.DataGridColumn; 
   import fl.events.DataGridEvent; 
   import fl.data.DataProvider; 
   // Create columns to enable sorting of data. 
   var nameDGC:DataGridColumn = new DataGridColumn("name"); 
   nameDGC.sortOptions = Array.CASEINSENSITIVE; 
   var scoreDGC:DataGridColumn = new DataGridColumn("score"); 
   scoreDGC.sortOptions = Array.NUMERIC; 
   aDg.addColumn(nameDGC); 
   aDg.addColumn(scoreDGC); 
   var aDP_array:Array = new Array({name:"clark", score:3135}, {name:"Bruce", score:403}, {name:"Peter", score:25}) 
   aDg.dataProvider = new DataProvider(aDP_array); 
   aDg.rowCount = aDg.length; 
   aDg.width = 200;

5. Select Control > Test Movie.

Create a DataGrid component instance using ActionScript

This example creates a DataGrid using ActionScript and populates it with an Array of player names and scores.

1. Create a new Flash (ActionScript 3.0) document.

2. Drag the DataGrid component from the Components panel to the current document’s Library panel.

   This adds the component to the library but doesn’t make it visible in the application.

3. Open the Actions panel, select Frame 1 in the main Timeline, and enter the following ActionScript code:

   import fl.controls.DataGrid; 
   import fl.data.DataProvider; 
    
   var aDg:DataGrid = new DataGrid(); 
   addChild(aDg); 
   aDg.columns = [ "Name", "Score" ]; 
   aDg.setSize(140, 100); 
   aDg.move(10, 40);

   This code creates the DataGrid instance and then sizes and positions the grid.

4. Create an array, add data to the array, and identify the array as the data provider for the DataGrid:

   var aDP_array:Array = new Array(); 
   aDP_array.push({Name:"Clark", Score:3135}); 
   aDP_array.push({Name:"Bruce", Score:403}); 
   aDP_array.push({Name:"Peter", Score:25}); 
   aDg.dataProvider = new DataProvider(aDP_array); 
   aDg.rowCount = aDg.length;

5. Select Control > Test Movie.

Load a DataGrid with an XML file

The following example uses the DataGridColumn class to create the DataGrid’s columns. It populates the DataGrid by passing an XML object as the value parameter of the DataProvider() constructor.

1. Using a text editor create an XML file with the following data and save it as team.xml in the same folder where you will save the FLA file.

   <team> 
       <player name="Player A" avg="0.293" /> 
       <player name="Player B" avg="0.214" /> 
       <player name="Player C" avg="0.317" /> 
   </team>

2. Create a new Flash (ActionScript 3.0) document.

3. In the Components panel, double-click the DataGrid component to add it to the Stage.

4. In the Property inspector, enter the instance name aDg .

5. Open the Actions panel, select Frame 1 in the main Timeline, and enter the following ActionScript code:

   import fl.controls.dataGridClasses.DataGridColumn; 
   import fl.data.DataProvider; 
   import flash.net.*; 
   import flash.events.*; 
    
   var request:URLRequest = new URLRequest("team.xml"); 
   var loader:URLLoader = new URLLoader; 
    
    
   loader.load(request); 
   loader.addEventListener(Event.COMPLETE, loaderCompleteHandler); 
    
   function loaderCompleteHandler(event:Event):void { 
    
       var teamXML:XML = new XML(loader.data); 
    
       var nameCol:DataGridColumn = new DataGridColumn("name"); 
       nameCol.headerText = "Name"; 
       nameCol.width = 120; 
       var avgCol:DataGridColumn = new DataGridColumn("avg"); 
       avgCol.headerText = "Average"; 
       avgCol.width = 60; 
        
       var myDP:DataProvider = new DataProvider(teamXML); 
        
       aDg.columns = [nameCol, avgCol]; 
       aDg.width = 200; 
       aDg.dataProvider = myDP; 
       aDg.rowCount = aDg.length; 
   }

6. Select Control > Test Movie.