Flex, ActionScript and Related Stuffs

Enjoy!!!!

Printing DataGrid in Flex

Posted by flexrays on August 8, 2007

I had to do a lot of research on printing a Flex datagrid in a decent way.
There are very few resources on the web about printing in Flex. Adobe LiveDocs is an excellent online reference for Flex

I thought of sharing my experience and the way I successfully printed the dataGrid in Flex

See the below code before you start understanding how it works

——————————————————————————————-
<!– FileOne.mxml –>
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}”/>
——————————————————————————————–

<!– 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. Crete an instance of the FlexPrintJob called printJob (you can call anything you want to)

2. Crete 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

Let me know if you have any doubts so that I can help you.

7 Responses to “Printing DataGrid in Flex”

  1. Shannon said

    Quick question. I’m using this functionality for our application that has a very large dataGrid. When printed, the columns are squished. But what bothers me is that this issue is also showing up in the original datagrid in our app after we print! Have you seen this before? Do you know how to fix it by chance? Thanks so much in advance.

  2. Michel said

    I get the same problem… columns are modified after print.

  3. Anybody get a solution to this yet?

  4. glinto said

    If you use XML as dataProvider for the original grid, make sure, you create a copy of it (XML.copy()) and feed that one to the printgrid. This way your original XML data will not be affected.

  5. Alex said

    unfortunately, this example is somehow wrong – it will not print the multi-page grids

    The correct one is here:
    http://livedocs.adobe.com/flex/2/docs/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00000987.html

  6. argentina said

    i have a question about how to set the measures in the paper… because the datagrid is puting in the margin of the page.

  7. andrea said

    Comentario para ejemplo de Flex

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <pre> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>