Creating an application with the DataGrid component

To create an application with the DataGrid component, you must first determine where your data is coming from. The data for a grid can come from a recordset that is fed from a database query in Adobe ColdFusion, Java, or .Net using Flash Remoting. Data can also come from a data set or an array. To pull the data into a grid, you set the DataGrid.dataProvider property to the recordset, data set, or array. You can also use the methods of the DataGrid and DataGridColumn classes to create data locally. Any Array object in the same frame as a DataGrid component copies the methods, properties, and events of the DataProvider API.

NOTE

When you bind data to the DataGrid component using the Data components, the object binds columns backward (similar to looping over an object or array). Therefore, to order the data in the DataGrid component differently, you must explicitly define columns.

To use Flash Remoting to add a DataGrid component to an application:

  1. Select File > New and choose Flash File (ActionScript 2.0).
  2. In the Components panel, double-click the DataGrid component to add it to the Stage.
  3. In the Property inspector, enter the instance name myDataGrid.
  4. In the Actions panel on Frame 1, enter the following code:
    myDataGrid.dataProvider = recordSetInstance;
    

    The Flash Remoting recordset recordSetInstance is assigned to the dataProvider property of myDataGrid.

  5. Select Control > Test Movie.

To use a local data provider to add a DataGrid component to an application:

  1. Select File > New and choose Flash File (ActionScript 2.0).
  2. In the Components panel, double-click the DataGrid component to add it to the Stage.
  3. In the Property inspector, enter the instance name myDataGrid.
  4. In the Actions panel on Frame 1, enter the following code:
    myDP = new Array({name:"Chris", price:"Priceless"}, {name:"Nigel", price:"Cheap"});
    myDataGrid.dataProvider = myDP;
    

    The name and price fields are used as the column headings, and their values fill the cells in each row.

  5. Select Control > Test Movie.

To specify columns and add sorting for a DataGrid component in an application:

  1. Select File > New and choose Flash File (ActionScript 2.0).
  2. In the Components panel, double-click the DataGrid component to add it to the Stage.
  3. In the Property inspector, enter the instance name myDataGrid.
  4. In the Actions panel on Frame 1, enter the following code:
    var myDataGrid:mx.controls.DataGrid;
    
    // Create columns to enable sorting of data.
    myDataGrid.addColumn("name");
    myDataGrid.addColumn("score");
    
    var myDP_array:Array = new Array({name:"Clark", score:3135}, {name:"Bruce", score:403}, {name:"Peter", score:25})
    
    myDataGrid.dataProvider = myDP_array;
    
    // Create listener object for DataGrid.
    var listener_obj:Object = new Object();
    listener_obj.headerRelease = function(evt_obj:Object) {
     switch (evt_obj.target.columns[evt_obj.columnIndex].columnName) {
     case "name" :
      myDP_array.sortOn("name", Array.CASEINSENSITIVE);
      break;
     case "score" :
      myDP_array.sortOn("score", Array.NUMERIC);
      break;
     }
    };
    
    // Add listener to DataGrid.
    myDataGrid.addEventListener("headerRelease", listener_obj);
    
  5. Select Control > Test Movie.

To create a DataGrid component instance using ActionScript:

  1. Select File > New and choose Flash File (ActionScript 2.0).
  2. Drag the DataGrid component from the Components panel to the current document's library.

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

  3. Select the first frame in the main Timeline, open the Actions panel, and enter the following code:
    this.createClassObject(mx.controls.DataGrid, "my_dg", 10, {columnNames:["name", "score"]});
    my_dg.setSize(140, 100);
    my_dg.move(10, 40);
    

    This script uses the UIObject.createClassObject() method to create 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 data grid:
    var myDP_array:Array = new Array();
    myDP_array.push({name:"Clark", score:3135});
    myDP_array.push({name:"Bruce", score:403});
    myDP_array.push({name:"Peter", score:25});
    my_dg.dataProvider = myDP_array;
    
  5. Select Control > Test Movie.