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
19 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