htmlText with AS3 datagrid
Sort of.
After dealing with this little issue for longer than I would like to mention, I thought I’d post my findings so others won’t waste their time as well. I was able to get HTML formatted text to render within the cells of the (Flash CS3) DataGrid by using the help example of the MulitLineCellRenderer. In that example they used an override function for the drawLayout() method of the CellRenderer class to set the textField width and I just added this line below it.
textField.htmlText = textField.text;
In this example there are two ways to get HTML tags to render within the text. The first way is by using the labelFunction of the DataGridColumn and append some tags to your text. The other way is by using CDATA within the XML file.
There is an issue with getting the html links to actually work within the cell. It seems possible… but due to project deadlines I haven’t been able to attempt it. If anyone figures this out, I’d love to know about it ….
Download source: AS3DataGridHTML
33 Comments so far
Leave a reply
link is dead for view example
for download source i mean
oops
the link should work now.. thanks theo
thank you, i just tried the example, but the markup seem not to work. do you have an image renderer example?
the img markup sorry
oh sorry, i didn’t actually include that part… you can find the image renderer example here: (scroll to bottom)
http://www.adobe.com/devnet/flash/quickstart/datagrid_pt3/
excellent thanks
Unfortunately this doesn’t work in Flex
Spent whole weekend trying to get html text rendered ir Datagrid cell without luck 
regular text is showing as is, but html fails to render at all..
hey Juris
i’ve never tried this in Flex, so thats good to know. But I do believe it is possible to render html text in the Flex datagrid… check out this post…
http://www.actionscript.org/forums/archive/index.php3/t-107897.html
Mehrzeiliger HTML-Text in der Datagrid-Komponente…
Im vorigen Beitrag wurde gezeigt, wie man Bilder und Grafiken in eine Datagrid-Komponente von Flash CS3 einfügt. Hier nun ein Beispiel, das mehrzeiligen Text und HTML-Formatierungen innerhalb des Datagrids verwendet.
Man benötigt – wie im Beispie…
Thanks for the class. I’ve combined it with Peter DeHaan’s alternating datagrid row colors and now have the best of both worlds. Here is the Peter’s link. http://blogs.adobe.com/pdehaan/2007/06/alternating_background_colors.html
“There is an issue with getting the html links to actually work within the cell.”
Were you ever able to figure this out?
Rusty: nope … i haven’t had the time to mess with it.
Hi
Really liked your datagrid example. I an new AS3 and was wondering if there is a way to do that same in a standand alone document without the need for package files.
Cheers
@ brad – thanks for visiting … you can do without the package structure for the files, but you still need to import the classes that are contained within package … you can put the those classes in the ‘root’ folder of your project and flash will automatically check there when publishing the swf.
Cheers mate. Still finding my feet with AS3, trying to solve a short term issue using a datagrid within a content management framework using an image library to load/store swf’s. I liked what you have done with your version of the datagrid, vey nicely done.
thanks again.
Very nice work… So I’m wondering about the hyperlink myself. It seems if one could disable the mouse over event in the column, the html link may become available. But I’m no expert, I’m only now learning about AS3 datagrids.
If I uncover anything i will update here.
For this to work you need to separate out the URL into it’s own node:
<![CDATA[Click here for a million dollars!]]>
http://www.google.com
Then you need to add a CHANGE EventListener to your datagrid, as so:
myGrid.addEventListener(Event.CHANGE, changeHandler);
This function now listens for a change to the datagrid component, such as a mouse click. If a change is made it enables the node found in the xml document via DataGrid(event.target).selectedItem.link; And then passes the URL via the navigateToURL(); method, for example:
function changeHandler(event:Event):void {
var request:URLRequest = new URLRequest();
request.url = DataGrid(event.target).selectedItem.link;
navigateToURL(request);
myGrid.selectedIndex = -1;
}
The navigateToURL method excepts two parameters, one is obviously the URL the other is the target, such as, ‘_self’.
Note: You may be prompted to adjust the flash player security settings.
“A person often meets his destiny on the road he took to avoid it.”
nice work, worked! thanks for posting that, it’s very helpful.
keep up the good work
Thanks for sharing!
I have a problem right-aligning text inside the cells, any suggestions on how to do this?
textField.autoSize = “right”; – dosnt work…
Hi Laz
Sure … you need to create a new TextFormat object in the cell renderer and set to align to the right. I’ve pasted a modified class to give you an example.
package {
import fl.controls.listClasses.CellRenderer;
import flash.text.TextFormat;
import flash.text.TextFormatAlign;
public class MultiLineHtmlCell extends CellRenderer {
private var tf:TextFormat;
public function MultiLineHtmlCell() {
tf = new TextFormat();
tf.align = TextFormatAlign.RIGHT;
textField.wordWrap = true;
textField.autoSize = “left”;
}
override protected function drawLayout():void {
textField.width = this.width;
textField.htmlText = textField.text;
textField.setTextFormat(tf);
super.drawLayout();
}
}
}
Thanks a lot – works like a dream….
Genial. mil gracias
me han ahorrado mucho tiempo
Saludos
Great, thank you very much.
You have saved me a lot of time.
Greetings
Hi
I am new to flex.
As per my requirement,
I need to use data grid to display some sort of information which I will get the form of HTML text.
This includes href links too
I think solution provided here will work.
But I am not able to use this solution. I downloaded the source but not working
please help me out.
Thanks
Hey Amit … have you tried using the Advanced Datagrid for Flex? It supports HTML text natively. (unlike the Flash CS3 version)
i can´t get this to work, with the link solution, provided by “Worked” on July 8th, 2008 4:47 am. I don’t know what i’m doing wrong, when i compile and click i get this message error on output
TypeError: Error #2007: Parameter url must be non-null.
at global/flash.net::navigateToURL()
at AS3DataGridHTML_fla::MainTimeline/changeHandler()
at flash.events::EventDispatcher/flash.events:EventDispatcher::dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at fl.controls::SelectableList/fl.controls:SelectableList::handleCellRendererClick()
at fl.controls::DataGrid/fl.controls:DataGrid::handleCellRendererClick()
can the source be updated or someone show me the code for a working example, please?
Thanks
Setting the htmlText property of a Text component was exactly what I needed to get the element working. Thanks for the tip.
Do you know if this should work in AS2? And if not what changes would make it work? I am trying it but seem to get syntax errors on line 1 and 15 and attribute used outside of class on line 15. And Actionscript 2.0 class scripts may only define class or interface constructs on line 21.
Nice Tutorial – ActionScript 3 is so easy!
Google Adwords India : Pensa Media -SEO Company & Google AdWords Authorized Agency India.
Well it is usually great to have somebody else’s point of view on things don’t you think? Forces you to begin to think properly and also freely, therefore i appreciate your leaning on things, although I may not go along with all you say.
I actually enjoy your comments. Despite the fact that I may not necessarily agree with almost everything you point out, it is great to see somebody showing their own thoughts with the minimum of fuss.