Export To Excel And PDF In Kendo Grid For Angular

Gowtham K
7y
7.4k
0
2

Article

Introduction

This article tells you how to implement Export to excel and PDF functionality in Kendo Grid with remote data binding for Angular 2. Before going through this article, I strongly recommend you read my previous article, where I have explained how to implement kendo grid for Angular 2.

Please check on the list of Kendo UI component for Angular 2

Content

Configuring Kendo Grid control with remote databinding for Angular 2.
Export to Excel and PDF in Kendo Grid for Angular 2

Configuring Kendo Grid control with remote databinding for Angular 2

Before going to the initial setup of the project, just make sure that the latest versions of Node.js and NPM are installed in your system

Step 1

Install Angular-CLI package, open the command prompt and write the command given below to install Angular CLI package

npm install -g @angular-cli

Step 2

Go to the respective directory, where you need to save your project and run command given below in the command prompt to create a project.

ng new kendoGridAngular --style=scss

kendoGridAngular is our project name.

Step 3

Let’s create a separate folder structure for kendo grid component, run the below command

ng g component Kendo-Grid

The project structure as shown below, which is opened in Visual Studio.

Step 4

Run the below command to install the kendo components.

npm install --save @progress/kendo-angular-grid @progress/kendo-angular-dropdowns @progress/kendo-angular-inputs @progress/kendo-angular-dateinputs @progress/kendo-data-query @progress/kendo-angular-intl @progress/kendo-angular-l10n @progress/kendo-drawing @progress/kendo-angular-excel-export @angular/animations

Step 5

In this step we are going to create a service file, right click on the kendo-grid folder under app folder and add new typescript file, in my case I named it as kendo-grid.service.ts

kendo-grid.service.ts

I'm going to use the API response given below to construct my datasource for Kendo Grid which was created in my previous article.

API - http://github-ci-staging.azurewebsites.net/api/Technologies/TechnologiesList

Type - GET.

Testing the APIs, using POSTMAN.

Step 7

Open app.module.ts file and add the information of Kendo grid and service.

app.module.ts

import { NgModule, enableProdMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpModule } from '@angular/http';
import { GridModule} from '@progress/kendo-angular-grid';
import { AppComponent } from './app.component';
import { KendoGridComponent } from './kendo-grid/kendo-grid.component';
import { CategoriesService } from './kendo-grid/kendo-grid.service';
@NgModule({
declarations: [
AppComponent,
KendoGridComponent
],
imports: [
BrowserModule, BrowserAnimationsModule, GridModule, HttpModule
],
providers: [CategoriesService],
bootstrap: [AppComponent]
})
export class AppModule {
}

Step 8

Open kendo-grid.component.ts and write the code given below in it.

Kendo-grid.component.ts

import { Component } from '@angular/core';
import { Observable } from 'rxjs/Rx';
import { CategoriesService } from './kendo-grid.service';
import { process } from '@progress/kendo-data-query';
import { ExcelExportData } from '@progress/kendo-angular-excel-export';
import { State } from '@progress/kendo-data-query';
import {
GridDataResult,
DataStateChangeEvent
} from '@progress/kendo-angular-grid';
@Component({
selector: 'app-kendo-grid',
styleUrls: ['./kendo-grid.component.scss'],
template: `
<kendo-grid
[data]="view | async"
[pageSize]="state.take"
[skip]="state.skip"
[sort]="state.sort"
[sortable]="true"
[pageable]="true"
[scrollable]="'none'"
(dataStateChange)="dataStateChange($event)"
>
<kendo-grid-column field="value" title="S.No" width="100"></kendo-grid-column>
<kendo-grid-column field="text" title="Technology" width="200"></kendo-grid-column>
</kendo-grid>
`
})
export class KendoGridComponent {
public view: Observable<GridDataResult>;
public state: State = {
skip: 0,
take: 5
};
constructor(private service: CategoriesService) {
this.view = service;
this.service.query(this.state);
}
public dataStateChange(state: DataStateChangeEvent): void {
this.state = state;
this.service.query(state);
}
}

Step 9

Configure the theme

In this step, we are going to install Kendo default theme into our Application. Use the command given below to install the theme

npm install --save @progress/kendo-theme-default

Open the style.scss and write the code given below in it.

@import "~@progress/kendo-theme-default/scss/all"

The code given above is used to integrate Kendo's default theme into our Application.

Step 10

Build the Application

Use the command given below to build and run the Application.

ng-serve

Result

Export to Excel and PDF in Kendo Grid for Angular 2

1. Export to Excel

To implement export to excel functionality, we need to include Kendo-grid-excel component in the grid.

Open app.module.ts, and write the below code

import { NgModule, enableProdMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpModule } from '@angular/http';
import { GridModule, ExcelModule } from '@progress/kendo-angular-grid';
import { AppComponent } from './app.component';
import { KendoGridComponent } from './kendo-grid/kendo-grid.component';
import { CategoriesService } from './kendo-grid/kendo-grid.service';
@NgModule({
declarations: [
AppComponent,
KendoGridComponent
],
imports: [
BrowserModule, BrowserAnimationsModule, GridModule, HttpModule, ExcelModule
],
providers: [CategoriesService],
bootstrap: [AppComponent]
})
export class AppModule {
}

From the above code, it is clear the Excel module is imported from kendo grid to add the export to excel feature in grid

Open kendo-grid.component.ts, and write the below code

import { Component } from '@angular/core';
import { Observable } from 'rxjs/Rx';
import { CategoriesService } from './kendo-grid.service';
import { process } from '@progress/kendo-data-query';
import { ExcelExportData } from '@progress/kendo-angular-excel-export';
import { State } from '@progress/kendo-data-query';
import {
GridDataResult,
DataStateChangeEvent
} from '@progress/kendo-angular-grid';
@Component({
selector: 'app-kendo-grid',
styleUrls: ['./kendo-grid.component.scss'],
template: `
<kendo-grid
[data]="view | async"
[pageSize]="state.take"
[skip]="state.skip"
[sort]="state.sort"
[sortable]="true"
[pageable]="true"
[scrollable]="'none'"
(dataStateChange)="dataStateChange($event)"
>
<ng-template kendoGridToolbarTemplate>
<button type="button" kendoGridExcelCommand ><span class="k-icon k-i-file-excel"></span>Export to Excel</button>
</ng-template>
<kendo-grid-column field="value" title="S.No" width="100"></kendo-grid-column>
<kendo-grid-column field="text" title="Technology" width="200"></kendo-grid-column>
<kendo-grid-excel fileName="Technology.xlsx" ></kendo-grid-excel>
</kendo-grid>
`
})
export class KendoGridComponent {
public view: Observable<GridDataResult>;
public state: State = {
skip: 0,
take: 5
};
constructor(private service: CategoriesService) {
this.view = service;
this.service.query(this.state);
}
public dataStateChange(state: DataStateChangeEvent): void {
this.state = state;
this.service.query(state);
}
}

KendoGridToolbar template is used to display the excel to export button in grid and we need to add Kendo-grid-excel component in the grid to enable the export to excel feature

Result

Click on export to excel to download the data in excel format

2. Export to PDF

To implement export to excel functionality, we need to include Kendo-grid-pdf component in the grid.

Open app.module.ts, and write the below code

import { NgModule, enableProdMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpModule } from '@angular/http';
import { GridModule, ExcelModule, PDFModule } from '@progress/kendo-angular-grid';
import { AppComponent } from './app.component';
import { KendoGridComponent } from './kendo-grid/kendo-grid.component';
import { CategoriesService } from './kendo-grid/kendo-grid.service';
@NgModule({
declarations: [
AppComponent,
KendoGridComponent
],
imports: [
BrowserModule, BrowserAnimationsModule, GridModule, HttpModule, ExcelModule, PDFModule
],
providers: [CategoriesService],
bootstrap: [AppComponent]
})
export class AppModule {
}

From the above code, it is clear the PDF module is imported from kendo grid to add the export to PDF feature in grid

Open kendo-grid.component.ts, and write the below code

import { Component } from '@angular/core';
import { Observable } from 'rxjs/Rx';
import { CategoriesService } from './kendo-grid.service';
import { process } from '@progress/kendo-data-query';
import { ExcelExportData } from '@progress/kendo-angular-excel-export';
import { State } from '@progress/kendo-data-query';
import {
GridDataResult,
DataStateChangeEvent
} from '@progress/kendo-angular-grid';
@Component({
selector: 'app-kendo-grid',
styleUrls: ['./kendo-grid.component.scss'],
template: `
<kendo-grid
[data]="view | async"
[pageSize]="state.take"
[skip]="state.skip"
[sort]="state.sort"
[sortable]="true"
[pageable]="true"
[scrollable]="'none'"
(dataStateChange)="dataStateChange($event)"
>
<ng-template kendoGridToolbarTemplate>
<button type="button" kendoGridExcelCommand ><span class="k-icon k-i-file-excel"></span>Export to Excel</button>
<button kendoGridPDFCommand><span class='k-icon k-i-file-pdf'></span>Export to PDF</button>
</ng-template>
<kendo-grid-column field="value" title="S.No" width="100"></kendo-grid-column>
<kendo-grid-column field="text" title="Technology" width="200"></kendo-grid-column>
<kendo-grid-excel fileName="Technology.xlsx" ></kendo-grid-excel>
<kendo-grid-pdf fileName="Technology.pdf" [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>
</div>
<div class="footer">
Page {{ pageNum }} of {{ totalPages }}
</div>
</div>
</ng-template>
</kendo-grid-pdf>
</kendo-grid>
`
})
export class KendoGridComponent {
public view: Observable<GridDataResult>;
public state: State = {
skip: 0,
take: 5
};
constructor(private service: CategoriesService) {
this.view = service;
this.service.query(this.state);
}
public dataStateChange(state: DataStateChangeEvent): void {
this.state = state;
this.service.query(state);
}
}

KendoGridToolbar template is used to display the excel to PDF button in grid and we need to add Kendo-grid-pdf component in the grid to enable the export to pdf feature.

Result

Click on Export to PDF button to download the data in PDF format

Conclusion

In this article we have seen a basic implementation of export to excel and pdf functionality in kendo grid, will see more custom features in the functionality of Kendo grid for Angular 2 in my future articles

I hope, you have enjoyed this article. Your valuable feedback, questions or comments about this article are always welcome.

References