PrintDataGrid's DataGridColumn - Embedded image not printing when you use TextFlow in the item rende

Question

I'm printing a datagrid using something like  this...
<mx:PrintDataGrid
  id="printDataGrid" 
  width="100%" 
  height="100%"
  showHeaders="false"
  borderVisible="false"
  horizontalGridLines="false"
  variableRowHeight="true"
  dataProvider="{titles}"
  >
  <mx:columns>
   <mx:DataGridColumn 
    itemRenderer="renderer.TitlePrintRenderer" 
    />
  </mx:columns>
</mx:PrintDataGrid>
TitlePrintRenderer.mxml has s:RichText component. I use  RichText's textFlow property to render the text. The approach is working fine  except that if the textFlow has embedded images (<img source=... />), the  images are not printed!
Is this a bug? Is it a limitation? Has anyone come  across this issue?
I'm using Flex SDK 4.5.1

Answer 1

After struggling for 4+ days on using timer / events for printing PrintDataGrid with embedded images in RichText's textFlow, I tried your other suggestion... to convert <img> tags to InlineGraphicElement and give it Bitmap from image loaded from a .gif file. The approach works but the printout skips images in a few rows!
I've this test case in which, every time I print, it skips printing image in the second row! I also implemented this approach in a more complex test case and depending on the total number of rows, it would skip printing image in different number of rows. I'm suspecting that even if you construct InlineGraphicElement from bitmap loaded from an image, PrintDataGrid's renderer still skips printing image intermittently.
I would very much appreciate it if you could create small project from my following code and verify this behavior. I'm at my wit's end in getting this printing to work.
PrintImagesTest.mxml
=================
<?xml version="1.0" encoding="utf-8"?>
<s:Application
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    minWidth="955" minHeight="600"
    initialize="initData();"
    viewSourceURL="srcview/index.html"
    >
    <s:layout>
        <s:VerticalLayout
            paddingLeft="20" paddingRight="20"
            paddingTop="20" paddingBottom="20"
            />
    </s:layout>
    <mx:Button
        label="Print"
        click="printClickHandler();"
        />
    <fx:Script>
        <![CDATA[
            import flash.utils.setTimeout;
            import flashx.textLayout.elements.InlineGraphicElement;
            import flashx.textLayout.elements.ParagraphElement;
            import flashx.textLayout.elements.SpanElement;
            import flashx.textLayout.elements.TextFlow;
            import mx.collections.ArrayCollection;
            import mx.printing.*;
            import mx.utils.OnDemandEventDispatcher;
            public var contentData:ArrayCollection;
            private var embeddedImages:ArrayCollection;
            private var numberOfImagesLoaded:int;
            public var printJob:FlexPrintJob;
            public var thePrintView:FormPrintView;
            public var lastPage:Boolean;
            private var textFlowNS:Namespace = new Namespace("http://ns.adobe.com/textLayout/2008");
            public function initData():void {
                contentData = new ArrayCollection();
                var page:int = 0;
                for (var z:int=0; z<20; z++)    {
                    var content:Object = new Object();
                    content.srNo = z+1;
                    content.contentText =
                    "<TextFlow whiteSpaceCollapse='preserve' xmlns='http://ns.adobe.com/textLayout/2008'>" +
                    "<span>some text</span>" +
                    "<img width='53' height='49' source='assets/images/formula.gif'/>" +
                    "</TextFlow>";
                    contentData.addItem(content);
            public function printClickHandler():void {
                convertToTextFlow();
            private function convertToTextFlow():void {
                embeddedImages = new ArrayCollection();
                numberOfImagesLoaded = 0;
                for each (var contentElement:Object in contentData) {
                    extractImageInfo(contentElement.contentText);
                if (embeddedImages.length > 0) {
                    loadImage(embeddedImages.getItemAt(0).source);
                } else {
                    printData();
            private function extractImageInfo(contentText:String):void {
                var textXml:XML = new XML(contentText);
                var imageList:XMLList = textXml.textFlowNS::img;
                for each (var img:XML in imageList) {
                    var embeddedImage:Object = new Object();
                    embeddedImage.source = String(img.@source);
                    embeddedImage.width = parseInt(img.@width);
                    embeddedImage.height = parseInt(img.@height);
                    embeddedImages.addItem(embeddedImage);
            private function loadImage(imageSource:String):void {
                var loader:Loader = new Loader();
                var urlRequest:URLRequest = new URLRequest(imageSource);
                loader.load(urlRequest);
                loader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);
            private function imageLoaded(e:Event):void {
                embeddedImages.getItemAt(numberOfImagesLoaded).bitmap = (Bitmap)(e.target.content);
                embeddedImages.getItemAt(numberOfImagesLoaded).width = ((Bitmap)(e.target.content)).width;
                embeddedImages.getItemAt(numberOfImagesLoaded).height = ((Bitmap)(e.target.content)).height;
                ++numberOfImagesLoaded;
                if (numberOfImagesLoaded < embeddedImages.length) {
                    loadImage(embeddedImages.getItemAt(numberOfImagesLoaded).source);
                } else {
                    // all the images have been loaded... convert to textflow
                    buildContent();
                    printData();
            private function buildContent():void {
                var contentIndex:int = 0;
                for each (var contentElement:Object in contentData) {
                    if (hasImage(contentElement.contentText)) {
                        buildTextFlow(contentElement, contentIndex);
                        ++contentIndex;
            private function buildTextFlow(content:Object, contentIndex:int):void {
                var textXml:XML = new XML(content.contentText);
                var p:ParagraphElement = new ParagraphElement();
                for each(var child:XML in textXml.children()) {
                    switch (child.localName()) {
                        case "span":
                            var span:SpanElement;
                            span = new SpanElement();
                            span.text = child;
                            span.fontSize = 10;
                            p.addChild(span);
                            break;
                        case "img":
                            var image:InlineGraphicElement;
                            image = new InlineGraphicElement();
                            image.source = embeddedImages.getItemAt(contentIndex).bitmap;
                            image.width = embeddedImages.getItemAt(contentIndex).width;
                            image.height = embeddedImages.getItemAt(contentIndex).height;
                            p.addChild(image);
                            break;
                content.textFlow = new TextFlow();
                content.textFlow.addChild(p);
            private function hasImage(contentText:String):Boolean {
                var textXml:XML = new XML(contentText);
                var imageList:XMLList = textXml.textFlowNS::img;
                if (imageList.length() > 0) {
                    return true;
                } else {
                    return false;
            private function printData():void {
                printJob = new FlexPrintJob();
                lastPage = false;
                if (printJob.start()) {
                    thePrintView = new FormPrintView();
                    addElement(thePrintView);
                    thePrintView.width=printJob.pageWidth;
                    thePrintView.height=printJob.pageHeight;
                    thePrintView.printDataGrid.dataProvider = contentData;
                    thePrintView.showPage("single");
                    if(!thePrintView.printDataGrid.validNextPage) {
                        printJob.addObject(thePrintView);
                    } else {
                        thePrintView.showPage("first");
                        printJob.addObject(thePrintView);
                        while (true) {
                            thePrintView.printDataGrid.nextPage();
                            thePrintView.showPage("last"); 
                            if(!thePrintView.printDataGrid.validNextPage) {
                                printJob.addObject(thePrintView);
                                break;
                            } else {
                                thePrintView.showPage("middle");
                                printJob.addObject(thePrintView);
                    removeElement(thePrintView);
                printJob.send();
        ]]>
    </fx:Script>
</s:Application>
FormPrintView.mxml
===============
<?xml version="1.0"?>
<mx:VBox
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    xmlns:MyComp="myComponents.*"
    backgroundColor="#FFFFFF"
    paddingTop="50" paddingBottom="50" paddingLeft="50"
    >
    <fx:Script>
        <![CDATA[
            import mx.core.*
                public function showPage(pageType:String):void {
                    validateNow();
        ]]>
    </fx:Script>
    <mx:PrintDataGrid
        id="printDataGrid"
        width="60%"
        height="100%"
        showHeaders="false"
        borderVisible="false"
        horizontalGridLines="false"
        variableRowHeight="true"
        >
        <mx:columns>
            <mx:DataGridColumn
                itemRenderer="MyPrintRenderer"
                />
        </mx:columns>
    </mx:PrintDataGrid>
</mx:VBox>
MyPrintRenderer.mxml
=================
<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    xmlns:bslns="com.knownomy.bsl.view.component.*"
    >
    <s:layout>
        <s:VerticalLayout
            paddingLeft="5"
            paddingRight="5"
            paddingTop="3"
            paddingBottom="3"
            gap="5"
            horizontalAlign="left"
            clipAndEnableScrolling="true"
            />
    </s:layout>
    <fx:Declarations>
    </fx:Declarations>
    <s:HGroup
        width="100%"
        gap="5"
        verticalAlign="middle"
        >
        <s:Label
            text="{data.srNo}"
            color="0x000000"
            fontFamily="Verdana"
            fontSize="10"
            />
        <s:RichText
            id="title"
            width="700"
            textFlow="{myTextFlow}"
            color="0x000000"
            fontFamily="Verdana"
            fontSize="10"
            />
    </s:HGroup>
    <fx:Metadata>
    </fx:Metadata>
    <s:states>
        <s:State name="normal" />
        <s:State name="hovered" />
        <s:State name="selected" />
    </s:states>
    <fx:Script>
        <![CDATA[
            import flashx.textLayout.elements.TextFlow;
            [Bindable]
            private var myTextFlow:TextFlow;
            override public function set data(value:Object) : void {
                if (value != null) {
                    super.data = value;
                    myTextFlow = data.textFlow;
        ]]>
    </fx:Script>
</s:MXDataGridItemRenderer>