Code Snippets

ActionScript Source Code

Welcome to Dream.In.Code
	Become an Expert! Join 340,162 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 4,028 people online right now. Registration is fast and FREE... Join Now! Chat LIVE With a Expert

UI Component - List + Data Grid

This is a small script which shows how to have the list box component and the data grid component working together.

Submitted By: reyco1

Actions:

Rating:

Views: 10,537

Language: ActionScript

Last Modified: March 27, 2005

Instructions: drag a list box component and a data grid component and instance name them "listBox" and "dataGrid" respectfully. Paste the following code in the first frame of the movie.

Snippet

import mx.controls.List;
import mx.controls.DataGrid;
// type your components
var listBox:List;
var dataGrid:DataGrid;
// create arrays containing objects with your data
var fruits:Array = new Array({name:'apple', weight:2, price:150}, {name:'mango', weight:3, price:140}, {name:'grape', weight:5, price:120});
var vegetables:Array = new Array({name:'brinjal', weight:2, price:150}, {name:'radish', weight:3, price:140}, {name:'potatoe', weight:5, price:120});
var flowers:Array = new Array({name:'rose', weight:2, price:150}, {name:'lily', weight:3, price:140}, {name:'sun', weight:5, price:120});
// array containing info for the list box
var main:Array = new Array({label:'Fruits', data:fruits}, {label:'Vegetables', data:vegetables}, {label:'Flowers', data:flowers});
// set data provider for the list box to main array
listBox.dataProvider = main;
// set up listener for the list box so that when changed, it will populate the datagrid with associated info
var listener:Object = new Object();
listener.change = function(pEvent:Object) {
var selectItem:Object = pEvent.target.selectedItem;
dataGrid.dataProvider = selectItem.data;
};
listBox.addEventListener('change', listener);

Copy & Paste

import mx.controls.List;
import mx.controls.DataGrid;
// type your components
var listBox:List;
var dataGrid:DataGrid;
// create arrays containing objects with your data
var fruits:Array = new Array({name:'apple', weight:2, price:150}, {name:'mango', weight:3, price:140}, {name:'grape', weight:5, price:120});
var vegetables:Array = new Array({name:'brinjal', weight:2, price:150}, {name:'radish', weight:3, price:140}, {name:'potatoe', weight:5, price:120});
var flowers:Array = new Array({name:'rose', weight:2, price:150}, {name:'lily', weight:3, price:140}, {name:'sun', weight:5, price:120});
// array containing info for the list box
var main:Array = new Array({label:'Fruits', data:fruits}, {label:'Vegetables', data:vegetables}, {label:'Flowers', data:flowers});
// set data provider for the list box to main array
listBox.dataProvider = main;
// set up listener for the list box so that when changed, it will populate the datagrid with associated info
var listener:Object = new Object();
listener.change = function(pEvent:Object) {
     var selectItem:Object = pEvent.target.selectedItem;
     dataGrid.dataProvider = selectItem.data;
};
listBox.addEventListener('change', listener);