Archive for the ‘Flex’ Category

In Flex 1,2,3 we used mx:DataGrid, which had a dg.selectedItems Object.
In Flex 4,4.5,4.6+ we now use a Spark s:DataGrid, which made dealing with selectedItems more complicated with Vectors. Jury is still out for me if going to Vectors is a good thing.

In mx, if I wanted to save selectedItems to the server, I just send dg.selectedItems to ColdFusion and looped through it. Simple.

In spark, I now have to covert the Vector back to an Object or ArrayCollection (since AMF rejects the Vector). Below is an example of how to loop through the Vector and convert it to a temp ArrayCollection to send to ColdFusion via RemoteObject/AMF.

var temp:ArrayCollection = new ArrayCollection();
var selIndices:Vector.<int> = dg.selectedIndices;
var selItems:Vector.<Object> = dg.selectedItems;
var numItems:Number = selIndices.length;
for (var i:Number = 0; i<numItems; i++){

You want to remove all rows in an ArrayCollection where the property (e.g. parentID) = the value (eg. 5). It basically searches the entire ArrayCollection and removes all rows that meet your criteria. I needed this because I wanted to delete all children of a specific parentID. So, I made a little function to make this easy to call for any use case based on what I learned from this post . The trick is to only increment i if the criteria is not a match, since Flex does change the index after each item is removed. Nice trick creyenders. Thanks!

Paying it forward with a Flex function to make it easy for Flex developers to use.

public function removeItemsByPropertyValue(ac:ArrayCollection, property:String, value:String):void
				for( var i : uint = 0 ; i < ac.length ; null ){
					var obj:Object = Object(ac[i])
					if( obj[ property ] == value ){
						ac.removeItemAt( ac.getItemIndex( obj ) );

Spark DataGrid Change Cell Color

Posted: October 31, 2011 in Flex

Believe it or not, the simple task of changing a cell color when the data is changed (another cell is edited) wasn’t as easy as it might sound. Not just setting it when the grid fills up, but changing it during the course of editing the grid.  Took me a couple weeks to solve.  So, I’m passing it on to you.  Hope it saves you some time!



override public function prepare(hasBeenRecycled:Boolean):void

textColor = 0x000000;

text = data.action;

if(data.action == ’Keep’)
opaqueBackground = 0x00ff00;
else if (data.action == ’Update’){
opaqueBackground = 0xFFCC00;
else if (data.action == ’New’){
opaqueBackground = 0xffff00;
else if (data.action == ’Delete’){
opaqueBackground = 0xff0000;
else {
opaqueBackground = 0x000000;



I was really surprised about the lack of good examples for adding a DropDownList or ComboBox inside a cell in a Flex 4.5+ spark DataGrid.  It took me awhile to figure it out.  So, I thought I’d pass it along to you.

In my scenario.  I have a ColdFusion database RemoteObject that populates and ArrayCollection that is bound to the DropDownList.  I needed to update the dataProvider of the DataGrid with two values (officeID, office) based on the DropDownList selection.  And I wanted to update the color of the cell in another column that indicates to the user that the row has been updated.  For this reason, it wasn’t as simple as using the standard ComboBoxGridItemEditor.

Below is the result.  A custom GridItemEditor that saves the new value , updates data.action to ‘Updated’, and refreshes the DataGrid’s dataProvider, which updates the background color of the action column.

Trick was overriding the save() function so I can do more when the editing is done.

Hope it helps.  Let me know if you have any questions.

					import mx.core.FlexGlobals;
					override public function set value(newValue:Object):void {
						cb.selectedItem= newValue;
					override public function get value():Object {
					override public function setFocus():void {
					override public function save():Boolean
						data[column.dataField] = value;
						data.officeID = cb.selectedItem.ID;
						if(data.action !== 'New'){
							data.action = 'Update';
						return true;
			<local:BindableDropDownList xmlns:local="*"
										id="cb" width="100%"

//action column
<s:GridColumn   width="70" editable="false" headerText="Action" dataField="action">
											<s:DefaultGridItemRenderer background="true"  backgroundColor="{data.action == 'Keep' ? 0x00ff00: data.action == 'Update' ? 0xFFCC00: data.action == 'New' ? 0xffff00: data.action == 'Delete' ? 0xff0000:0x000000}"  >								</s:DefaultGridItemRenderer>

Need: I’ve had a long time need for an HTML WYSIWYG Editor embedded in my Adobe Flex Applications for content management.  Adobe does not provide a WYSIWYG Editor with Flex/Air and the Flex Text Layout Framework, frankly, was too confusing for me!  Some people offered components that attempted to do this in the past, like CKeditor, but they did not maintain it so that it works with Flex 4.5.1.  I decided to call on my long time friend, Adobe ColdFusion to do, as it always has, … make things easy!

GitRDone:  Leverage ColdFusion’s existing built in FCKeditor in CFTEXTAREA and Flex iFrame .  Build a simple ColdFusion page, load it into Flex via iFrame, and use Javascript to grab the HTML.  ColdFusion server required.

Source: (view source enabled)

My solution of course was genius 🙂 … but code is very simple thanks to ColdFusion and the guys at Flex iFrame.  Appreciate it!

Here is the Flex code  and the ColdFusion code (rte.cfm).  The key was iFrame’s callIFrameFunction to bridge between actionscript and javascript to get the HTML from CF into Flex for saving to the database later when my Flex user submits the form.

Hope it helps!

<script type="text/javascript">
	function getText() {
		return ColdFusion.getElementValue('rta');

	<cfform width="100%" height="100%" >
	<cftextarea name="rta" richtext="true"  width="600" height="600"   >



			private function getTextFromFrame():void
			private function getTextResult(result : String):void
				r.text = result;
		<flexiframe:IFrame  id="myRtaFrame" width="600" height="600" scrollPolicy="no" overlayDetection="true"   source="rte.cfm"/>
			<s:Button  label="Get HTML" click="getTextFromFrame()"/>
			<s:TextArea id="r" width="300" height="650"/>