Printing Multiple Pages Using PrintDataGrid

In the previous tutorial, we knew How to Use Flex Build-in Print Class – FlexPrintJob. It’s simple to use. But you may face some challenges when print multiple pages. Here is why:

To start to print on a new page, you need to write a code like this:

printJob.addObject(targetComponent);

It  adds your component to FlexPrintJob. But how many pages is it going to take?

The typical example is DataGrid. It might contains 1 or 1000 records. There is no way we can predetermine the size when binding with a dynamic data provider. Plus how do you know where to put the page break, like record 1-17 on page 1,  18-30 on page 2 …?

Fortunately, Flex gives you a workaround to solve DataGrid printing issue. Here is how:

Things You Need

  • mx.printing.FlexPrintJob
  • mx.printing.PrintDataGrid

Steps You Do

1. Create a FlexPrintJob Instance     
   var flexPrintJob: FlexPrintJob = new FlexPrintJob();

2. Start FlexPrintJob
   flexPrintJob.start();

3. Create PrintDataGrid 
   var myPrintData:PrintDataGrid = new PrintDataGrid();
   Application.application.addChild(myPrintData);

4. Set PrintDataGrid's DataProvider(from DataGrid), Width, and Height
   myPrintData.dataProvider = myData.dataProvider;
   myPrintData.width = printJob.pageWidth;
   myPrintData.height = printJob.pageHeight;

5. Loop PrintDataGrid to Generate Multiple Print Pages
   printJob.addObject(myPrintData);
   while (myPrintData.validNextPage) {
   	  myPrintData.nextPage();
    	  printJob.addObject(myPrintData);
   }

6. Print
   printJob.send();

Sample Code

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute"
    initialize="init()">

    <mx:Script>
    	<![CDATA[
    	import mx.printing.PrintDataGrid;
    	import mx.printing.FlexPrintJob;
    	import mx.collections.ArrayCollection;

    	[Bindable]
    	public var dataSource:ArrayCollection = new ArrayCollection();

        private var totalRecords:Number = 100;

    	private function init():void {
		for (var i:int = 1; i<=totalRecords; i++) {
    		  var dataObject:Object = new Object();
    		  dataObject.Name = "Name #" + i;
    		  dataObject.Phone = "Phone #" + i;
    		  dataObject.Address = "Address #" + i;
    		  dataSource.addItem(dataObject);
    		}
    	}

    	private function doPrint():void {
    		var printJob:FlexPrintJob = new FlexPrintJob();
    	   	if (printJob.start()) {
       		  var myPrintData:PrintDataGrid = new PrintDataGrid();
     	   	  Application.application.addChild(myPrintData);
         	  myPrintData.dataProvider = myData.dataProvider;
    	   	  myPrintData.width = printJob.pageWidth;
    	   	  myPrintData.height = printJob.pageHeight;

    	   	  printJob.addObject(myPrintData);
    	   	  while (myPrintData.validNextPage) {
    	   		myPrintData.nextPage();
    	   		printJob.addObject(myPrintData);
    	   	  }
    	   	  Application.application.removeChild(myPrintData);

                  printJob.send();
    	        }
    	}

    	]]>
    </mx:Script>

    <mx:Panel title="Flex Tutorial - PrintDataGrid"
    	width="500" height="500"
    	horizontalCenter="0" verticalCenter="0"
    	horizontalAlign="center" verticalAlign="middle">

        <mx:DataGrid id="myData"
            dataProvider="{dataSource}"
            width="400" height="400" />

        <mx:Button label="Print" click="doPrint()"/>

    </mx:Panel>

</mx:Application>

Conclusion

Adobe Flex provides PrintDataGrid to solve the problem of multiple pages printing. It works fine when your application mainly contains one big DataGrid.

However, life is not that simple. In many cases, you need to have a combination of different contains and controls like Canvas, VBox, HBox, Label, Text, Text Area, Image, plus DataGrid. Unfortunately, until Flex 3,  Adobe has not provided any better solution beyond FlexPrintJob and PrintDataGrid.

So, is there any 3rd party solution? I have done a lot of research. Eventually it narrows down to an open source project. This leads to our next tutorial – Printing Multiple Pages using FlexReport.

About Bryan
Bryan Li has more than 10 years business consulting and project development experience with major corporate clients including Sony, Bank of Montreal, Bruce Power, etc. As a fan and advocate for RIA(Rich Internet Application) technologies, Bryan helps companies and developers learn, design, and build richer applications using Adobe Flex.

3 Comments on Printing Multiple Pages Using PrintDataGrid

  1. Tahir Alvi // October 29, 2009 at 2:32 am //

    Thanks again.
    Sir i am involve in a project in which i need to print the images.

    Please refer me some more good tips.
    send me at : alvijee@gmail.com

  2. nice! I am looking for a demo, iam checking it

  3. Hi Bryan

    This is Eswar,Very cool application.Is it possible to Export both the pages at a Time,When i tried from your application i can able to Export first page twice if iam in first page while exporting,My requirement is if you are in first or second page i need to export all pages

Leave a comment

Your email address will not be published.

*