October 16, 2008 8

Printing dataGrid in Flex

By in flex

There are very few resources on the web about printing in Flex. Adobe LiveDocs is an excellent on-line reference for Flex. I thought of sharing my experience and the way I successfully printed the dataGrid in Flex.

Example below: shows how to call a function to print a datagrid

public function printDataGrid() : void
{
var printJob : FlexPrintJob = new FlexPrintJob();
var thePrintView : FormPrintView = new FormPrintView();
Application.application.addChild(thePrintView);
if(printJob.start() != true)
return;

//Set the print view properties.
thePrintView.width=printJob.pageWidth;
thePrintView.height=printJob.pageHeight;
thePrintView.printableDataGrid.dataProvider = originalDataGrid.dataProvider
thePrintView.printableDataGrid.columns = originalDataGrid.columns ;
thePrintView.printableDataGrid.setStyle(”fontSize”, 8);
thePrintView.printableDataGrid.setStyle(”wordWrap”, true);
printJob.addObject(thePrintView);

printJob.send();
Application.application.removeChild(thePrintView);
}

<mx:DataGrid id=”originalDataGrid” width=”100%” height=”100%” dataProvider=”{dataForGrid}”/>

Example below: shows printview

<!– FormPrintView.mxml –>
<mx:VBox xmlns:mx=”http://www.adobe.com/2006/mxml”>
<mx:PrintDataGrid id=”printableDataGrid” width=”90%” height=”100%”>
<!– Specify the columns to ensure that their order is correct. This is not mandatory–>
</mx:PrintDataGrid>
</mx:VBox>

Below are the simple steps to print the DataGrid in Flex

1. Create an instance of the FlexPrintJob called printJob (you can call anything you want to)

2. Create an instance of the PrintDataGrid in another MXML file FormPrintView.mxml and create an instance of that – thePrintView (if you create<mx:PrintDataGrid/> in  the same MXML, which uses the function –> printDataGrid() then the application reservers some place for <mx:PrintDataGrid/> component. This looks a bit ugly as we do not want to see that extra space in our application). Always use PrintGrid class to print the dataGrid instead of the DataGrid, which originally displays content in the application, as it is tailored to print DataGrid in flex

3. Add the thePrintView object to the application container

“Application.application.addChild(thePrintView);”

4. Only one print job can be active at a time. So check to see if the printJob.start() is true. Start printing when it is true

5. Set the height, width properties of the thePrintView object to the pageWidth and pageHeightof the pringJob object

6. Assign the dataProvider of the DataGrid to be printed to the instance of the PrintDataGrid class, You also need to set the columns of the original dataGrid to the thePrintView object. You can also control the appearance of the printDataGrid object as follows

printDataGrid.setStyle(”fontSize”, 8);
printDataGrid.setStyle(”wordWrap”, true);

7. Use addObject method to add object to the printJob instance

8. Use printJob.send() to send the print job to a printer

print datagrid
Download source here

Tags: , , ,

8 Responses to “Printing dataGrid in Flex”

  1. Dan says:

    I am trying to print with a PrintDataGrid. However, my issue is that on page 1 I need the PrintDataGrid to be only 460px high, and then on all subsequent pages I need the PrintDataGrid to fill the page, when i try to do this I get some weird blank spaces.
    Have you ever tried to print with the PrintDataGrid changing sizes?

  2. vx says:

    Hi Dan,

    Sorry i haven’t tried that out myself but since you have pointed it out i will try and repost it here.

  3. vania says:

    Hi,

    I have a problem… i want to save a “printDataGrid” as print.as, but i cant do:
    Application.application.addChild(thePrintView); (*)

    because it don’t see application, the error is:
    Access of undefined property Application

    If i delete this line (*) when application run, launch error (object null) in line :

    thePrintView.printableDataGrid.dataProvider = originalDataGrid.dataProvider

    Then i dont know how i can fix this problem, because, i need replace this line:
    Application.application.addChild(thePrintView); (*)

    for other, that can add thePrintview to application container…

    i hope that you can help me….
    im very grateful

  4. vx says:

    Hi Vania,

    i am unable to understand your question completely could you please specify what you want to achieve by removing that line?

    i have included the working code in the post please view the code and test it for yourself.

    I will only be able to help you if i understand the problem completely.

    thanks & regards
    Vikram

  5. praveen says:

    hi,
    when iam trying to use the above given code , an error is raised that datagrid.vposition is not defined. any other reference iam missing

  6. vx says:

    hi praveen
    sorry for the delayed reply, I have the code running fine for me. can you copy and paste the exact error string. so that i can isolate the problem and let u know asap

    thanks

  7. Saagar says:

    Hi

    How can i print a grid having itemrenderers?

  8. Kumar Shah says:

    The example posted to print datagrid does not work any more.

    I get the following error:

    Error: Error #1502: A script has executed for longer than the default timeout period of 15 seconds.
    at mx.core::UIComponent/callLaterDispatcher2()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\core\UIComponent.as:8624]
    at mx.core::UIComponent/callLaterDispatcher()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\core\UIComponent.as:8568]
    at flash.printing::PrintJob/_invoke()
    at flash.printing::PrintJob/addPage()
    at mx.printing::FlexPrintJob/addObject()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\printing\FlexPrintJob.as:384]
    at printdatagrid/printDataGrid()[D:\PVCSWORK\myKIOSC\src\printdatagrid.mxml:23]
    at printdatagrid/___printdatagrid_Button1_click()[D:\PVCSWORK\myKIOSC\src\printdatagrid.mxml:44]

    Is this a Flash Player issue. I am using Flash Player 10.0…

    Thank you for your help in advance.

Leave a Reply