Customize the DataGrid component

A DataGrid object can have multiple columns and you can specify different cell renderers for each column. Each column of a DataGrid is represented by a DataGridColumn object and the DataGridColumn class includes a cellRenderer property, for which you can define the CellRenderer for the column.

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

2. Drag the DataGrid component to the Library panel.

3. Add the following code to the Actions panel on Frame 1 of the Timeline. This code creates a DataGrid with a long string of text in the third column. At the end, it sets the column’s cellRenderer property to the name of a cell renderer that renders a multiline cell.

   /* This is a simple cell renderer example.It invokes 
   the MultiLineCell cell renderer to display a multiple  
   line text field in one of a DataGrid's columns. */ 
    
   import fl.controls.DataGrid; 
   import fl.controls.dataGridClasses.DataGridColumn; 
   import fl.data.DataProvider; 
   import fl.controls.ScrollPolicy; 
    
   // Create a new DataGrid component instance. 
   var aDg:DataGrid = new DataGrid(); 
    
   var aLongString:String = "An example of a cell renderer class that displays a multiple line TextField" 
   var myDP:Array = new Array(); 
   myDP = [{firstName:"Winston", lastName:"Elstad", note:aLongString, item:100}, 
       {firstName:"Ric", lastName:"Dietrich", note:aLongString, item:101},  
       {firstName:"Ewing", lastName:"Canepa", note:aLongString, item:102},  
       {firstName:"Kevin", lastName:"Wade", note:aLongString, item:103},      
       {firstName:"Kimberly", lastName:"Dietrich", note:aLongString, item:104},  
       {firstName:"AJ", lastName:"Bilow", note:aLongString, item:105},  
       {firstName:"Chuck", lastName:"Yushan", note:aLongString, item:106},     
       {firstName:"John", lastName:"Roo", note:aLongString, item:107}, 
   ]; 
    
   // Assign the data provider to the DataGrid to populate it. 
   // Note: This has to be done before applying the cellRenderers. 
   aDg.dataProvider = new DataProvider(myDP); 
    
   /* Set some basic grid properties. 
   Note: The data grid's row height should reflect 
   the number of lines you expect to show in the multiline cell. 
   The cell renderer wil size to the row height. 
   About 40 for 2 lines or 60 for 3 lines.*/ 
    
   aDg.columns = ["firstName", "lastName", "note", "item"]; 
   aDg.setSize(430,190); 
   aDg.move(40,40); 
   aDg.rowHeight = 40;// Allows for 2 lines of text at default text size. 
   aDg.columns[0].width = 70; 
   aDg.columns[1].width = 70; 
   aDg.columns[2].width = 230; 
   aDg.columns[3].width = 60; 
   aDg.resizableColumns = true; 
   aDg.verticalScrollPolicy = ScrollPolicy.AUTO; 
   addChild(aDg); 
   // Assign cellRenderers. 
   var col3:DataGridColumn = new DataGridColumn(); 
   col3 = aDg.getColumnAt(2); 
   col3.cellRenderer = MultiLineCell;

4. Save the FLA file as MultiLineGrid.fla.

5. Create a new ActionScript file.

6. Copy the following ActionScript code into the Script window:

   package { 
    
    
       import fl.controls.listClasses.CellRenderer; 
    
       public class MultiLineCell extends CellRenderer 
       { 
            
           public function MultiLineCell() 
           {     
               textField.wordWrap = true; 
               textField.autoSize = "left"; 
           } 
           override protected function drawLayout():void {             
               textField.width = this.width; 
               super.drawLayout(); 
           } 
       } 
   }

7. Save the ActionScript file as MultiLineCell.as in the same folder where you saved the MultiLineGrid.fla.

8. Return to the MultiLineGrid.fla application and select Control > Test Movie.

   The DataGrid should look like this:

   

   DataGrid for the MultiLineGrid.fla application

You can set the text style for a header row by using the headerTextFormat style. The following example uses the TextFormat object to set the headerTextFormat style to use the Arial font, the color red, a font size of 14, and italic.

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

2. Drag the DataGrid component to the Stage and give it an instance name of aDg .

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

   import fl.data.DataProvider; 
   import fl.controls.dataGridClasses.DataGridColumn; 
    
   var myDP:Array = new Array(); 
   myDP = [{FirstName:"Winston", LastName:"Elstad"}, 
       {FirstName:"Ric", LastName:"Dietrich"},  
       {FirstName:"Ewing", LastName:"Canepa"},  
       {FirstName:"Kevin", LastName:"Wade"},      
       {FirstName:"Kimberly", LastName:"Dietrich"},  
       {FirstName:"AJ", LastName:"Bilow"},  
       {FirstName:"Chuck", LastName:"Yushan"},     
       {FirstName:"John", LastName:"Roo"}, 
   ]; 
    
   // Assign the data provider to the DataGrid to populate it. 
   // Note: This has to be done before applying the cellRenderers. 
   aDg.dataProvider = new DataProvider(myDP); 
   aDg.setSize(160,190); 
   aDg.move(40,40); 
   aDg.columns[0].width = 80; 
   aDg.columns[1].width = 80; 
   var tf:TextFormat = new TextFormat(); 
   tf.size = 14; 
   tf.color = 0xff0000; 
   tf.italic = true; 
   tf.font = "Arial" 
   aDg.setStyle("headerTextFormat", tf);

4. Select Control > Test Movie to run the application.