Possibility to export multiple kendo grids for angular to excel

Question

There is documented feature for exporting multiple kendo grids to one excel file for jQuery grids but nothing equal to angular on web site.

However maybe somebody managed to do it for angular?

Answer 1

So the solution is use kendo API which allows us to assemble file from scratch just passing WorkbookOptions object with data and params into save method.

Short example js-code:

 public save(component): void {
    const options = {
        sheets: [
            {
                name: 'Sheet One',
                filter: {
                    from: 0,
                    to: 1
                },
                columns: [
                    {
                        width: 100
                    },
                    {
                        width: 200
                    },
                ],
                rows: [
                    {
                        cells: [
                            {
                                color: '#ffffff',
                                background: '#808080',
                                value: 'First name'
                            },
                            {
                                color: '#ffffff',
                                background: '#808080',
                                value: 'Last Name'
                            }
                        ]
                    },
                    {
                        cells: [
                            {
                                value: 'Erick'
                            },
                            {
                                value: 'Carthman'
                            }
                        ]
                    },
                    {
                        cells: [
                            {
                                value: 'Stan'
                            },
                            {
                                value: 'Marzh'
                            }
                        ]
                    }
                ]
            },
            {
                name: 'Sheet Two',
                filter: {
                    from: 0,
                    to: 1
                },
                columns: [
                    {
                        width: 100
                    },
                    {
                        width: 200
                    },
                ],
                rows: [
                    {
                        cells: [
                            {
                                color: '#ffffff',
                                background: '#808080',
                                value: 'Name'
                            },
                            {
                                color: '#ffffff',
                                background: '#808080',
                                value: 'Length'
                            }
                        ]
                    },
                    {
                        cells: [
                            {
                                value: 'Vasya'
                            },
                            {
                                value: 10
                            }
                        ]
                    },
                    {
                        cells: [
                            {
                                value: 'Petya'
                            },
                            {
                                value: 19.5
                            }
                        ]
                    }
                ]
            }
        ]
    };
    component.save(options);

The markup:

        <button type="button" class="k-button" (click)="save(excelexport)">Export To Excel</button>
    <kendo-excelexport fileName="Products.xlsx" #excelexport></kendo-excelexport>

Answer 2

You can export multiple data sets (a Grid can be bound to each of these data sets, but it is not necessary for the Excel export). Here is an example:

<button type="button" class="k-button" (click)="save(excelexport, excelexport1)">Export To Excel</button>

        <kendo-excelexport [data]="data" fileName="Products.xlsx" #excelexport>
            <kendo-excelexport-column field="ProductID" [locked]="true" title="Product ID" [width]="200">
            </kendo-excelexport-column>
            <kendo-excelexport-column field="ProductName" title="Product Name" [width]="350">
            </kendo-excelexport-column>
            <kendo-excelexport-column field="UnitPrice" title="Unit Price" [width]="120">
            </kendo-excelexport-column>
      </kendo-excelexport>
        <kendo-excelexport [data]="data1" fileName="Products.xlsx" #excelexport1>
            <kendo-excelexport-column field="ProductID" [locked]="true" title="Product ID" [width]="200">
            </kendo-excelexport-column>
            <kendo-excelexport-column field="ProductName" title="Product Name" [width]="350">
            </kendo-excelexport-column>
            <kendo-excelexport-column field="UnitPrice" title="Unit Price" [width]="120">
            </kendo-excelexport-column>
      </kendo-excelexport>

public save(component1, component2): void {
      Promise.all([component1.workbookOptions(), component2.workbookOptions()]).then((workbooks) => {
        workbooks[0].sheets = workbooks[0].sheets.concat(workbooks[1].sheets);
        component1.save(workbooks[0]);
      });
    }

http://plnkr.co/edit/nAGrfaM2H4VK6tKIFTyP?p=preview

The Excel Export documentation might come in handy as well.