Unsing a Spark TextInput as ItemEditor for the MX DataGrid

So why would you do this in the first place? I was stucked with the  MX DataGrid and the MX TextInput is the default itemEditor for the MX DataGrid. The default highlight color is black while the text is white. My theme has white text on a black background. Attempting to change the default got me nowhere. Apparently it is a limitation of the Flash Player.  On the other hand it is quite trivial for the spark TextInput, it boils down to changing the value of the focusedTextSelectionColor css property.

So the get the spark TextInput to play nice with the MX DataGrid, I created a custom TexInput class which extends from the spark TextInput and implemented 3 interfaces: IDataRenderer, IDropInListItemRenderer, IListItemRenderer. That’s all that is needed (view source enabled for source code).

Usage:

<mx:DataGrid id="dg"
	width="400" height="200"
	editable="true"
	dataProvider="{initDG}">
	<mx:columns>
		<mx:DataGridColumn dataField="name" headerText="Name">
			<mx:itemEditor>
				<fx:Component>
					<local:SparkTextInputItemEditor
						focusedTextSelectionColor="#CC0000"/>
				</fx:Component>
			</mx:itemEditor>
		</mx:DataGridColumn>
		<mx:DataGridColumn dataField="phone" headerText="Phone"/>
		<mx:DataGridColumn dataField="email" headerText="Email" />
	</mx:columns>
</mx:DataGrid>

In action:


Get Adobe Flash player

Leave a Reply

Your email address will not be published. Required fields are marked *

*