New to Kendo UI for Vue? Start a free 30-day trial

Export to Excel the data of a Grid that has a defined detail-row template.


Product Version3.6.3
ProductProgress® Kendo UI for Vue Native


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 package
  • workbookOptions and toDataURL 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() {
    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;
  ) {
    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' }),

The actual export of the Grids' data is done by this line:


Runnable example

View Source
Change Theme:

In this article

Not finding the help you need?