Native TreeList Excel Export

The Kendo UI for Vue Native TreeList provides options for exporting its data to Excel in a hierarchical tree format.

The TreeList Package is part of Kendo UI for Vue, a professional grade UI library with 100+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Getting Started

To export the Native TreeList data to an Excel file you need to apply the following configurations:

  1. Install kendo-vue-excel-export package.

    npm install @progress/kendo-vue-excel-export @progress/kendo-licensing @progress/kendo-svg-icons
  2. Import the saveExcel method from the @progress/kendo-vue-excel-export package.

    import { saveExcel } from '@progress/kendo-vue-excel-export';   
  3. Import the treeToFlat method from the @progress/kendo-vue-treelist package.

    import {
        TreeList,
        treeToFlat,
        mapTree,
        extendDataItem,
    } from '@progress/kendo-vue-treelist';
  4. Use the saveExcel method as in the following snippet. Define a fileName for the exported file. Use the treeToFlat method to convert the hierarchical data to flat one. Pass the columns structure and set the hierarchy prop to true.

      saveExcel({
        fileName: 'myFile',
        data: treeToFlat(
          this.processedData,
          this.expandField,
          this.subItemsField
        ),
        columns: this.columns,
        hierarchy: true,
      });

The following example demonstrates the basic implementation of the Excel export functionality that uses the of the TreeList.

Example
View Source
Change Theme:

Exporting Specific Data

To export specific TreeList data, pass only the data chunk that should be exported to the data property of the saveExcel function. In the below example,the TreeList has its paging enabled. If you need to export only the current visible page use the following definition.

```js-no-run
  saveExcel({
    fileName: 'myFile',
    data: treeToFlat(
      this.processedData,
      this.expandField,
      this.subItemsField
    ).slice(this.skip, this.skip + this.take),
    columns: this.columns,
    hierarchy: true,
  });
```
Example
View Source
Change Theme:

Customizing Exported Workbook

When exporting an Excel file, the generated workbook can be customized. The customization can be used to modify values, appearance, or sheets in the exported document. The following example demonstrates how to add a different background color to the alt rows of the exported Excel file.

Example
View Source
Change Theme:

Known Limitations

  • During the export to Excel, the TreeList does not use column formats. Column formats are incompatible with Excel. For more information, refer to the page on the Excel-supported formats.
  • The maximum size of the exported file to Excel has a system-specific limit. For large data sets, it is highly recommended that you use a server-side solution.