Native TreeList Excel Export

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

ninja-iconThe TreeList is part of Kendo UI for Vue, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.Start Free 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.

    sh
    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.

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

    jsx
    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.

jsx
  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.

Change Theme
Theme
Loading ...

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.

jsx
  saveExcel({
    fileName: 'myFile',
    data: treeToFlat(
      this.processedData,
      this.expandField,
      this.subItemsField
    ).slice(this.skip, this.skip + this.take),
    columns: this.columns,
    hierarchy: true,
  });
Change Theme
Theme
Loading ...

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.

Change Theme
Theme
Loading ...

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.