Flash DataGrid Component ActionScript 3 Tutorial
This Flash Component tutorial series show how to use Datagrid with Flash ActionScript 3.
Flash Tutorial Content:
The Flash DataGrid class is a list-based component that provides a grid of rows and columns. You can specify an optional header row at the top of the Flash component that shows all the property names. Each row consists of one or more columns, each of which represents a property that belongs to the specified data object. The Flash DataGrid component is used to view data; it is not intended to be used as a layout tool like an HTML table.
The finished Flash Movie of this tutorial is shown as above. Click on the above Flash Movie and play around.
Flash ActionScript Codes:
//Import the following classes if create runtime DataGrid
//import fl.controls.DataGrid;
//import fl.events.DataGridEvent;
//Add the Header
myDataGrid_dg.addColumn("Name");
myDataGrid_dg.addColumn("Username");
myDataGrid_dg.addColumn("Password");
//The Header width can be set in Parameter window, or
//myDataGrid_dg.headerHeight = 25;
//Add the Items to DataGrid
myDataGrid_dg.addItem( {Name: "Alex", Username: "alexabc", Password: "alex555"} );
myDataGrid_dg.addItem( {Name: "Peter", Username: "petermmm", Password: "ppter333"} );
myDataGrid_dg.addItem( {Name: "David", Username: "david666", Password: "david007"} );
myDataGrid_dg.addItem( {Name: "Paul", Username: "paulgood", Password: "paulguy"} );
//Set the width of the DataGrid (Not width of single column)
myDataGrid_dg.width = 450;
//The Height of row can be set in Parameter window, or
myDataGrid_dg.rowHeight = 25;
//Set number of row
//If not set, DataGrid will auto fit the row
myDataGrid_dg.rowCount = 5;
myDataGrid_dg.addEventListener(Event.CHANGE, itemSelected);
function itemSelected(evt:Event) {
output_txt.text = "Index of Selected Item: " + "\t\t\t" + evt.target.selectedIndex + "\n" +
"Name of Selected Item: " + "\t\t\t" + evt.target.selectedItem.Name + "\n" +
"Username of Selected Item: " + "\t\t" + evt.target.selectedItem.Username +"\n" +
"Password of Selected Item: " + "\t\t" + evt.target.selectedItem.Password;
}
Download Flash Source File:
Remarks:
This Flash ActionScript tutorial shows how to use Flash DataGrid component.