How do I stop a datagrid's first-row itemRenderer from instantiating/adding/initializing/etc twice?

Posted by Michael Prescott on Stack Overflow See other posts from Stack Overflow or by Michael Prescott
Published on 2009-03-14T03:54:25Z Indexed on 2010/03/26 0:03 UTC
Read the original article Hit count: 566

Filed under:
|
|
|
|

In a Flex DataGrid's first row, the itemRenderer will initialize twice. Tracing the results reveals that the flex framework is possibly creating two instances of the first row's itemRenderer. In a more complex application, where the itemRenderer contains a data-bound ColorPicker, we're seeing an infinite loop occur because of this problem. Only the first row's itemRenderer is initialized twice. Is there a way to override flex's behavior and stop this from occurring? The following code demonstrates the problem:

Main Application:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="on_initialize(event);">
<mx:Script>
<![CDATA[
/**
 * This experiment shows how the first row's itemrenderer is instantiated/added/initialized twice.
 * We've never even noticed this before we found that a data-bound ColorPicker enters a infinite
 * loop when it is within an itemRenderer.
 */
	import mx.collections.ArrayCollection;
	import mx.events.FlexEvent;

	private var dg_array:Array;
	private var dg_arrayCollection:ArrayCollection;

	private function on_initialize(event:FlexEvent):void {
		dg_array = new Array();
		dg_arrayCollection = new ArrayCollection();
		dg_arrayCollection.addItem("item 1");
		dg_arrayCollection.addItem("item 2");

		dg.dataProvider = dg_arrayCollection;
	}
]]>
</mx:Script>
<mx:DataGrid id="dg" width="100%" height="100%" rowCount="5">
    <mx:columns>
        <mx:DataGridColumn headerText="Name" itemRenderer="SimpleItemRenderer"/>
    </mx:columns>
</mx:DataGrid>
</mx:Application>

SimpleItemRenderer:

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300" initialize="//on_initialize(event);">
<mx:Script>
	<![CDATA[
		import mx.events.FlexEvent;

		[Bindable]
		override public function set data(value:Object):void { _data = value; }					
		override public function get data():Object { return _data; }
		private var _data:Object;

		private function on_initialize_textInput(event:FlexEvent):void {
			trace("initialize:event.target="+event.target+", " + _data); // runs twice, for the first item only

		}

		private function on_creationComplete_textInput(event:FlexEvent):void {
			trace("creationComplete:event.target="+event.target+", " + _data); // runs twice, for the first item only
		}
	]]>
</mx:Script>
<mx:TextInput text="{data}" id="textInput" initialize="on_initialize_textInput(event);" creationComplete="on_creationComplete_textInput(event);"/>
</mx:Canvas>

Abbreviated Output:

initialize:event.target=ItemRenderers0.dg...SimpleItemRenderer12.textInput, null initialize:event.target=ItemRenderers0.dg...SimpleItemRenderer24.textInput, null creationComplete:event.target=ItemRenderers0.dg...SimpleItemRenderer24.textInput, item 1 initialize:event.target=ItemRenderers0.dg...SimpleItemRenderer29.textInput, null creationComplete:event.target=ItemRenderers0.dg...SimpleItemRenderer29.textInput, item 2 creationComplete:event.target=ItemRenderers0.dg...SimpleItemRenderer12.textInput, item 1

© Stack Overflow or respective owner

Related posts about flex

Related posts about itemrenderer