aodz

Printing dataGrid in Flex

Posted on: October 16, 2008


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

Advertisements

7 Responses to "Printing dataGrid in Flex"

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?

Hi Dan,

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

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

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

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

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

Hi, I have a small question (very big for me). How can I print two grids one after another: when the first grid is finished, the second one is added right after, not on a diffrent page. Thanks in advance! 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

I have moved to a different location

check out my new home Flexout

calendar

October 2008
M T W T F S S
« Sep   Dec »
 12345
6789101112
13141516171819
20212223242526
2728293031  

Blog Stat

  • 83,725 Hop's so far!!!

follow me

Archives

Linkedin Blogger Twitter Youtube Orkut

Top Clicks

  • None

latest flickr photos

top rated

%d bloggers like this: