Flash AS3 Tutorials Center | Interesting Flash Animation Tutorials | Valuing Flash Animation Tutorials | Flash ActionScript and Animation Home

AS3 Beginner Tutorials | AS3 Basic Lessons | AS3 Valuing Courses | AS3 Components Tutorials | AS3 and PHP Interaction Tutorials
AS3 Practical Tutorials | AS3 Animation Techniques | AS3 Transition Effects Tutorials | AS3 Download Upload Files | AS3 Particle Systems
Communication Between Flash Movies with AS3 | AS3 and JavaScript interaction | AS3 Matrix Transformation | AS3 Physics Simulation Tutorials

Flash DataGrid Component ActionScript 3 Tutorial

This Flash Component tutorial series show how to use Datagrid with Flash ActionScript 3.

Please update flash player to view this Flash ActionScript tutorial!

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

//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:

Flash Source File datagrid.fla


This Flash ActionScript tutorial shows how to use Flash DataGrid component.