Is this a PrintDataGrid bug or restriction or my lack of understanding?

Question

I'm trying to implement PrintDataGrid in my application and I'm encountering a peculiar problem. The printout is skipping last several rows in the printout of each page. I have narrowed down to what's causing this issue. My application-level custom skin provides Flex scrolling capability to the entire application. Presence of this scrollbar in the custom skin is causing PrintDataGrid to skip last rows. In fact, number of rows skipped depends on the height of the browser. If you reduce the browser height, you skip more rows!

Is this a bug PrintDataGrid or a restriction (cannot have PrintDataGrid within Scroller) or I'm missing something?

Please help as I'm struggling with this for several days!

Here is simple code to reproduce the issue:

Main Application:

Application custom skin class:ApplicationSkinCustom.mxml ============================================

@see spark.components.Application

@langversion 3.0 @playerversion Flash 10 @playerversion AIR 1.5 @productversion Flex 4 -->

<fx:Metadata>
    <![CDATA[
    /**
    * A strongly typed property that references the component to which this skin is applied.
    */
    [HostComponent("spark.components.Application")]
    ]]>
</fx:Metadata>

<fx:Script fb:purpose="styling">
    <![CDATA[
        /**
         *  @private
         */
        override protected function updateDisplayList(unscaledWidth:Number,
                                                      unscaledHeight:Number) : void
        {
            bgRectFill.color = getStyle('backgroundColor');
            super.updateDisplayList(unscaledWidth, unscaledHeight);
        }
    ]]>
</fx:Script>

<s:states>
    <s:State name="normal" />
    <s:State name="disabled" />
    <s:State name="normalWithControlBar" />
    <s:State name="disabledWithControlBar" />
</s:states>

<!-- fill -->
<!---
A rectangle with a solid color fill that forms the background of the application.
The color of the fill is set to the Application's backgroundColor property.
-->
<s:Rect id="backgroundRect" left="0" right="0" top="0" bottom="0"  >
    <s:fill>
        <s:SolidColor id="bgRectFill" color="#FFFFFF"/>
    </s:fill>
</s:Rect>

<s:Scroller left="1" top="1" right="1" bottom="1" id="scroller">
    <s:Group left="0" right="0" top="0" bottom="0">
        <s:layout>
            <s:VerticalLayout gap="0" horizontalAlign="justify" />
        </s:layout>

        <!---
        @private
        Application Control Bar
        -->
        <s:Group
            id="topGroup"
            minWidth="0"
            minHeight="0"
            includeIn="normalWithControlBar, disabledWithControlBar"
            >

            <!-- layer 0: control bar highlight -->
            <s:Rect left="0" right="0" top="0" bottom="1" >
                <s:stroke>
                    <s:LinearGradientStroke rotation="90" weight="1">
                        <s:GradientEntry color="0xFFFFFF" />
                        <s:GradientEntry color="0xD8D8D8" />
                    </s:LinearGradientStroke>
                </s:stroke>
            </s:Rect>

            <!-- layer 1: control bar fill -->
            <s:Rect left="1" right="1" top="1" bottom="2" >
                <s:fill>
                    <s:LinearGradient rotation="90">
                        <s:GradientEntry color="0xEDEDED" />
                        <s:GradientEntry color="0xCDCDCD" />
                    </s:LinearGradient>
                </s:fill>
            </s:Rect>

            <!-- layer 2: control bar divider line -->
            <s:Rect left="0" right="0" bottom="0" height="1" alpha="0.55">
                <s:fill>
                    <s:SolidColor color="0x000000" />
                </s:fill>
            </s:Rect>

            <!-- layer 3: control bar -->
            <!--- @copy spark.components.Application#controlBarGroup -->
            <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" minWidth="0" minHeight="0">
                <s:layout>
                    <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="7" paddingBottom="7" gap="10" />
                </s:layout>
            </s:Group>
        </s:Group>

        <!--- @copy spark.components.SkinnableContainer#contentGroup -->
        <!--<s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0" />-->
        <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" />
    </s:Group>
</s:Scroller>

Answer 1

This is apparently a known bug with the Flex printing library and Scroller controls. You can read about my discussions on this here: http://forums.adobe.com/message/3626759

The first thing I would try is getting rid of the custom skin, processing your print job, and then re-applying the custom skin. This might do the trick. If that does work, but doesn't look the way you want, then you can work on creating a variant of your custom application skin that doesn't have a scroller. You would apply that before starting the print job, and then restore the original custom application skin after the print job completes.

The user may briefly see the "alternate" version of your app when they click the print button, but it should only be for a split second at most.

-Josh