How to Export data to Excel in Kendo Grid with external button in angular 7?

Question

I'm trying to download excel file from kendo grid data from external button -- not with kendo excel tool bar.

As am new to angular itself i googled to download from external button but i didn't find any details

 <div class="grid-wrapper" *ngIf="!recordsNotFound">


 <kendo-grid [data]="gridView" [pageSize]="pageSize" [resizable]="true" id="dataEntry"
          [skip]="skip"
          [pageable]="true"
          [selectable]="true"
          [sortable]="true"
          (sortChange)="sortChange($event)"
          (selectionChange)="onSelection($event)"
          (pageChange)="pageChange($event)">
<kendo-grid-messages noRecords="">
</kendo-grid-messages>
<kendo-grid-column *ngFor="let column of columns"
                   field="{{column.field}}"
                   title="{{column.title}}"
                   format="{{column.format}}"
                   width="100"
                   media="(min-width: 320px)"
                   hidden="{{column.isHidden}}"
                   filter="{{column.type}}"></kendo-grid-column>

<ng-template kendoPagerTemplate let-totalPages="totalPages" let-currentPage="currentPage">
  <kendo-pager-prev-buttons></kendo-pager-prev-buttons>

  <kendo-pager-info></kendo-pager-info>
  <kendo-pager-next-buttons></kendo-pager-next-buttons>

</ng-template>

Answer 1

You can try something like this:

First you add a button in your template and you add a reference for the grid component with the # notation:

<p>
   <button (click)="exportToExcel(grid)">Export Grid to Excel...</button>
</p>
<kendo-grid #grid="kendoGrid" ... >

Then you add the method exportToExcel in your .ts file:

public exportToExcel(grid: GridComponent): void {
  grid.saveAsExcel();
}

This is also available on the Kendo web site for Angular Grid documentation: Trigger Export Externally.