PDF Export

The TreeList enables you to export its records to PDF.

To enable the PDF export functionality, use the pdf attribute. For example, you can specify the file name and export all pages, margins, paper size, font, and so on.

<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"
                    :pdf="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);

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

In this article