Simple DataGrid with ArrayCollection Update Example

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()
		{
		}
		
		[Bindable]
		public var myItemValue1:Number;
		[Bindable]
		public var myItemValue2:String;
		[Bindable]
		public var myItemValue3:String;
		[Bindable]
		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
				myArrayCollection.refresh();				
			}

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

View Source