28 Replies Latest reply on Aug 29, 2011 6:22 AM by Cheree Singal

    Problem in Print - Word wrapping in PrintDataGrid

    Cheree Singal Level 1

      Hi

      I am using Flex 3.4 and am trying to print the data in a DataGrid using FlexDataGrid. For printing the data, I am using PrintDataGrid control. To explain the problem, let us say I have a set of objects of type Obj in the data provider of the DataGrid.

       

      class Obj {

           var prop1:String;

           var prop2:String;

      }

       

      The value of prop2 is a long string but it shows completely in the DataGrid on the screen but the size of the size of the PrintDataGrid is too small to be able to accomodate the value of prop2. So it is not displayed completely on the paper upon printing. Now even if I set variableRowHeight="true" and wordWrap="true" for DataGrid as well as PrintDataGrid, the string is not being warpped on th paper.

       

      But if make the width of the DataGrid small enough to show the prop2 value in multiple lines, then the warpping is done upon printing as well.

       

      Please suggest a work around. In case, I didnt explain it properly, please let me know.

        • 1. Re: Problem in Print - Word wrapping in PrintDataGrid
          Flex harUI Adobe Employee

          Are you using the default renderers in the PrintDataGrid?

          • 2. Re: Problem in Print - Word wrapping in PrintDataGrid
            Cheree Singal Level 1

            I am using the same renderers asused in the DataGrid to be printed. For the strings for which I have mentioned the problem, default renderers are used in DataGrid as well as PrintDataGrid.

            • 3. Re: Problem in Print - Word wrapping in PrintDataGrid
              Flex harUI Adobe Employee

              Post a 20-line test case.

              • 4. Re: Problem in Print - Word wrapping in PrintDataGrid
                Cheree Singal Level 1

                Dint have access to the internet over the weekend...

                I am sorry do you mean a specimen code which can produce the defect?

                • 6. Re: Problem in Print - Word wrapping in PrintDataGrid
                  Cheree Singal Level 1

                  I cudn't make it in 20 lines but I have tried to make as brief as possible.

                  Here is the application mxml:

                  <!--PrintWordWrapTest.mxml-->.

                  <?xml version="1.0" encoding="utf-8"?>
                  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
                        applicationComplete="setDgProvider()">
                        <mx:Script>
                              <![CDATA[

                   

                                    import Printing.components.PrintView;
                                    import com.statestr.rds.printing.PrintHandler;
                                    import Printing.components.FormPrintView;
                                    import mx.printing.FlexPrintJob;
                                    import mx.collections.ArrayCollection;

                   

                                    [Bindable]
                                    private var detailData:ArrayCollection = new ArrayCollection();               

                   

                                    private function setDgProvider():void {
                                          detailData.removeAll();
                                          detailData.addItem(
                                                {sequenceNum:1, distributionId:222222,
                                                destinationTypeName:"Email",
                                                destinationValue:"cheree@organization.comaaaaaaaaaaaaaabbbbbm"});
                                    }

                   

                                    private function doPrint():void {
                                          var printTemplate:PrintViewWordWrap = new PrintViewWordWrap();
                                          printTemplate.dataGrid = distDG;

                   

                                          this.addChild(printTemplate as DisplayObject);
                                          printTemplate.height = this.height;
                                          printTemplate.width = this.width;                    

                   

                                          var flexPrintJob:FlexPrintJob = new FlexPrintJob();
                                          if (flexPrintJob.start()) {
                                                printTemplate.width = flexPrintJob.pageWidth;
                                                printTemplate.height = flexPrintJob.pageHeight;                            
                                                printTemplate.managePrintLayout(flexPrintJob);

                   

                                                flexPrintJob.send();
                                          }
                                          this.removeChild(printTemplate as DisplayObject);
                                    }
                              ]]>
                        </mx:Script>

                   

                              <!--This is the data grid whose data would be printed. -->
                              <mx:DataGrid id="distDG" width="600" height="400"
                                    dataProvider="{detailData}"  horizontalScrollPolicy="auto"
                                    variableRowHeight="true">
                                    <mx:columns>
                                    <mx:DataGridColumn width="{distDG.width * .04}"
                                          dataField="sequenceNum" headerText="SrlNo"/>
                                    <mx:DataGridColumn dataField="distributionId"
                                          width="{distDG.width * .10}" headerText="DistributionId"/>
                                    <mx:DataGridColumn dataField="destinationValue"
                                          width="{distDG.width * .50}" headerText="DestinationValue"/>
                                    <mx:DataGridColumn headerText="DistType"
                                           dataField="destinationTypeName"/>
                                    </mx:columns>
                              </mx:DataGrid>

                   

                              <mx:HBox>       
                                    <mx:Button label="Print" click="doPrint();"/>
                              </mx:HBox>
                  </mx:Application>

                   

                   

                   

                  The template used for printing is:

                  <!--PrintViewWordWrap.mxml-->

                  <?xml version="1.0" encoding="utf-8"?>
                  <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"  backgroundColor="#FFFFFF"
                        xmlns:Comp="components.*" paddingBottom="50" paddingLeft="50" paddingRight="50" paddingTop="50">
                        <mx:Script>
                              <![CDATA[
                                    import mx.utils.ObjectUtil;
                                    import flash.net.registerClassAlias;
                                    import mx.printing.FlexPrintJob;
                                    import mx.controls.dataGridClasses.DataGridColumn;
                                    import mx.controls.DataGrid;

                   

                                    public function get dataGrid():DataGrid {
                                          return _dataGrid;
                                    }

                   

                                    public function set dataGrid(dataGrid:DataGrid):void {
                                          this._dataGrid = dataGrid;
                                    }
                                    private var _dataGrid:DataGrid;

                   

                                    public function managePrintLayout(printJob:FlexPrintJob):void {
                                          createTemplate(printJob);

                   

                                          if (!dataGridToPrint.validNextPage) {
                                                printJob.addObject(this);
                                          } else {
                                                printJob.addObject(this);

                   

                                                while (true) {
                                                      dataGridToPrint.nextPage();

                   

                                                      //If it is last
                                                      if (!dataGridToPrint.validNextPage) {
                                                            printJob.addObject(this);
                                                            break;
                                                      } else {
                                                            printJob.addObject(this);
                                                      }
                                                }
                                          }
                                    }

                   

                                    /**
                                    * Had to restrict the size of the Print Data Grid so that it wud
                                    * be easy to reproduce the defect.
                                     */
                                    private function createTemplate(printJob:FlexPrintJob):void {
                                          dataGridToPrint.width = printJob.pageWidth * .50;
                                    }

                   

                                    public override function validateProperties():void {
                                          super.validateProperties();            

                   

                                          //Assigning the data provider of the data grid to be printed.
                                          var dataProvider:* = dataGrid.dataProvider;
                                          dataGridToPrint.dataProvider = dataProvider;

                   

                                          //Creating a acopy of the columns of the DataGrid to be
                                          //printed to be used for PrintDataGrid.
                                          var columnArray:Array = dataGrid.columns;
                                          var printDGColArr:Array = new Array();
                                          registerClassAlias("mx.controls.dataGridClasses.DataGridColumn", DataGridColumn);
                                          for (var i:int = 0; i < columnArray.length; i++) {
                                                if (columnArray[i] is DataGridColumn) {
                                                      var dataGridColForPrintDG:DataGridColumn =
                                                            ObjectUtil.copy(columnArray[i]) as DataGridColumn;
                                                      dataGridColForPrintDG.labelFunction = (columnArray[i] as DataGridColumn).labelFunction;
                                                      dataGridColForPrintDG.wordWrap = true;
                                                      printDGColArr.push(dataGridColForPrintDG);
                                                }
                                          }
                                          dataGridToPrint.columns = printDGColArr;
                                    }
                              ]]>
                        </mx:Script>

                   

                        <mx:VBox width="100%" height="100%">
                        <mx:PrintDataGrid width="90%" height="400" id="dataGridToPrint"
                              variableRowHeight="true">
                        </mx:PrintDataGrid>
                        </mx:VBox>
                  </mx:VBox>

                   

                   

                  To see the issue, print with is code as it is. And then give a much longer destination value in PrintWordWrapTest.mxml in method setDgProvider().

                  • 7. Re: Problem in Print - Word wrapping in PrintDataGrid
                    Cheree Singal Level 1

                    The code posted above is a working copy. So, hopefully, it should be easy to run it.

                    • 8. Re: Problem in Print - Word wrapping in PrintDataGrid
                      Flex harUI Adobe Employee

                      I don't have 3.4.  I used 3.6.  Without modifying the test case at all, it

                      wrapped in the printview, but the DG wasn't tall enough to show second line.

                      1 person found this helpful
                      • 9. Re: Problem in Print - Word wrapping in PrintDataGrid
                        Cheree Singal Level 1

                        Thanks for checking it out. In th ecode posted above, I have fixed the height of the PrintDataGrid to 400 but I have even tried making it 100%. Even then it doesnt show the complete word wrapped string in the cases where wrapping happens.

                         

                        However, today, let me try with Flex 3.6 and I will get back to you. Thanks a lot.

                        • 10. Re: Problem in Print - Word wrapping in PrintDataGrid
                          Cheree Singal Level 1

                          I just found that Flex 3.6 is not stable build. The last stable build is 3.4. So, anyways I cant use it for my application:(

                          • 11. Re: Problem in Print - Word wrapping in PrintDataGrid
                            Flex harUI Adobe Employee

                            3.6 was officially released with Flash Builder 4.5.  There should be an

                            official release on the opensource foruma s well.

                            • 12. Re: Problem in Print - Word wrapping in PrintDataGrid
                              Cheree Singal Level 1

                              I tried Flex 3.6 over the weekend but it is not giving the same output

                              I have downloaded the sdk from http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+3

                              Then I copied the sdk to the sdksfolder of Flex Builder and built the complete using 3.6 I dont think I missed anything. And I am executing the same example which I copied here.

                              • 13. Re: Problem in Print - Word wrapping in PrintDataGrid
                                Flex harUI Adobe Employee

                                Can you provide a snapshot or PDF of what you are getting?

                                • 14. Re: Problem in Print - Word wrapping in PrintDataGrid
                                  Cheree Singal Level 1

                                  Here is a cropped image of the Print Data Grid on the print-out. This is the only thing which is printed on the page. I just found the options to uplaod an image or a movie. No pdf. Hope this is helpful.

                                   

                                  Flash.png

                                  • 15. Re: Problem in Print - Word wrapping in PrintDataGrid
                                    Flex harUI Adobe Employee

                                    Is your non-print datagrid pretty wide?  What is its width?

                                    • 16. Re: Problem in Print - Word wrapping in PrintDataGrid
                                      Cheree Singal Level 1

                                      The data grid's width is 600. In my actual app, the width is 100%. In  this example, I have set it to 600 so that the 'Destination Value'  column shows up fully on the screen.

                                      • 17. Re: Problem in Print - Word wrapping in PrintDataGrid
                                        Flex harUI Adobe Employee

                                        You posted a test case.  Are you using the exact same test case?  Otherwise,

                                        we cannot compare results.

                                        • 18. Re: Problem in Print - Word wrapping in PrintDataGrid
                                          Cheree Singal Level 1

                                          Yes I am using the exactly same test case which I have posted here.


                                          • 19. Re: Problem in Print - Word wrapping in PrintDataGrid
                                            Flex harUI Adobe Employee

                                            What size paper are you using?  Maybe it is better if you adjust the print

                                            view to use fixed widths.  Right now it is starting at 90% then getting

                                            sized to half the printJob width.  Find a hardcoded number that will

                                            reproduce your problem.

                                            • 20. Re: Problem in Print - Word wrapping in PrintDataGrid
                                              Cheree Singal Level 1

                                              I am printing to Microsoft Image Writer.

                                              I have commented out the below line in PrintViewWordWrap.mxml:

                                              dataGridToPrint.width = printJob.pageWidth * .50;

                                               

                                              And now this is the PrintDataGrid definition I am using:

                                               

                                              <mx:PrintDataGrid width="400" height="100%" id="dataGridToPrint"
                                                          variableRowHeight="true">
                                              </mx:PrintDataGrid>

                                               

                                              This shows the same output to me as I had provided yesterday. Hopefully, you will also get the same.

                                              • 21. Re: Problem in Print - Word wrapping in PrintDataGrid
                                                Flex harUI Adobe Employee

                                                It appears that there is a timing issue when you try to supply a set of

                                                columns to a PrintDataGrid with variableRowHeight=true.

                                                 

                                                The columns should be set in an initialize handler, not in

                                                validateProperties because validateProperties can be called multiple times

                                                and will reset the column sizes after the column sizes have been adjusted.

                                                 

                                                Then, I would call invalidateSize() and invalidateDisplayList() on the

                                                PrintDataGrid in your createTemplate() method to ensure that the

                                                PrintDataGrid gets a second chance at computing the height based on the new

                                                column widths.

                                                 

                                                            private function createTemplate(printJob:FlexPrintJob):void {

                                                                dataGridToPrint.invalidateSize();

                                                                dataGridToPrint.invalidateDisplayList();

                                                            }

                                                 

                                                And I also called validateNow() on the main app after adding the print view

                                                and setting its size and before starting the print job.

                                                 

                                                            private function doPrint():void {

                                                                var printTemplate:PrintViewWordWrap = new

                                                PrintViewWordWrap();

                                                                printTemplate.dataGrid = distDG;

                                                                 

                                                                this.addChild(printTemplate as DisplayObject);

                                                                printTemplate.height = this.height;

                                                                printTemplate.width = this.width;

                                                                validateNow();

                                                                 

                                                                var flexPrintJob:FlexPrintJob = new FlexPrintJob();

                                                • 22. Re: Problem in Print - Word wrapping in PrintDataGrid
                                                  Cheree Singal Level 1

                                                  Hi

                                                  Sorry for the late response...

                                                   

                                                  I tried what  you mentioned above but it doesnt seem to work. Although, because of  adding validateNow() in the main app, I can see the template component  on the screen after the template object is added to the main app using  addChild.

                                                   

                                                  private function doPrint():void {

                                                             var printTemplate:PrintViewWordWrap = new

                                                  PrintViewWordWrap();

                                                            printTemplate.dataGrid = distDG;

                                                   

                                                           this.addChild(printTemplate as DisplayObject);

                                                           printTemplate.height = this.height;

                                                            printTemplate.width = this.width;

                                                            validateNow();

                                                   

                                                             var flexPrintJob:FlexPrintJob = new FlexPrintJob();

                                                   

                                                   

                                                   

                                                  And I am attaching a screen shot of what I see. I can see that the  destination value is wrapped on the PrintDataGrid on the screen but not  on the print-out. Also, in the template, I see that the height os the  print data grid is very less although I have not restrited the height.Screen shot.png

                                                  Here is  close up of the Print Data Grid which I see in th etemplate on the screen:Screen shot1.jpg

                                                  Thanks

                                                  • 24. Re: Problem in Print - Word wrapping in PrintDataGrid
                                                    Cheree Singal Level 1

                                                    PrintWordWrapTest.mxml

                                                     

                                                    <?xml version="1.0" encoding="utf-8"?>
                                                    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"   applicationComplete="setDgProvider()">
                                                        <mx:Script>
                                                            <![CDATA[
                                                    //            import Printing.components.PrintViewWordWrap;
                                                                import Printing.components.PrintView;
                                                                import com.statestr.rds.printing.PrintHandler;
                                                               
                                                                import Printing.components.FormPrintView;
                                                                import mx.printing.FlexPrintJob;
                                                                import mx.collections.ArrayCollection;

                                                     

                                                                [Bindable]
                                                                private var detailData:ArrayCollection = new ArrayCollection();
                                                               
                                                                private function setDgProvider():void {
                                                                    detailData.removeAll();
                                                                    detailData.addItem(
                                                                        {sequenceNum:1, distributionId:222222,
                                                                        destinationTypeName:"Email",
                                                                        destinationValue:"cheree@organization.comaaaaaaaaaaaaaabbbbbm"});
                                                                }
                                                               
                                                                private function doPrint():void {
                                                                    var printTemplate:PrintViewWordWrap = new PrintViewWordWrap();
                                                                    printTemplate.dataGrid = distDG;
                                                                                
                                                                    this.addChild(printTemplate as DisplayObject);
                                                                                   
                                                                    printTemplate.height = this.height;
                                                                    printTemplate.width = this.width;
                                                                    validateNow();
                                                                   
                                                                    var flexPrintJob:FlexPrintJob = new FlexPrintJob();
                                                                   
                                                                    if (flexPrintJob.start()) {
                                                                       
                                                                        printTemplate.width = flexPrintJob.pageWidth;
                                                                        printTemplate.height = flexPrintJob.pageHeight;
                                                                       
                                                                        printTemplate.managePrintLayout(flexPrintJob);
                                                                       
                                                                        flexPrintJob.send();
                                                                    }
                                                                    this.removeChild(printTemplate as DisplayObject);
                                                                }
                                                            ]]>
                                                        </mx:Script>
                                                           
                                                            <!--Thisis the data grid whose data would be printed. -->
                                                            <mx:DataGrid id="distDG" width="600" height="400"
                                                                dataProvider="{detailData}"   
                                                                horizontalScrollPolicy="auto"
                                                                variableRowHeight="true">
                                                                <mx:columns>
                                                                    <mx:DataGridColumn width="{distDG.width * .04}"     dataField="sequenceNum"    headerText="SrlNo"/>
                                                                    <mx:DataGridColumn dataField="distributionId"  width="{distDG.width * .10}" headerText="DistributionId"/>
                                                                    <mx:DataGridColumn dataField="destinationValue"  width="{distDG.width * .50}" headerText="DestinationValue"/>
                                                                    <mx:DataGridColumn headerText="DistType" dataField="destinationTypeName"/>
                                                                </mx:columns>
                                                            </mx:DataGrid>
                                                           
                                                            <mx:HBox>       
                                                                <mx:Button label="Print" click="doPrint();"/>
                                                            </mx:HBox>

                                                     

                                                    </mx:Application>

                                                     

                                                    Template - PrintViewWordWrap.mxml

                                                     

                                                    <?xml version="1.0" encoding="utf-8"?>
                                                    <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
                                                        backgroundColor="#FFFFFF"    xmlns:Comp="components.*"
                                                        paddingBottom="50" paddingLeft="50" paddingRight="50" paddingTop="50"
                                                        initialize="configureTemplate()">
                                                        <mx:Script>
                                                            <![CDATA[
                                                                import mx.utils.ObjectUtil;
                                                                import flash.net.registerClassAlias;
                                                               
                                                               
                                                                import mx.printing.FlexPrintJob;
                                                               
                                                                import mx.controls.dataGridClasses.DataGridColumn;
                                                                import mx.controls.DataGrid;
                                                                                       
                                                                public function get dataGrid():DataGrid {
                                                                    return _dataGrid;
                                                                }
                                                               
                                                                public function set dataGrid(dataGrid:DataGrid):void {
                                                                    this._dataGrid = dataGrid;
                                                                }
                                                                private var _dataGrid:DataGrid;
                                                               
                                                                public function managePrintLayout(printJob:FlexPrintJob):void {
                                                                    createTemplate(printJob);
                                                                   
                                                                    if (!dataGridToPrint.validNextPage) {
                                                                        printJob.addObject(this);
                                                                    } else {
                                                                        printJob.addObject(this);
                                                                       
                                                                        while (true) {
                                                                            dataGridToPrint.nextPage();
                                                                           
                                                                            //If it is last
                                                                            if (!dataGridToPrint.validNextPage) {
                                                                                printJob.addObject(this);
                                                                                break;
                                                                            } else {
                                                                                printJob.addObject(this);
                                                                            }
                                                                        }
                                                                       
                                                                    }
                                                                }
                                                               
                                                                /**
                                                                 * Had to restrict the size of the Print Data Grid so that it wud
                                                                 * be easy to reproduce the defect.
                                                                 */
                                                                private function createTemplate(printJob:FlexPrintJob):void {               
                                                                    dataGridToPrint.invalidateSize();
                                                                    dataGridToPrint.invalidateDisplayList();
                                                                }
                                                               
                                                                public function configureTemplate():void {   
                                                                    //Assigning the data provider of the data grid to be printed.
                                                                    var dataProvider:* = dataGrid.dataProvider;
                                                                    dataGridToPrint.dataProvider = dataProvider;
                                                                   
                                                                    //Creating a acopy of the columns of the DataGrid to be
                                                                    //printed to be used for PrintDataGrid.
                                                                    var columnArray:Array = dataGrid.columns;
                                                                    var printDGColArr:Array = new Array();
                                                                    registerClassAlias("mx.controls.dataGridClasses.DataGridColumn", DataGridColumn);


                                                                    for (var i:int = 0; i < columnArray.length; i++) {
                                                                        if (columnArray[i] is DataGridColumn) {
                                                                            var dataGridColForPrintDG:DataGridColumn =  ObjectUtil.copy(columnArray[i]) as DataGridColumn;
                                                                            dataGridColForPrintDG.labelFunction = (columnArray[i] as DataGridColumn).labelFunction;
                                                                            dataGridColForPrintDG.wordWrap = true;
                                                                            printDGColArr.push(dataGridColForPrintDG);
                                                                        }
                                                                    }
                                                                    dataGridToPrint.columns = printDGColArr;              
                                                                }
                                                               
                                                            ]]>
                                                        </mx:Script>
                                                       
                                                        <mx:VBox width="100%" height="100%">
                                                             <mx:PrintDataGrid width="400" height="100%" id="dataGridToPrint"  variableRowHeight="true"/>
                                                        </mx:VBox>
                                                    </mx:VBox>

                                                    • 25. Re: Problem in Print - Word wrapping in PrintDataGrid
                                                      Flex harUI Adobe Employee

                                                      You test case is showing multiple lines for me.   I am printing to PDF.

                                                      Hopefully someone else can help you figure out why it isn't working for you,

                                                      or you can wait a week.

                                                      • 26. Re: Problem in Print - Word wrapping in PrintDataGrid
                                                        Cheree Singal Level 1

                                                        I didn't try printing out a hard copy. Let me try it out on Monday.

                                                        And till now, no one else has responded to this chain . So, I would be happy to wait for a week.

                                                        • 27. Re: Problem in Print - Word wrapping in PrintDataGrid
                                                          Cheree Singal Level 1

                                                          I tried printing it to paper. What showed up was a possibly wrapped 'Destination value' column but the height of the Print Data grid was not sufficient to show the complete value. The output was identical to the template instance which I see on the screen after clicking on 'Print' button after adding a call to validateNow().


                                                          I had given a screen shot in my post dated July 1st.

                                                           

                                                          I rechecked that I am not setting the height of the Print Data Grid or its rowHeight anywhere. I have just mentioned variableRowHeight='true'.

                                                          Also, I had downloaded the Flex 3.6 SDK from http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+3. Hopefully, its the same SDK which you are using.

                                                          • 28. Re: Problem in Print - Word wrapping in PrintDataGrid
                                                            Cheree Singal Level 1

                                                            Hi

                                                            I am sorry I didnt get time to look into this over the past few weeks.

                                                             

                                                            Flex HarUI, could you please help me with it?