QueTwo's Blog

thouoghts on telecommunications, programming, education and technology

Printing in Flex (Part 1)

Most people associate Adobe Flex as a great presentation tool, but what most people don’t realize is that Flex also has a very powerful printing engine. There is a component that is not listed on the Components Toolbox known as the <mx:PrintDataGrid>

The PrintDataGrid extends the <mx:DataGrid> component. It has all the same features of the DataGrid, minus the drag/drop, editing, and sorting ability (things you wouldn’t be doing on a printed page anyway <or would you?!>)

So, for example, if you had a new HBox that you wanted to print (i’ll get onto that in a bit), you could include the following code :

<mx:PrintDataGrid width="100%" height="80%" id="myDataGrid" sizeToPage="true" headerHeight="40">
<mx:DataGridColumn headerText="Date/Time" dataField="STARTTIME" labelFunction="formatmyDate" headerWordWrap="true" width="130" fontSize="7"/>
<mx:DataGridColumn headerText="Agent" dataField="LOGID" fontSize="7"/>
<mx:DataGridColumn headerText="ACD Calls" dataField="ACDCALLS" headerWordWrap="true" fontSize="7"/>

This will slap a printable data-grid onto the form, and set the width to the width of the HBox (which will usually be the width of the printable area), and put a few columns. So, why go through this work when you can just print your regular datagrid? Well, this datagrid will setup PAGING for you! For example, if you executed the following code :

// print the next printable form.


This will auto-pagnate your code, assuming you loop as long as their is another "validNextPage".

One thing you will notice in the above code (the mx:PrintDataGrid code), I made the height of the data-grid 80%. Flex uses this value to determine how it should pagnate the data. If you set this value to 100% (as I was doing at first), it will pagnate the data at 100%, and display, maybe 85% of the data. At each page, you will be missing some data.

Part two of this will article will talk about printing with Flex in general. If the above code dosen’t make any sense, read at least part two. This posting really should have been a second posting to the topic, but oh, well


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 )

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s

%d bloggers like this: