Creating a horizontally scrolling DataGrid in Flash using ActionScript 3.0

Often when displaying information in a data grid you need to show a lot of information in a small space. In these cases it is useful to create a horizontally scrolling data grid since it allows users to scroll the data grid horizontally as well as vertically to see all the information.

The following example creates a data grid with a width of 150 pixels and sets the horizontalScrollPolicy property to “on” (ScrollPolicy.ON).

Full code after the jump.

// ActionScript 3.0
import fl.controls.DataGrid;
import fl.controls.ScrollPolicy;
import fl.data.DataProvider;
 
var dp:DataProvider = new DataProvider();
dp.addItem({columnA:"Row 1A", columnB:"Row 1B"});
dp.addItem({columnA:"Row 2A", columnB:"Row 2B"});
dp.addItem({columnA:"Row 3A", columnB:"Row 3B"});
 
var myDataGrid:DataGrid = new DataGrid();
myDataGrid.addColumn("columnA");
myDataGrid.addColumn("columnB");
myDataGrid.dataProvider = dp;
myDataGrid.horizontalScrollPolicy = ScrollPolicy.ON;
myDataGrid.width = 150;
myDataGrid.rowCount = myDataGrid.length;
myDataGrid.move(10, 10);
addChild(myDataGrid);

This example scrolls horizontally 50 pixels because the DataGrid instance is 150 pixels wide and the two columns are 200 pixels wide (by default each column is 100 pixels wide).

For more information on the Flash/ActionScript 3.0 DataGrid component, see the “Creating, populating, and resizing the DataGrid component” Flash Quick Start on Adobe.com.

Tagged as: DataGrid, horizontalScrollPolicy, ScrollPolicy