Printing in Bulk with Flex

Printing in Bulk with Flex:

This casestudy demonstrates how to use PrintAdvancedDataGrid and a custom itemRenderer to print multiple pages of data and graphics, using the SWFloader component.

---

Final Result Preview

Let’s take a look at the final result we will be working towards – below is an overview of a 12 page PDF printed from a Flex application using the techniques in this article:

---

Demonstrated in This Tutorial:

1. Using FlexPrintJob class.
2. Using PrintAdvancedDataGrid.
3. Creating a custom itemRenderer with a SWFLoader.
4. Printing a header and footer.
5. Filtering a collectionView.
6. Printing a DataGrid with height that exceeds 7500.

---

Some Difficulties With Regards to Flex Printing:

1. Your content or DataGrid rows must all be visible on the stage or they won’t print.
2. Adding manual page breaks is difficult, and achieved through setting your rowHeight to match what you want displayed on each printed page.
3. Flex printing goes haywire if your total PrintAdvancedDataGrid content height is greater than approximately 7500 pixels, necesitating a workaround of multiple PrintAdvancedDataGrids.

---

Step 1: Import the Printing Classes

Begin by importing the necessary print classes, as well as your print renderer into your Flex project:

import mx.printing.FlexPrintJob;
import mx.printing.FlexPrintJobScaleType;
import com.reiman.PrintItemRenderer;

---

Step 2: Create a View for PrintAdvancedDataGrid and itemRenderer

Create a view State for your bulk printing. In my case, I created a state called printState.

*alternatively, you can create an instance of your PrintAdvancedDataGrid and itemRenderer and add them to the stage via actionscript, but for a bulk printing project I found this to be too difficult to work with, and as I was trying to print SWFs that are XML driven, I needed to make sure that my SWFs were displaying correctly before printing.

---

Step 3: Add Your PrintAdvancedDataGrid

<mx:PrintAdvancedDataGrid
  paddingTop="0"
 paddingBottom="0"
 visible="true"
 rowHeight="200"
 sizeToPage="true"
 showHeaders="false"
 id="printGrid"
 creationComplete="stripQuiz();"
 height="{grid_height}"
 width="300">
<mx:columns>
<mx:AdvancedDataGridColumn
 width="200"
 id="printColumn"
 itemRenderer="com.reiman.PrintItemRenderer"
 sortable="false" />
</mx:columns>
</mx:PrintAdvancedDataGrid>

If you need a total printing area greater than 7500 in height, you’ll need another PrintAdvancedDataGrid for each area

---

Step 4: Set Your PrintAdvancedDataGrid options

One thing I found important was to set the option

sizetoPage="true"

According to the PrintDataGrid Control page from the Adobe Flex 3 LiveDocs, the sizeToPage property makes sure that the PrintAdvancedDataGrid control removes any partially visible or empty rows and to resize itself to include only complete rows in the current view.

---

Step 5: Add Your itemRenderer

Add an itemRenderer to your AdvancedDataGridColumn [...]