Using skins with the DataGrid

1. Create a new Flash file (ActionScript 3.0).
2. Drag the DataGrid component to the Stage and give it an instance name of aDg.
3. Double-click the component to open its palette of skins.
4. Set the zoom control to 400% to enlarge the icons for editing.
5. Double-click the HeaderRenderer skin to open the palette of HeaderRenderer skins.
6. Double-click the Up_Skin to open it in symbol-editing mode and click its background until it is selected and the Fill color picker appears in the Property inspector.
7. Select color #00CC00 using the Fill color picker to apply it to the background of the Up_Skin HeaderRenderer skin.
8. Click the Back button at the left side of the edit bar above the Stage to return to document-editing mode.
9. Add the following code to the Actions panel on Frame 1 of the Timeline to add data to the DataGrid:

   import fl.data.DataProvider;
   
   bldRosterGrid(aDg);
   var aRoster:Array = new Array();
   aRoster = [
           {Name:"Wilma Carter",  Home: "Redlands, CA"}, 
           {Name:"Sue Pennypacker",  Home: "Athens, GA"},
           {Name:"Jill Smithfield",  Home: "Spokane, WA"},
           {Name:"Shirley Goth", Home: "Carson, NV"},
           {Name:"Jennifer Dunbar",  Home: "Seaside, CA"}
   ];
   aDg.dataProvider = new DataProvider(aRoster);
   function bldRosterGrid(dg:DataGrid){
       dg.setSize(400, 130);
       dg.columns = ["Name", "Home"];
       dg.move(50,50);
       dg.columns[0].width = 120;
       dg.columns[1].width = 120;
   };
   

10. Select Control > Test Movie to test the application.

The DataGrid should appear as it does in the following illustration with the background of the header row in green.