Rendering HTML in DataGrid cells?

[Ledneh]

I've been trying to work out methods for using HTML formatting in DataGrid cells. So far, here's what I've come up with from the help docs and Google and what not:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:DataGrid id="storyGrid" width="400" height="300" variableRowHeight="true" left="20" top="20">
        <mx:dataProvider>
            <mx:ArrayCollection>
                <mx:source>
                    <mx:Object Price="11.99">
                        <mx:Artist>
                        	<![CDATA[<b>Pave<i>ment</i></b>]]>
                        </mx:Artist>
                        <mx:Album>
                        	&lt;b&gt;Slanted and Enchanted&lt;/b&gt;
                        </mx:Album>
                    </mx:Object>
                    <mx:Object Artist="Pavement" Album="Brighten the Corners" Price="11.99" />
                </mx:source>
            </mx:ArrayCollection>
        </mx:dataProvider>
        <mx:columns>
            <mx:Array>
            	<mx:DataGridColumn dataField="Artist">
            		<mx:itemRenderer>
            			<mx:Component>
							<mx:Text x="0" y="0" width="100%" htmlText="{data.Artist}"/>
						</mx:Component>
            		</mx:itemRenderer>
            	</mx:DataGridColumn>
                <mx:DataGridColumn dataField="Album" />
                <mx:DataGridColumn dataField="Price" />
            </mx:Array>
        </mx:columns>
	</mx:DataGrid>
</mx:Application>

Now, all this works just fine for the DataGridColumn for which the HTML renderer is defined. But the rest just blast out the tags without rendering them.

To fix that, I COULD copy and paste the item renderer for each column, changing the data property as I go, but that feels repetitious and wasteful. So I wanted to ask, is there any way to specify to the DataGrid, "render all HTML contents in your tags" or, failing that, a way to specify a default itemRenderer for the whole grid that renders HTML?

Thanks!

[nirth]

my opinion that the easiest way to do it, is creation the class, than is u need more customized renderers you can extend your class, and assign different renderers to the columns.

i've did it like this

// renderers/HTMLRenderer.as
package renderers
{
	import mx.controls.Text;
	import mx.events.FlexEvent;

	public class HTMLRenderer extends Text
	{
		public function HTMLRenderer ()
		{
			super();
		}
		
		private var _data:Object;
		
		[Bindable("dataChange")]
		[Inspectable(environment="none")]
		override public function get data():Object
   		{
        	return _data;
    	}
		override public function set data(value:Object):void
		{
			_data = value;
	
	        if (listData)
			{
	            htmlText = listData.text;
			}
	        else if (_data != null)
	        {
	            if (_data is String)
	                htmlText = String(_data);
	            else
	                htmlText = _data.toString();
	        }	
			dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
		}
	}
}

and the mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:DataGrid itemRenderer="renderers.HTMLRenderer" id="storyGrid" width="400" height="300" variableRowHeight="true" left="20" top="20">
        <mx:dataProvider>
            <mx:ArrayCollection>
                <mx:source>
                    <mx:Object Price="11.99">
                        <mx:Artist>
                        	<![CDATA[<b>Pave<i>ment</i></b>]]>
                        </mx:Artist>
                        <mx:Album>
                        	&lt;b&gt;Slanted and Enchanted&lt;/b&gt;
                        </mx:Album>
                    </mx:Object>
                    <mx:Object Artist="Pavement" Album="Brighten the Corners" Price="11.99" />
                </mx:source>
            </mx:ArrayCollection>
        </mx:dataProvider>
        <mx:columns>
            <mx:Array>
            	<mx:DataGridColumn dataField="Artist" />
                <mx:DataGridColumn dataField="Album" />
                <mx:DataGridColumn dataField="Price" />
            </mx:Array>
        </mx:columns>
	</mx:DataGrid>
</mx:Application>

[sevmusic]

I've seen your code on more than one site.. hopefully you'll see this...

Using this code in Flex 3 gives me this error:

1119: Access of possibly undefined property text through a reference with static type mx.controls.listClasses:BaseListData.

And it is referencing this in HTMLRenderer.as

htmlText = listData.text;

I even tried: import mx.controls.listClasses.BaseListData;

still no luck... am I missing something?

Thanks for the help.