Grid Pdf Export Cell Alignement

[Nagendra Gupta]

HI,

Any feature of grid cell alignment at the time of PDF Export?

[Rajapandiyan Settu]

Hi Nagendra, 

Thanks for contacting Syncfusion support.

In EJ2 Grid, the exported columns are aligned based on its textAlign property.

textAlign: https://ej2.syncfusion.com/angular/documentation/api/grid/column/#textalign

 

  <ejs-grid

    #grid

    [dataSource]="data"

    [toolbar]="toolbar"

    (toolbarClick)="toolbarClick($event)"

    [allowExcelExport]="true"

    [allowPdfExport]="true"

    height="350"

  >

    <e-columns>

      <e-column

        field="OrderID"

        headerText="Order ID"

        width="120"

        textAlign="Right"

      ></e-column>

      <e-column

        field="CustomerID"

        headerText="Customer ID"

        width="150"

      ></e-column>

      <e-column

        field="Freight"

        headerText="Freight"

        width="120"

        format="C2"

        textAlign="Right"

      ></e-column>

      <e-column

        field="ShipCountry"

        headerText="Ship Country"

        textAlign="Center"

        width="150"

      ></e-column>

    </e-columns>

  </ejs-grid>

 

If you want to set the textAlign only on exporting, you can achieve this by using the following code in the toolbarClick and pdfExportComplete events.

toolbarClick: https://ej2.syncfusion.com/angular/documentation/api/grid/#toolbarclick

pdfExportCmplete: https://ej2.syncfusion.com/angular/documentation/api/grid/#pdfexportcomplete

  toolbarClick(args): void {

    var cols = this.grid.getColumns(); // get the columns

    switch (args.item.text) {

      case 'PDF Export':
        // change the textAlign of columns

        cols[0].textAlign = 'Center';

        cols[1].textAlign = 'Center';

        cols[2].textAlign = 'Center';

        cols[3].textAlign = 'Center';

        this.grid.pdfExport();

        break;

      case 'Excel Export':

        this.grid.excelExport();

        break;

      case 'CSV Export':

        this.grid.csvExport();

        break;

    }

  }

  pdfExportComplete(args) {

    var cols = this.grid.getColumns();

    // restore the textAlign property of column

    cols[0].textAlign = 'Right';

    cols[1].textAlign = 'Left';

    cols[2].textAlign = 'Right';

    cols[3].textAlign = 'Center';

  }

 

Sample: https://stackblitz.com/edit/angular-zgmn4n?file=app.component.html,app.component.ts

Please get back to us if you need further assistance.

Regards, 

Rajapandiyan S

[Nagendra Gupta]

Thanks for your update.

[Swetha Srikumar]

Most welcome.