Wijmo FlexGrid export to PDF column alignment

Wijmo FlexGrid export to PDF column alignment

Posted by: stephen.inglish on 21 March 2019, 9:01 am EST

• 

  stephen.inglish

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 21 March 2019, 9:01 am EST

  We are using the Angular2 FlexGrid to display disparate data types (string, number, dollar, etc). We want to have the string columns left aligned, and the number columns right aligned. This is working out of the box just fine.

  However, we want the row headers to all have the same alignment (left), and we want that alignment to persist when someone exports to PDF (it’s more noticeable there).

  The current behavior we are experiencing is such that the column headers are aligned according to the column text. You can see this in the demo on your website: https://demos.wijmo.com/5/PureJS/LearnWijmo/LearnWijmo/#equxqkyt

  How can we ensure the alignment of the column headers remains the same?

  Thanks,
  
  Stephen

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 22 March 2019, 1:46 am EST

  Hi Stephen,

  To have the headers with the same alignment all we need to do is set the CSS for the header cells like:
  
  .wj-cell.wj-header{
  
  text-align: left;
  
  }
  
  As for the alignment during the PDF export, we could achieve it in 2 different ways and you may choose the one which suits your requirement:
  
  1). set ‘headerCellStyle’ on the styles object of the FlexGridExport options. Please refer to the following code snippet:
  
  wijmo.grid.pdf.FlexGridPdfConverter.export(theGrid, ‘sample.pdf’, {
  
  customCellContent: false, // set to true to get custom cell content
  
  styles: {
  
  headerCellStyle: {
  
  textAlign: ‘left’ //not required if customCellContent is set to true
  
  }
  
  }
  
  });
  
  A list of possible style value could be found here: https://demos.wijmo.com/5/Angular/WijmoHelp/WijmoHelp/topic/wijmo.grid.pdf.IFlexGridStyle.Interface.html

  2). set ‘customCellContent’ option of the FlexGridExport options. It will tell the grid to compute style for a cell using getComputedStyle(cell) i.e. styles applied using CSS would be exported to the pdf. It is usually slower than the first option but convinent if we need a make a lot of changes.
  
  API ref: https://demos.wijmo.com/5/Angular/WijmoHelp/WijmoHelp/topic/wijmo.grid.pdf.IFlexGridDrawSettings.Interface.html#customCellContent

  Please refer to the following sample demonstrating the same and let us know if you face any issues:
  
  https://jsfiddle.net/k0nm6xLr/

  ~Sharad

• 

  stephen.inglish

  • Post Options:
  • Link
    Copy

  Posted 22 March 2019, 9:34 am EST

  Thank you, we will try this.