Chakra Media blog

htmlText with AS3 datagrid

November 13th, 2007 | Category: Flash

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.

  1. 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 ....

View the example


 Download source: AS3DataGridHTML

19 Comments so far

  1. theo November 20th, 2007 9:16 am

    link is dead for view example

  2. theo November 20th, 2007 9:26 am

    for download source i mean

  3. justin November 20th, 2007 9:27 am

    oops :)

    the link should work now.. thanks theo

  4. theo November 20th, 2007 9:32 am

    thank you, i just tried the example, but the markup seem not to work. do you have an image renderer example?

  5. theo November 20th, 2007 9:32 am

    the img markup sorry

  6. justin November 20th, 2007 9:40 am

    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/

  7. theo November 20th, 2007 10:04 am

    excellent thanks

  8. Juris V. January 19th, 2008 6:06 pm

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

  9. justin January 20th, 2008 1:26 pm

    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

  10. www.video-flash.de February 9th, 2008 4:21 pm

    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…

  11. Tony February 16th, 2008 9:02 am

    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

  12. Rusty April 28th, 2008 5:47 am

    “There is an issue with getting the html links to actually work within the cell.”

    Were you ever able to figure this out?

  13. justin April 28th, 2008 7:42 am

    Rusty: nope … i haven’t had the time to mess with it.

  14. Brad May 20th, 2008 3:25 pm

    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

  15. justin May 21st, 2008 10:17 am

    @ 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.

  16. Brad May 21st, 2008 3:50 pm

    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.

  17. worked July 7th, 2008 10:48 am

    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.

  18. worked July 8th, 2008 4:47 am

    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.”

  19. justin July 8th, 2008 8:03 am

    nice work, worked! thanks for posting that, it’s very helpful.

    keep up the good work ;)

Leave a reply

Mexico