Printing DataGrid in Flex

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.

---

Possibly related posts: (automatically generated)

• On Creating Flex Applications
• Things to take care of while building Flex Web Applications
• Embarking on Adventures in Flex Multipage Printing