# Adding summary information to a DataGrid

ID: FLASH23

Technology: flash

Type: Technique

## When to Use

- Adobe Flash Professional version MX and higher
- Adobe Flex

## Description

The objective of this technique is to provide a brief overview of how data has been organized into a DataGrid or a brief explanation of how to navigate the grid.

As Flash does not provide a summary attribute, this descriptive text will be added to the DataGrid's accessible desription instead. This approach will make the summary information available to people who use screen readers; the information is not displayed visually.

The summary is useful when the table has a complex structure (for example, when there are several sets of row or column headers, or when there are multiple groups of columns or rows). The summary may also be helpful for simple data tables that contain many columns or rows of data.

## Examples

### Adding a summary to a DataGrid in the Accessibility control panel

This is an example of a DataGrid being added to the stage in Flash Professional from the Components panel. The description field is used in the Accessibility control panel in Flash to serve as the summary information for the DataGrid.

1. Create a new Flash file (.fla) or open an existing one to put a DataGrid into.
2. Open the Flash components panel from the Window menu
3. Drag a DataGrid component onto the stage and position as desired.
4. Select the DataGrid component and add the summary information to the description field for DataGrid, using the Accessibility control panel.

### Adding a summary to a DataGrid with ActionScript 3

This is a basic AS3 example of a DataGrid component that has summary text added as its accessible description.

    import fl.accessibility.DataGridAccImpl;
    import fl.controls.DataGrid;
    import fl.controls.Label;
    import fl.data.DataProvider;
    import flash.accessibility.Accessibility;
    import flash.accessibility.AccessibilityProperties;
    import flash.system.Capabilities;

    DataGridAccImpl.enableAccessibility();

    createGrid();

    //set the summary text as accessible description
    var accProps: AccessibilityProperties = new AccessibilityProperties();
    accProps.description = "The first column shows the player's name," +
      "the second and third column shows the player's gaming statistics." +
      "the fourth column shows the player's year as FR (Freshman), JR (junior) or SO (Sophomore)." +
      "The fifth column shows the player's home city and state";
    aDg.accessibilityProperties = accProps;
    if (Capabilities.hasAccessibility)
    Accessibility.updateProperties();

    function createGrid() {

      //create and add the components
      var aDg: DataGrid = new DataGrid();
      addChild(aDg);
      aDg.move(50, 50);
      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: "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;
    };

For a demonstration, see the working version of Adding a summary to a DataGrid with ActionScript 3. The source of Adding a summary to a DataGrid with ActionScript 3 is available.

## Tests

### Procedure

If the Flash movie contains a DataGrid component, confirm that summary text has been added to it through the corresponding accessible description property.

### Expected Results

The above is true.