Kendo Grid Pdf Export

https://stackblitz.com/edit/ng-kendo-grid-export-pdf-kk-12?embed=1&file=app/app.component.ts&view=preview

import { Component } from '@angular/core';
import { products } from './products';
@Component({
    selector: 'my-app',
    template: `
        <kendo-grid
          [data]="gridData"
          [height]="410"
          [rowClass]="rowClass">
            <ng-template kendoGridToolbarTemplate>
                <button kendoGridPDFCommand icon="file-pdf">Export to PDF</button>
            </ng-template>
            <kendo-grid-column field="ProductID" title="ID" width="40">
            </kendo-grid-column>
            <kendo-grid-column field="ProductName" title="Name" width="250">
            </kendo-grid-column>
            <kendo-grid-column field="Category.CategoryName" title="Category" width="250">
            </kendo-grid-column>
            <kendo-grid-column field="UnitPrice" title="Price" width="80">
            </kendo-grid-column>
            <kendo-grid-column field="UnitsInStock" title="In stock" width="80">
            </kendo-grid-column>
            <kendo-grid-column field="Discontinued" title="Discontinued" width="120">
                <ng-template kendoGridCellTemplate let-dataItem>
                    <input type="checkbox" [checked]="dataItem.Discontinued" disabled/>
                </ng-template>
            </kendo-grid-column>
             <kendo-grid-pdf
              fileName="Products.pdf"
              [allPages]="true"
              paperSize="A4"
              [repeatHeaders]="true"
              forcePageBreak=".break">
                <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>
                      Multi-page grid with automatic page breaking
                    </div>
                    <div class="footer">
                      Page {{ pageNum }} of {{ totalPages }}
                    </div>
                  </div>
                </ng-template>
            </kendo-grid-pdf>
        </kendo-grid>
    `
})
export class AppComponent {
  public currentCategoryName: string;
  public gridData: any[] = products.sort((a, b) => a.Category.CategoryName.localeCompare(b.Category.CategoryName));
  public rowClass = (context: any): string => {
    if (!this.currentCategoryName) {
      this.currentCategoryName = context.dataItem.Category.CategoryName;
    }
    if (this.currentCategoryName !== context.dataItem.Category.CategoryName) {
        this.currentCategoryName = context.dataItem.Category.CategoryName;
        this.resetCategoryName(context.index);
        return 'break';
    }
    this.resetCategoryName(context.index);
    return '';
  }
  private resetCategoryName(index: number): void {
    if (index === this.gridData.length - 1) {
        this.currentCategoryName = undefined;
    }
  }
}