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.