Make Column Headers Bold While Exporting

Make Column Headers Bold While Exporting

Posted by: parmarav on 13 November 2017, 4:27 pm EST

• 

  parmarav

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 13 November 2017, 4:27 pm EST

  Hi Team,
  
  I want to make column headers bold and text-align - Center while exporting flexGrid. I am using the following code:

  
  this.flexGrid.itemsSource = this.exportDataSource;
          let workBookFont = new WorkbookFont();
          workBookFont.bold = true;
  wjcGridXlsx.FlexGridXlsxConverter.save(this.flexGrid, {
              includeColumnHeaders: true,
              includeCellStyles: true,
              formatItem: (args: XlsxFormatItemEventArgs) => {
                  let panel = args.panel, xlsxCell = args.xlsxCell, col = args.col;
                  if (panel.cellType === wjcGrid.CellType.Cell && col == 1) {
                      xlsxCell.style.font = workBookFont;
                  }
              }
          }, fileName);
  
  

  I am unable to make column headers as bold.

  Thanks
  
  Anshul Parmar

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 13 November 2017, 4:51 pm EST

  Hi Anshul,
  
  You need not to handle formatItem for making ColumnHeader text bold. The FlexGrid will be exported in bold default if you set includeCellStyles and includeColumnHeaders to true. For refrence, please refer to the attached sample for the same.

  Please let us know if you have any further queries.

  ~ManishFlexGrid_export_xlsx.zip

• 

  parmarav

  • Post Options:
  • Link
    Copy

  Posted 13 November 2017, 5:46 pm EST

  Hi Manish,
  
  Thanks for your prompt reply.
  
  I have set includeColumnHeaders: true, includeCellStyles: true already as can be seen in the query I had posted.
  
  I suppose because I am using createColumns and mergeColumns methods as I have to group columns as shown in this link : http://jsfiddle.net/Wijmo5/gobtdg7t/
  
  This may be causing the cells to not to copy Style properties (this is my guess).
  
  My columns are as belowe :

  { header: ‘ABCD’, binding:‘ABCD’, width: 65, dataType: ‘Number’, align: ‘right’, cssClass: ‘column-header’ }

  column-header class is not being applied on cells.

  Thanks
  
  Anshul Parmar

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 14 November 2017, 12:17 am EST

  Hi Anshul,
  
  The fiddle is using older build. We have update it to newer build and found it working as expected. Please refer to the fiddle for the same:
  
  http://jsfiddle.net/gobtdg7t/35/

  Let me know if the issue persists.

  ~Manish

• 

  parmarav

  • Post Options:
  • Link
    Copy

  Posted 15 November 2017, 8:51 pm EST

  Hi Manish,
  
  Thanks for your reply.
  
  I have upgraded to the latest build.

  Now my application is using
  
  “tslint”: “3.15.1”,
  
  “typescript”: “2.0.2”

  I am getting the below error on compiling :-
  
  
  
  with the latest version of wijmo.

  Currently I am using :
  
  “tslint”: “3.15.1”,
  
  “typescript”: “2.0.2”,
  
  “wijmo”: “http://prerelease.componentone.com/wijmo5/npm-images/C1Wijmo-Enterprise-Eval-System-5.20171.300.tgz”
  
  with which css classes were not applying successfully.

  Is there any build of Wijmo which will work with this version of typescript and tslint and apply css classes ?

  I am using the following code :

  wjcGridXlsx.FlexGridXlsxConverter.save(this.flexGrid, {
  
  includeColumnHeaders: true,
  
  includeCellStyles: true
  
  }, fileName);

  Thanks
  
  Anshul Parmar

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 15 November 2017, 9:05 pm EST

  HI Anshul,
  
  For your information, 5.20171.300 is not our latest release. We have shipped the latest build 5.20173.380 yesterday. The build 5.20171.300 released in March 2017.

  You need to update the CSS file manually by copying into your project.

  Could you please let us know the angular version using in your project?

  ~Manish

• 

  parmarav

  • Post Options:
  • Link
    Copy

  Posted 16 November 2017, 3:04 pm EST

  Hi Manish,
  
  Currently I am using :

  “@angular/common”: “2.2.4”,
  
  “@angular/compiler”: “2.2.4”,
  
  “@angular/core”: “2.2.4”,
  
  “@angular/forms”: “2.2.4”,
  
  “@angular/http”: “2.2.4”,
  
  “tslint”: “3.15.1”,
  
  “typescript”: “2.0.2”,
  
  “wijmo”: “http://prerelease.componentone.com/wijmo5/npm-images/C1Wijmo-Enterprise-Eval-System-5.20171.300.tgz”

  on upgrading to latest build I am getting the above posted error.

  As I cannot update to Angular 4 right now, because that would be a breaking change for the application, I want Wijmo to work properly with existing versions of Angular and Typescript.

  Thanks
  
  Anshul Parmar

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 19 November 2017, 4:40 pm EST

  HI Anshul,
  
  We recommend you to use CommonJS modules in your project with TS version 2.2 or above. There should be no issue with upgrading to typescript.

  If the issue persists, please share the sample depicting your issue.

  ~Manish

• 

  parmarav

  • Post Options:
  • Link
    Copy

  Posted 21 November 2017, 10:09 pm EST

  Hi Manish,
  
  Please look at the following code. I cannot update my app to TS 2.2 because it breaks other packages also. I need to run on the TS version specified in this code.

  Wijmo-Upgrade-Check.zip

  Thanks
  
  Anshul Parmar

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 22 November 2017, 9:31 pm EST

  Hi Anshul,

  We recommend you to upgrade to latest TS to adapt all new changes. Our development team update Control code to adapt new changes in technologies.

  The new build released contains bug fixes and new updates. Hence, it would be good upgrade TS to get all changes.

  However, we have forwarded this issue to the concerned team for further investigation. We will let you know as we get any update on this.

  ~Manish