Flex Spark DataGrid with DropDownList

Posted: October 19, 2011 in ColdFusion, Flex

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.

<s:itemEditor>
	<fx:Component>
		<s:GridItemEditor>
			<fx:Script>
				<![CDATA[
					import mx.core.FlexGlobals;
					import mx.events.FlexEvent;
					
					import spark.events.IndexChangeEvent;
					
					
					
					override public function set value(newValue:Object):void {
						
						cb.selectedItem= newValue;
					}
					
					override public function get value():Object {
						return cb.selectedItem.name;
					}
					
					override public function setFocus():void {
						cb.setFocus();
					}
					
					override public function save():Boolean
					{
						data[column.dataField] = value;
						data.officeID = cb.selectedItem.ID;
						if(data.action !== 'New'){
							data.action = 'Update';
							outerDocument.flatDP.refresh();
						}
						return true;
					}
					
					
				]]>
			</fx:Script>
			
			<local:BindableDropDownList xmlns:local="*"
										id="cb" width="100%"
										height="100%"
										dataProvider="{FlexGlobals.topLevelApplication.officesDP}"
										horizontalCenter="0"
										labelFields="[name]"
										prompt="Office"
										requireSelection="false"
										valueField="name"
										verticalCenter="0"/>
			
		</s:GridItemEditor>
	</fx:Component>
</s:itemEditor>

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

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s