Post
Ask Question

Customizing Exported Excel Columns In Kendo Grid For Angular 2

Introduction
 
In my previous article, I discussed how to perform an export to Excel in Kendo Grid for Angular 2. This blog is in continuation of that previous one. Here, I'm going to explain how to customize the column while exporting data to Excel in Kendo Grid.
 
Customizing the Exported Excel Columns in Kendo Grid
 
Let's customize the title of the column while exporting the Kendo Grid data to Excel. By default, the Grid exports its current column, that means it will copy the data from Grid to Excel as it is.
 
 
                                                               Figure 1
 
Click on "Export to Excel" button.
 
 
 
                                                   Figure 2 
 
Data is now exported to Excel; you can notice that the title is same as it was in the Grid.  
 
To customize the exported column which is different from current Grid columns, we need to include <kendo-excelexport-column> component inside the <kendo-grid-excel> component.
 
kendo-grid.component.ts
  1. import { Component } from '@angular/core';  
  2. import { Observable } from 'rxjs/Rx';  
  3. import { CategoriesService } from './kendo-grid.service';  
  4. import { process } from '@progress/kendo-data-query';  
  5. import { ExcelExportData } from '@progress/kendo-angular-excel-export';  
  6. import { State } from '@progress/kendo-data-query';  
  7. import {  
  8.     GridComponent,  
  9.     GridDataResult,  
  10.     DataStateChangeEvent  
  11. } from '@progress/kendo-angular-grid';  
  12. @Component({  
  13.   selector: 'app-kendo-grid',  
  14.   styleUrls: ['./kendo-grid.component.scss'],  
  15.   template: `  
  16.   
  17.        <kendo-grid  
  18.           [data]="view | async"  
  19.           [pageSize]="state.take"  
  20.           [skip]="state.skip"  
  21.           [sort]="state.sort"  
  22.           [sortable]="true"  
  23.           [pageable]="true"  
  24.           [scrollable]="'none'"  
  25.           (dataStateChange)="dataStateChange($event)"  
  26.         >  
  27.         <ng-template kendoGridToolbarTemplate>  
  28.                 <button type="button" kendoGridExcelCommand ><span class="k-icon k-i-file-excel"></span>Export to Excel</button>  
  29.                <button kendoGridPDFCommand><span class='k-icon k-i-file-pdf'></span>Export to PDF</button>  
  30.             </ng-template>  
  31.         <kendo-grid-column field="value" title="S.No" width="100"></kendo-grid-column>  
  32.         <kendo-grid-column field="text" title="Technology" width="200"></kendo-grid-column>  
  33.     <kendo-grid-excel fileName="Technology.xlsx" >  
  34.   
  35.                 <kendo-excelexport-column field="value" title="S.No">  
  36.                 </kendo-excelexport-column>  
  37.                 <kendo-excelexport-column field="text" title="Technology List">  
  38.                 </kendo-excelexport-column>  
  39.   
  40. </kendo-grid-excel>  
  41.       <kendo-grid-pdf fileName="Technology.pdf" [allPages]="true" paperSize="A4" [repeatHeaders]="true" [landscape]="true">  
  42.                 <kendo-grid-pdf-margin top="2cm" left="1cm" right="1cm" bottom="2cm"></kendo-grid-pdf-margin>  
  43.                 <ng-template kendoGridPDFTemplate let-pageNum="pageNum" let-totalPages="totalPages">  
  44.                  <div class="page-template">  
  45.                     <div class="header">  
  46.                       <div style="float: right">Page {{ pageNum }} of {{ totalPages }}</div>  
  47.                     </div>  
  48.                     <div class="footer">  
  49.                       Page {{ pageNum }} of {{ totalPages }}  
  50.                     </div>  
  51.                   </div>  
  52.                 </ng-template>  
  53.             </kendo-grid-pdf>  
  54.       </kendo-grid>  
  55.     `  
  56. })  
  57. export class KendoGridComponent {  
  58.     public view: Observable<GridDataResult>;  
  59.     public state: State = {  
  60.         skip: 0,  
  61.         take: 5  
  62.     };  
  63.   
  64.     constructor(private service: CategoriesService) {  
  65.         this.view = service;  
  66.         this.service.query(this.state);  
  67.     }  
  68.   
  69.     public dataStateChange(state: DataStateChangeEvent): void {  
  70.         this.state = state;  
  71.         this.service.query(state);  
  72.     }  
  73.   
  74.      
  75.   
  76.   
  77. }  
The column is now exported to the Excel as shown in below figure. 
 
 
 
From  the above image, you can notice that the exported column title is changed based on the title mentioned in the kendo-excelexport-column component.
 
I hope you have enjoyed this blog. Your valuable feedback, questions, and comments about this blog are always welcome.  
 
Click here to get the source code.