PrintDataGrid,percentHeight and multipage layouts
Categories: actionscript, flex
Written By: sebi
I rarely had to create any complex layouts for printing with Flex, until now.
The layout has to have different pages, with different elements on them. The issue is that the PrintDataGrid calculated it’s height right (well, almost) at the first page, but maintained this value to the rest of the pages – instead of recalculating based on that structures.
There is a chapter in the Flex help discussing this scenario: Using the PrintDataGrid control for multipage grids.
I implemented the whole print layout view based on this description, and quickly realized that even the result is not exactly what I wanted.
Print result
The help suggest something that sounds relevant to this issue, but it didn’t solve my problem.
When you use a PrintDataGrid control to print a single data grid across multiple pages, you queue each page of the grid individually. If your application customizes each page beyond simply using the nextPage() method to page through the PrintDataGrid, you must call the validateNow() method to update the page layout before you print each page, as shown in Print output component.
The root of the problem is that the PrintDataGrid’s setActualSize contains an interesting line, which resets the percentHeight of the grid to NaN. As a result, the parent container of the grid won’t resize the grid, even if it’s layout changes, and we call validateNow().
/** * @private * setActualSize() is overridden to update _originalHeight. */ override public function setActualSize(w:Number, h:Number):void { if (!isNaN(percentHeight)) { _originalHeight = h; super.percentHeight = NaN; measure(); h = measuredHeight; } super.setActualSize(w, h); invalidateDisplayList(); if (sizeToPage && !isNaN(explicitHeight)) explicitHeight = NaN; } |
The whole resizing cycle of the grid seemed to be quite complex, so I decided to look for an easier solution than trying to extend-override some of it’s steps, so ended up with the following:
public function showPage( pageType:String ):void { switch( pageType ) { case "first": case "single": meetingInfoExtended.visible = true; meetingInfoExtended.includeInLayout = true; meetingInfo.visible = false; meetingInfo.includeInLayout= false; break; case "middle": case "last": meetingInfoExtended.visible = false; meetingInfoExtended.includeInLayout = false; meetingInfo.visible = true; meetingInfo.includeInLayout= true; break; } printingGrid.percentHeight = 100; validateNow(); } |
Basically re-apply the percentHeight setting in every paging, forcing the grid to recalculate it’s size.
There was another small glitch, what caused a scrollbar to appear in the print layout – at least it tried to appear. I have a multi-line text there, an mx:Text, and I think the text couldn’t calculate it height fast enough, but if I didn’t pass a fixed height to it, the grid miss-calculated it’s height. But only the text caused this problem with the percent heights, other components could handle it.
September 16th, 2011 at 6:12 am
Thanks for post.. We were just building a print view that head custom header/footer and had the same issue. Your percentHeight fix worked perfectly.
We’re still noticing issues priting with the datagrid variableRowHeight but I’m much happier getting this bug fixed first. Thx!