Export to Excel the Data from two separate Native Grids and save it in two separate sheets of the exported file.

Environment

Product Version	3.6.3
Product	Progress® Kendo UI for Vue Native

Description

This Knowledge base(KB) article shows how you can export the data from two Kendo UI for Vue Native Data Grids to Excel. The data in the current KB is saved in two separate sheets of the exported file.

If you need to export the two Grids' data to one sheet, you can check this Export to Excel the Data from two separate Native Grids and save it in one sheet of the exported file.

KB sections

• Solution description
• Runnable example

Solution description

To export the Grids' data we need the following imports:

• saveAs method available in the @progress/kendo-file-saver package
• workbookOptions and toDataURL methods available in the @progress/kendo-vue-excel-export package

To export the data of the Grids we call the following method and pass to it the data and the columns definitions of the first Grid:

js

exportExcel() {
  this.customSaveExcel({
    data: this.categories,
    fileName: 'myFile',
    columns: this.columns,
  });
},

The above calls the customSaveExcel method in which we have these lines:

js

const options = workbookOptions(exportOptions);
const headerOptions = options.sheets[0].rows[0].cells[0];
options.sheets.push({ rows: [] });
const rows = options.sheets[1].rows;

The third line above adds a new sheet to the exported Excel file. The rows variable is and empty array in which we will add data of the second Grid. To add the records of the second Grid to the second sheet of the exported Excel we use the following code. The first push below adds the header of the second Grid and the forEach loop adds its data.

js

rows.push({
  cells: [
    Object.assign({}, headerOptions, { value: 'ID' }),
    Object.assign({}, headerOptions, { value: 'Name' }),
    Object.assign({}, headerOptions, { value: 'First Ordered' }),
    Object.assign({}, headerOptions, { value: 'Units' }),
    Object.assign({}, headerOptions, { value: 'Discontinued' }),
  ],
});
this.grid2Data.forEach((category) => {
  rows.push({
    cells: [
      { value: category.ProductID },
      { value: category.ProductName },
      { value: category.FirstOrderedOn },
      { value: category.UnitsInStock },
      { value: category.Discontinued },
    ],
  });
});

This line exports the Grids' data

js

toDataURL(options).then(saveFn);

Runnable example

Change Theme

Theme

Loading ...