Excel Export

The TreeList enables you to export its records to Excel.

To enable the Excel export functionality, set the excel property. For example, you can specify the file name and enable filtering in the Excel file or other options.

<div id="vueapp" class="vue-app">
    <kendo-treelistdatasource ref="remoteDataSource"
                              :transport-read-url="'https://demos.telerik.com/kendo-ui/service/EmployeeDirectory/All'"
                              :transport-read-data-type="'jsonp'"
                              :schema-model="model">
    </kendo-treelistdatasource>

    <kendo-treelist data-source-ref="remoteDataSource"
                    :toolbar="tools"
                    :excel="exportSettings"
                    :height="'380px'">
        <kendo-treelist-column :field="'FirstName'"
                               :title="'First Name'"
                               :width="'250px'"
                               :expandable="true">
        </kendo-treelist-column>
        <kendo-treelist-column :field="'LastName'" :title="'Last Name'"></kendo-treelist-column>
        <kendo-treelist-column :field="'Position'" ></kendo-treelist-column>
        <kendo-treelist-column :field="'Extension'" :title="'Ext'"></kendo-treelist-column>
    </kendo-treelist>
</div>
Vue.use(TreeListInstaller);
Vue.use(DataSourceInstaller);

window.JSZip = JSZip;

new Vue({
    el: "#vueapp",
        data: {
            exportSettings: {
                    fileName: "Kendo UI TreeList Export.xlsx",
                    proxyURL: "https://demos.telerik.com/kendo-ui/service/export"
            },
            model: {
                id: "EmployeeId",
                parentId: "ReportsTo",
                fields: {
                    EmployeeId: { type: "number", editable: false, nullable: false },
                    ReportsTo: { nullable: true, type: "number" }
                },
                expanded: true
            },
            tools: [ "excel" ]
    }
})

In this article