Simple DataGrid with ArrayCollection Update Example

by DeanLogic

I was helping out on the Flex community forum and one of the posts needed a little more of example than I could give using the forum post tools. So, I decided to create a quick example of a DataGrid using an ArrayCollection for the dataprovider. The ArrayCollection is created dynamically using a randomization selection from two static arrays. Then there is an option for updating the list showing which of the items have “Red” as the color value. I also put a couple of other items in the example, including an ItemRenderer for the DataGrid and a button holder for the Panel.

The first part of this example is to show an Object being used in an ArrayCollection. The idea behind using an Object is so that when the data is inserted, it is done as a specific type, which eliminates the need for casting String values into other types for manipulation. In this example, the myObjectItem has 2 String, 1 Number and 1 Boolean objects. The class defines these objects and also has a function for creating the object from passed in values.

package controls
	public class myObjectItem
		public static function create(itemValue1:Number, itemValue2:String = '', itemValue3:String = '', itemValue4:Boolean = false):myObjectItem {
			var tmpMyObject:myObjectItem = new myObjectItem();
			tmpMyObject.myItemValue1 = itemValue1;
			tmpMyObject.myItemValue2 = itemValue2;
			tmpMyObject.myItemValue3 = itemValue3;
			tmpMyObject.myItemValue4 = itemValue4;
			return tmpMyObject;
		public function myObjectItem()
		public var myItemValue1:Number;
		public var myItemValue2:String;
		public var myItemValue3:String;
		public var myItemValue4:Boolean;

Creating the object is straight forward. Call the create function and add each value, in this case, by setting the Number to the loop value, the Strings to random vales from two arrays and the Boolean to false. The object is created and then added to the ArrayCollection. There are other ways of creating the ArrayCollection with data passed in from XML or data connections, but for this example, I am creating the data randomly.

// populate Arrary Collection with random values
var lengthOfMyArray:int = 26;
	for(var i:int = 0; i < lengthOfMyArray; i++) {
		myArrayCollection.addItem(myObjectItem.create(i, randomStringItem(colors), randomStringItem(fruits)));

The second part of the example is to update a value in the ArrayCollection. The post on the Flex forum was doing a calculation and then setting a value to “true”. In my example, I check the String value for “Red”. If it is found, then I set the Boolean value to true as parts of a new object with old data from the original object and then using setItemAt to place the new object back in the ArrayCollection at the position of the old object.

protected function findRed_clickHandler(event:MouseEvent):void {
				// looks for the "red" in ItemValue2 and changes ItemValue4 
				for(var t:int = 0; t <  myArrayCollection.length; t++) {
					var tmpObject:Object = new Object();
					tmpObject = myArrayCollection.getItemAt(t);
					if(tmpObject["myItemValue2"] == "Red") {
						tmpObject.myItemValue4 = true;
					} else {
						tmpObject.myItemValue4 = false;
					myArrayCollection.setItemAt(tmpObject, t);
				// Refresh Data

This is a very straight forward example and I might add more items to it later.

View Source

About DeanLogic
Dean has been playing around with programming ever since his family got an IBM PC back in the early 80's. Things have changed since BASICA and Dean has dabbled in HTML, JavaScript, Action Script, Flex, Flash, PHP, C#, C++, J2ME and SQL. On this site Dean likes to share his adventures in coding. And since programming isn't enough of a time killer, Dean has also picked up the hobby of short film creation.

Leave a Reply