Export to Excel the data of a Grid that has a defined detail-row template.
Environment
Product Version | 3.6.3 |
Product | Progress® Kendo UI for Vue Native |
Description
This Knowledge base(KB) article shows how you can export to Excel the data from a Kendo UI for Vue Native Data Grid that has a defined detail-row template.
KB sections
Solution description
To export the Grids' data we need the following imports:
saveAs
method available in the @progress/kendo-file-saver packageworkbookOptions
andtoDataURL
methods available in the @progress/kendo-vue-excel-export package
To export the data of the Grid we call the following method and pass to it the data
and the columns
definition:
exportExcel() {
this.customSaveExcel({
data: this.categories,
fileName: 'myFile',
columns: this.columns,
});
},
The above calls the the customSaveExcel
method in which we have these lines:
const options = workbookOptions(exportOptions);
const rows = options.sheets[0].rows;
The rows
variable is an array that holds the rows data of the main Grid that has a retail-row template definition. To export the data of the sub-Grids below each detail row, we have to manually get the data and insert it in the rows
array.
To add the data of the Grids in the detailed rows of the main Grid we use the following code.
this.categories.forEach((category) => {
currentCategoryProducts = this.products.filter(
(item) => item.CategoryID === category.CategoryID
);
rows.find((el, index) => {
if (el.cells[0].value === currentCategoryProducts[0].CategoryID) {
currentRowIndex = index;
}
});
// Add the Detail tables' data
for (
let productIdx = currentCategoryProducts.length - 1;
productIdx >= 0;
productIdx--
) {
const product = currentCategoryProducts[productIdx];
rows.splice(currentRowIndex + 1, 0, {
cells: [
{},
{ value: product.ProductID },
{ value: product.ProductName },
{ value: product.UnitPrice },
{ value: product.UnitsInStock },
],
}); // Add all products of the current category
}
// Apply color to the headers of the Detail tables
rows.splice(currentRowIndex + 1, 0, {
cells: [
{},
Object.assign({}, headerOptions, { value: 'Product ID' }),
Object.assign({}, headerOptions, { value: 'Product Name' }),
Object.assign({}, headerOptions, { value: 'Unit Price' }),
Object.assign({}, headerOptions, { value: 'Units In Stock' }),
],
});
});
This line exports the Grids' data:
toDataURL(options).then(saveFn);