Log in to start a topic

Export FlexGrid to PdfDocument Instance

Posted by: kapil.r.shah on 13 December 2019, 7:11 am EST

  • kapil.r.shah

    Posted 13 December 2019, 7:11 am EST

    I am trying to export FlexGrid to Pdf document using FlexGridConvertor .

    https://www.grapecity.com/wijmo/demos/Grid/ImportExportPrint/PDF/ExpenseReport/angular

    1)On exporting to pdf, the font size for the table comes out small. How do I set the font size for the FlexGridPdfConvertor

    2) While converting the flexGrid to pdf, I want to hide two columns i.e not show two columns? How do I do that?

    Thanks

    gridPdf.FlexGridPdfConverter.draw(flexGrid, doc, doc.width, null, {

    styles: {

    cellStyle: {

    backgroundColor: ‘#ffffff’,

    borderColor: ‘#c6c6c6’

    },

    altCellStyle: {

    backgroundColor: ‘#f9f9f9’

    },

    groupCellStyle: {

    font: { weight: ‘bold’ },

    backgroundColor: ‘#dddddd’

    },

    headerCellStyle: {

    backgroundColor: ‘#eaeaea’

    }

    }

    });

    //

    The font size I have for the pdf Document is

    let doc = new pdf.PdfDocument({

    header: {

    declarative: {

    text: ‘Expense Report\t&[Page]\&[Pages]’,

    font: new pdf.PdfFont(‘times’, 12, ‘normal’),

                }
        },
        lineGap: 2,
        pageSettings: {
            margins: {
                left: 36,
                right: 36,
                top: 36,
                bottom: 36
            }
        },
        ended: (sender: pdf.PdfDocument, args: pdf.PdfDocumentEndedEventArgs) => pdf.saveBlob(args.blob, 'FlexGrid.pdf')
    });

  • ashwin.saxena

    Posted 15 December 2019, 5:21 pm EST

    Hi Kapil,

    To increase the font size of the text, you will need to set the font-size property while drawing the FlexGrid on the PdfDocument:

    gridPdf.FlexGridPdfConverter.draw(grid, doc, doc.width, null, {
      styles: {
        cellStyle: {
          backgroundColor: "#ffffff",
          borderColor: "#c6c6c6",
          font: {
            size: 15
          }
        },
        altCellStyle: {
          backgroundColor: "#f9f9f9",
          font: {
            size: 15
          }
        },
        groupCellStyle: {
          font: { weight: "bold", size: 15 },
          backgroundColor: "#dddddd"
        },
        headerCellStyle: {
          backgroundColor: "#eaeaea",
          font: {
            size: 15
          }
        }
      }
    });

    To hide certain columns, you will need to hide them before the exporting the grid and then show them again:

    grid.beginUpdate();
grid.columns.getColumn("active").visible = false;
grid.columns.getColumn("date").visible = false;
gridPdf.FlexGridPdfConverter.draw(...);
grid.columns.getColumn("active").visible = true;
grid.columns.getColumn("date").visible = true;
grid.endUpdate();

    Regarding the long text:

    We are working on this issue and will update you as soon as possible.

    You may refer to the sample link below that demonstrates the first 2 behaviors:

    https://stackblitz.com/edit/angular-ipydmb

    Regards,

    Ashwin

  • ashwin.saxena

    Posted 18 December 2019, 6:31 pm EST

    Hi Kapil,

    If you wish to export a flexgrid with 8000 characters, I would suggest you to not export the grid as a whole instead create a different layout that will easily accommodate all the characters.

    I could also create a sample for you if you like.

    But, if you wish to export the grid as it is, you can set the font-size for that column to a small value. Also, to export all the characters to the PDF, the description column should display all the data on the DOM. Refer to the sample below for a demo:

    https://stackblitz.com/edit/angular-88xzcw

    ~regards

  • kapil.r.shah

    Posted 19 December 2019, 6:28 am EST

    Hi Ashvin,

    I will discuss with my team if we want a different layout. Instead of setting the font-size to a small value, can we use [wordWrap] = “true” in the flexgrid. Will that move the text to the next line

    I am doing this :

    <wj-flex-grid-column [header]=“‘Activity’” [binding]=“‘Description’” [wordWrap] = “true” [multiLine] = “true” [width]=“625”>

    Thanks

  • ashwin.saxena

    Posted 19 December 2019, 3:45 pm EST

    Hi Kapil,

    If you wish to export all the characters to the PDF, then you will need to use the wordWrap property on the Column. This will show all the characters on the DOM and will easily be exported to PDF.

    And you will need the font-size property to accommodate all the characters on a single page because a single row will only take a single page of PDF and not more than that. Therefore, if the font-size of the description column is large, some of the data will not be shown on the PDF.

    ~regards

  • kapil.r.shah

    Posted 22 February 2020, 12:01 pm EST

    Hi Ashwin,

    I tried your suggesstions on to make the font size smaller

    
      formatItem: function(e: gridPdf.PdfFormatItemEventArgs) {
        if (this.gridDetail.cells === e.panel && this.gridDetail.columns[e.col].binding === 'Description') {
          const data = this.gridDetail.getCellData(e.row, e.col, false);
          e.data = data;
          e.style.font.size = 7;
        }
      }

    https://stackblitz.com/edit/angular-88xzcw

    I get the following error

    error.service.ts:134 TypeError: Cannot read property ‘cells’ of undefined

    at Object.formatItem (activity-log.component.ts:468)

    at e.renderCell (es5-esm.js:14)

    at es5-esm.js:14

    at e.forEach (es5-esm.js:14)

    at t.render (es5-esm.js:14)

    at e.render (es5-esm.js:14)

    at Function.e._drawInternal (es5-esm.js:14)

    at Function.e.draw (es5-esm.js:14)

    at Function.e.drawToPosition (es5-esm.js:14)

    at Function.e.draw (es5-esm.js:14) “/audit”

    I also used Word Wrap on the column but that does not work too.

    <wj-flex-grid-column [header]=“‘Activity’” [binding]=“‘Description’” [wordWrap] = “true” [multiLine]=“true” [width]=“‘4*’”>

  • kapil.r.shah

    Posted 23 February 2020, 5:59 am EST

    Hi Ashvin,

    What would be the different lay out look like to export the data from grid with one column 4000 characters long

    We are using wordWrap = true and multiline = true and thats does not seem to be working

    <wj-flex-grid-column [header]=“‘Activity’” [binding]=“‘Description’” [wordWrap] = “true” [multiLine]=“true” [width]=“‘4*’”>

    https://www.grapecity.com/forums/wijmo/-export-flexgrid-to-pdfdoc#hi-ashvini-will-discuss-wi

    Also in the code, we are trying to set wordWrap and multiline = true and thats not working

    Thanks,

    
this.gridDetail.beginUpdate();
 this.gridDetail.headersVisibility = wjcGrid.HeadersVisibility.Column;
 // this.gridDetail.columns.getColumn('TypeFullName').visible = false;
 this.gridDetail.columns.getColumn('Action').visible = false;
 this.gridDetail.columns.getColumn('ApplicationName').visible = false;
 this.gridDetail.columns.getColumn('Description').multiLine = true;
 this.gridDetail.columns.getColumn('Description').wordWrap = true;
 this.gridDetail.rows.defaultSize = 18;
 // this.gridDetail.autoSizeRows(0, this.gridDetail.rows.length - 1, false, 0);
 // this.gridDetail.columns.getColumn('Description').quickAutoSize = true;
 // this.gridDetail.rows.defaultSize = 30;
 // this.gridDetail.autoSizeRows();
   view.pageSize = 0;



  // draw FlexGrid
  gridPdf.FlexGridPdfConverter.draw(this.gridDetail, doc, doc.width, null,
 {
   customCellContent: false,
   styles: {
       cellStyle: {
           backgroundColor: '#ffffff',
           borderColor: '#c6c6c6',
           font: {size: 6, style: 'normal', family: 'helvetica'}
       },
       altCellStyle: {
           backgroundColor: '#f9f9f9',
           font: {size: 6, style: 'normal', family: 'helvetica'}
       },
       groupCellStyle: {
           font: { weight: 'bold' },
           backgroundColor: '#dddddd'

       },
       headerCellStyle: {
           backgroundColor: '#eaeaea',
           // font: {size: 10, style: 'normal', family: 'times'}
           font: {size: 8}
       }
     },
     formatItem: function(e: gridPdf.PdfFormatItemEventArgs) {
      // console.log('cells', this.gridDetail);
     }
  });

this.gridDetail.headersVisibility = wjcGrid.HeadersVisibility.All;

// this.gridDetail.rows.defaultSize = 18;
view.pageSize = _oldPageSize;
view.moveToPage(_oldPageIndex);
// this.gridDetail.columns.getColumn('TypeFullName').visible = true;
this.gridDetail.columns.getColumn('Action').visible = true;
this.gridDetail.columns.getColumn('ApplicationName').visible = true;
this.gridDetail.columns.getColumn('Description').multiLine = true;
this.gridDetail.columns.getColumn('Description').wordWrap = true;
this.gridDetail.autoSizeRows(0, this.gridDetail.rows.length - 1, false, 0);



this.gridDetail.endUpdate();

  • ashwin.saxena

    Posted 24 February 2020, 5:38 pm EST

    Hi Kapil,

    Regarding the error, this issue is caused because the this.gridDetail is undefined in the formatItem callback because the this reference is changed. You can save the reference to this before exporting the FlexGrid:

    
var self = this;
gridPdf.FlexGridPdfConverter.draw(self.gridDetail, doc, doc.width, null, {
	formatItem: function(e: gridPdf.PdfFormatItemEventArgs) {
		if(self.gridDetail.cells == e.panel && self.gridDetail.columns[e.col].binding == 'description') {
			var data = self.gridDetail.getCellData(e.row, e.col, false);
			e.data = data;
			e.style.font.size = 7;
		}
	}
}

    Regarding the 4000 characters, I cannot provide an exact count on how much characters should be exported but in your case, reducing the font size is the best option.

    Regarding the wordWrap issue, the height of the row may be small due to which the wordWrap applied is not displayed. Try to increase the height of the row by setting the allowResizing property to wijmo.grid.AllowResizing.Both and resize the rows by dragging the bottom of the row header.

    If the data is wrapped, then increasing the height of the row will display the wrapped data.

    ~regards

  • kapil.r.shah

    Posted 27 February 2020, 7:19 am EST

    Hi Ashwin,

    I am able to make the font size small( font size 4) using formatItem . However when I take a print out of the pdf report , its not readable. The client will be taking a print out of the report and then signing off the report.

    So it is important for me to word wrap the description field so it is readable on print out.

    I implemented wijmo.grid.AllowResizing.Both to crease the height of the row. But it did not work

    How do I resize the rows by dragging the bottom of row header.

    Please provide a working sample of doing a word wrap when exporting the flex grid to pdf. That will be helpful

    Thanks

    Please see code below

    
 <wj-flex-grid  #gridDetail (initialized)="initGrid(gridDetail)" (itemsSourceChanged)="change(gridDetail)" [itemsSource]="auditDataCollectionView" [autoGenerateColumns]="false" [isReadOnly]="true"[b] [allowResizing]="'Both'"[/b] style="width: 100%; font-size:10px"  >

              <wj-flex-grid-column [header]="'Date'" [binding]="'EventDateUTC'" [format]="'MM/dd/yyyy hh:mm:ss tt'" [width]="'*'" ></wj-flex-grid-column>
              <wj-flex-grid-column [header]="'Application'" [binding]="'ApplicationName'" [allowResizing] = "false" [width]="'*'" ></wj-flex-grid-column>
              <wj-flex-grid-column [header]="'Category'" [binding]="'TypeFullName'" [allowResizing] = "false" [width]="'*'"></wj-flex-grid-column>
              <wj-flex-grid-column [header]="'Activity Type'" [binding]="'Action'" [allowResizing] = "false" [width]="'*'" ></wj-flex-grid-column>
              <wj-flex-grid-column [header]="'User'" [binding]="'UserName'" [allowResizing] = "false" [width]="'*'"  ></wj-flex-grid-column>
              <wj-flex-grid-column [header]="'Activity'" [binding]="'Description'" [wordWrap] = "true" [multiLine]="true" [width]="'4*'">


             <ng-template  wjFlexGridCellTemplate [cellType]="'Cell'" let-item="item" [autoSizeRows]="false">
               <ng-container *ngIf="item.Url !== null" >
                   <a  target="_blank" href="{{item.Url}}">{{item.Description}}</a>
               </ng-container>
               <ng-container *ngIf="item.Url === null">
               {{ item.Description}}
               </ng-container>
            </ng-template>

          </wj-flex-grid-column>

      </wj-flex-grid>

  • ashwin.saxena

    Posted 1 March 2020, 3:58 pm EST - Updated 3 October 2022, 8:13 am EST

    Hi Kapil,

    Sorry for the late response. Please refer to the sample link below:

    https://stackblitz.com/edit/angular-9fnycl

    In this sample, you can resize the rows by dragging the bottom of the row header. Also, I think in your case, the rows are not auto-sized, that is why wordWrap is not working in the PDF export. In the sample above, I have demonstrated how to size the rows after word-wrap is applied.

    ~regards

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels

  • © 2023 MESCIUS inc. All Rights Reserved.  ·  1.800.858.2739

    All product and company names herein may be trademarks of their respective owners.