Exclude last columns while export to pdf - Angular 6 Kendo

Question

i am trying to exclude last column while exporting grid to pdf.

This is my pdf export component that i am using it in different components.
This app kendo pdf component

<kendo-grid-pdf fileName="{{pdfname}}" [allPages]="true" paperSize="A4" [repeatHeaders]="true" [landscape]="true" >
  <kendo-grid-pdf-margin top="2cm" left="1cm" right="1cm" bottom="2cm"></kendo-grid-pdf-margin>
  <ng-template kendoGridPDFTemplate let-pageNum="pageNum" let-totalPages="totalPages">
   <div class="page-template">
      <div class="header">
        <div style="float: right">Page {{ pageNum }} of {{ totalPages }}</div>
       {{componentName}}
      </div>
      <div class="footer">
        Page {{ pageNum }} of {{ totalPages }}
      </div>
    </div>

  </ng-template>
</kendo-grid-pdf>
<kendo-grid-excel fileName="{{pdfname}}"></kendo-grid-excel>

This a grid that i want to export :

<kendo-grid [data]="gridData" [height]="409" [pageSize]="state.take"
[skip]="state.skip"
[sort]="state.sort"
[filter]="state.filter"
[sortable]="true"
[pageable]="true"
[filterable]="true"
(dataStateChange)="dataStateChange($event)">
<ng-template kendoGridToolbarTemplate>
  <button class="kendo-pdf" kendoGridPDFCommand icon="file-pdf">Export to PDF</button>
  <button class="kendo-excel" type="button" kendoGridExcelCommand icon="file-excel">Export to Excel</button>
</ng-template>
  <kendo-grid-column field="name" title="Name" width="50" filter="text" format="{0:c}">
  </kendo-grid-column>
  <kendo-grid-column field="age" title="Age" width="50" filter="numeric" format="{0:c}">
  </kendo-grid-column>
  <kendo-grid-column field="city" title="City" width="50">
  </kendo-grid-column>
  <kendo-grid-column width="20" field="Edit / Delete" filter="false">
      <ng-template kendoGridCellTemplate let-dataItem  >
        <a (click)="showConfirmation()"> <i class="fa fa-trash" ></i></a>
        <a [routerLink]="['/addEmployee']" routerLinkActive="router-link-active"  > <i class="fa fa-edit"></i></a>
      </ng-template>
  </kendo-grid-column>  
  <app-kendoPDF [componentName]=name></app-kendoPDF>

I want to exclude edit/delete field while exporting

Edit : This what i tried but didn't work

in order components :

kendo-grid [data]="gridData" [height]="409" [pageSize]="state.take" [skip]="state.skip" [sort]="state.sort" [filter]="state.filter"
  [sortable]="true" [pageable]="true" [filterable]="true" (dataStateChange)="dataStateChange($event)">
  <ng-template kendoGridToolbarTemplate>
    <button  class="kendo-pdf" kendoGridPDFCommand icon="file-pdf">Export to PDF</button>
    <button class="kendo-excel" type="button" kendoGridExcelCommand icon="file-excel">Export to Excel</button>
  </ng-template>
  <kendo-grid-column field="orderNumber" title="Order Number" width="20" filter="text">
  </kendo-grid-column>
  <kendo-grid-column field="orderTable" title="Order Table" width="20" filter="text" format="{0:c}">
  </kendo-grid-column>
<app-kendoPDF [componentName]=name>
    <kendo-grid-column field="orderNumber" title="Order Number">
    </kendo-grid-column>
    <kendo-grid-column field="orderTable" title="Order Table">
    </kendo-grid-column>
</app-kendoPDF>
</kendo-grid>

KendoPdf Component :

<kendo-grid-pdf fileName="{{pdfname}}" [allPages]="true" paperSize="A4" [repeatHeaders]="true" [landscape]="true" >
  <kendo-grid-pdf-margin top="2cm" left="1cm" right="1cm" bottom="2cm"></kendo-grid-pdf-margin>
  <ng-template kendoGridPDFTemplate let-pageNum="pageNum" let-totalPages="totalPages">
   <div class="page-template">
      <div class="header">
        <div style="float: right">Page {{ pageNum }} of {{ totalPages }}</div>
       {{componentName}}
      </div>
      <div class="footer">
        Page {{ pageNum }} of {{ totalPages }}
      </div>
    </div>
  </ng-template>
  <ng-content></ng-content>
</kendo-grid-pdf>
<kendo-grid-excel fileName="{{pdfname}}"></kendo-grid-excel>

Shai Shai · Accepted Answer · 2018-12-23T14:07:39

You can do this by using kendo-grid-column components inside your kendo-grid-pdf component, like this:

<kendo-grid-pdf
    fileName="ProductsPrice.pdf"
    paperSize="A4"
    [scale]="0.8"
    [repeatHeaders]="true"
    [margin]="{ top: '1cm', left: '1cm', right: '1cm', bottom: '1cm' }">
        <kendo-grid-column field="ProductName" title="Name">
        </kendo-grid-column>
        <kendo-grid-column field="UnitPrice" title="Price">
        </kendo-grid-column>
</kendo-grid-pdf>

Place a kendo-grid-column component for each column you want to appear in the PDF.

Since you use the same PDF export component in multiple places and the columns change in each case, you can customize the columns for each case using the ng-content tag.

To do this, add <ng-content></ng-content> inside the kendo-grid-pdf component that's inside the app-kendoPDF component and put the kendo-grid-column components, when you need them, in the template of the component that uses the app-kendoPDF component, like this:

In the app-kendoPDF component's template:

<kendo-grid-pdf fileName="{{pdfname}}" [allPages]="true" paperSize="A4" [repeatHeaders]="true" [landscape]="true" >
    <kendo-grid-pdf-margin top="2cm" left="1cm" right="1cm" bottom="2cm"></kendo-grid-pdf-margin>
    <ng-template kendoGridPDFTemplate let-pageNum="pageNum" let-totalPages="totalPages">
        <div class="page-template">
            <div class="header">
                <div style="float: right">Page {{ pageNum }} of {{ totalPages }}</div>
                {{componentName}}
            </div>
            <div class="footer">
                Page {{ pageNum }} of {{ totalPages }}
            </div>
        </div>
    </ng-template>
    <!--Add this to have the kendo-grid-column components from the code below appear here-->
    <ng-content></ng-content>
</kendo-grid-pdf>
<kendo-grid-excel fileName="{{pdfname}}"></kendo-grid-excel>

In the second template you included, instead of simply <app-kendoPDF [componentName]=name></app-kendoPDF>:

<app-kendoPDF [componentName]=name>
    <kendo-grid-column field="<name of column #1>" title="<name of column #1>">
    </kendo-grid-column>
    <kendo-grid-column field="<name of column #2>" title="<name of column #2>">
    </kendo-grid-column>
    <kendo-grid-column field="<name of column #3>" title="<name of column #3>">
    </kendo-grid-column>
    <!--And so on...-->
</app-kendoPDF>

You can read more about the PDF export in the Kendo documentation here.

Exclude last columns while export to pdf - Angular 6 Kendo

1 Answers