CODEWITHSUNDEEP
kendo-uikendo-gridkendo-ui-angular2
Satya
Satya

Reputation: 525

Exporting excel for multiple dynamic kendo grids in Angular 2

I am developing a web page which contains multiple Kendo grid components based on user input. My requirement is to export all these grids to excel report. I implemented Kendo-grid excel export for each grid and it is working as expected but to bring a common export button for all these dynamic grids how can i proceed. I am using angular 2 to implement this feature. Can I use a common reference variable for all these grids? please suggest.

Upvotes: 2

Views: 2078

Answers (1)

Aneesh Gopalakrishnan
Aneesh Gopalakrishnan

Reputation: 702

Please refer to the answer to this question. It will help you combine all the worksheets from multiple sources - Kendo UI for Angular 2: Excel export having multiple worksheets

If you like to manipulate the worksheets yourself, please see this plunker wrote by me. It shows how you can add rows(Either as header or data) - As of this writing, this is not documented.

Relevant Code:

import { Component } from '@angular/core';
import { products } from './products';

@Component({
    selector: 'my-app',
    template: `
        <button type="button" class="k-button" (click)="save(excelexport)">Export To Excel</button>

        <kendo-excelexport #excelexport [data]="data" [fileName]=downloadFileName>
            <kendo-excelexport-column field="ProductID" title="Product ID" [width]="75">
            </kendo-excelexport-column>
            <kendo-excelexport-column field="ProductName" title="Product Name">
            </kendo-excelexport-column>
            <kendo-excelexport-column field="SomeDate" title="Start Date" [cellOptions]="{ format: 'mm/dd/yyyy' }"></kendo-excelexport-column>
      </kendo-excelexport>
    `
})
export class AppComponent {
    public data: any[] = products;
    public downloadFileName: string = "Report - Rates.xlsx"

    public save(component): void {
        const options = component.workbookOptions();

        options.sheets[0].name = `Rate Card Report`;

        let rows = options.sheets[0].rows;
        let infoRows = [
          { cells: [{value: "12345"}], type: 'data', xyz: 1 },
          { cells: [{value: "My stuff LLC"}], type: 'data', xyz: 1 },
          { cells: [{value: "2 Fun Street"}], type: 'data', xyz: 1 },
          { cells: [{value: "Rye, NY - 10580"}], type: 'data', xyz: 1 },
          ];

        Array.prototype.unshift.apply(rows, infoRows);
        console.log(rows);

        component.save(options);
    }
}

Upvotes: 2

Related Questions