Excel Export

The built-in export functionality of the Kendo UI Grid wrapper for Vue allows you to share and distribute data in Excel.

To configure the Excel export functionality of the native Vue Grid by Kendo UI, refer to the native Vue Grid by Kendo UI documentation.

Basics

The Kendo UI Data Grid wrapper for Vue enables you to export data to MS Excel and provides client Excel-export functionality which is server-agnostic and which can be directly utilized to share data offline. To enable the export to Excel, include the corresponding command to the toolbar of the Grid and configure the settings accordingly. Alternatively, you can trigger the export to Excel by invoking the saveAsExcel method from the client API of the Grid.

<div id="vueapp" class="vue-app">
    <kendo-datasource ref="datasource1"
                      :type="'odata'"
                      :transport-read-url="'https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products'"
                      :schema-model-fields="schemaModelFields"
                      :page-size='7'
                      :group="groupDefinition"
                      :aggregate="aggregateDefinition">
    </kendo-datasource>

    <kendo-grid :height="600"
                :data-source-ref="'datasource1'"
                :sortable="true"
                :pageable="true"
                :groupable="true"
                :filterable="true"
                :reorderable="true"
                :resizable="true"
                :toolbar="['excel']"
                :excel-file-name="'Kendo UI Grid Export.xlsx'"
                :excel-proxy-URL="'https://demos.telerik.com/kendo-ui/service/export'"
                :excel-filterable="true">
        <kendo-grid-column :field="'ProductName'"
                           :title="'Product Name'"
                           :aggregates="['count']"
                           :footer-template="'Total Count: #=count#'"
                           :group-footer-template="'Count: #=count#'"></kendo-grid-column>
        <kendo-grid-column :field="'UnitPrice'"
                           :title="'Unit Price'"
                           :aggregates="['sum']"
                           :format="'{0:c}'"></kendo-grid-column>
        <kendo-grid-column :field="'UnitsOnOrder'"
                           :title="'Units On Order'"
                           :aggregates="['average']"
                           :footer-template="'Average: #=average#'"
                           :group-footer-template="'Average: #=average#'"></kendo-grid-column>
        <kendo-grid-column :field="'UnitsInStock'"
                           :title="'Units In Stock'"
                           :aggregates="['min', 'max', 'count']"
                           :footer-template="'Min: #= min # Max: #= max #'"
                           :group-footer-template="'Units In Stock: #= group.value # (Count: #= count#)'"></kendo-grid-column>
    </kendo-grid>
</div>
Vue.use(GridInstaller);
Vue.use(DataSourceInstaller);

window.JSZip = JSZip;

new Vue({
    el: '#vueapp',
    data () {
        return {
            schemaModelFields: {
                UnitsInStock: { type: "number" },
                ProductName: { type: "string" },
                UnitPrice: { type: "number" },
                UnitsOnOrder: { type: "number" },
                UnitsInStock: { type: "number" }
            },
            groupDefinition: {
                field: "UnitsInStock",
                aggregates: [
                    { field: "ProductName", aggregate: "count" },
                    { field: "UnitPrice", aggregate: "sum"},
                    { field: "UnitsOnOrder", aggregate: "average" },
                    { field: "UnitsInStock", aggregate: "count" }
                ]
            },
            aggregateDefinition: [
                { field: "ProductName", aggregate: "count" },
                { field: "UnitPrice", aggregate: "sum" },
                { field: "UnitsOnOrder", aggregate: "average" },
                { field: "UnitsInStock", aggregate: "min" },
                { field: "UnitsInStock", aggregate: "max" }
            ]
        }
    },
    methods: {
        parameterMap: function(options, operation) {
            if (operation !== 'read' && options.models) {
                return { models: kendo.stringify(options.models) }
            }
        }
    }
})

Copying to Excel

To enable users to copy cell content from web applications and paste in Excel, use the built-in functionality and set the selectable->multi cell and allow-copy->true properties. As a result, the user can copy and paste across applications and use the browser clipboard.

The following example demonstrates how to select the desired cells, copy the content by pressing the Ctrl+C command and paste to Excel.

<div id="vueapp" class="vue-app">
     <kendo-grid :data-source="localDataSource"
                 :selectable="'multiple cell'"
                 :allow-copy="true"
                 :navigatable="true">
        <kendo-grid-column :field="'ProductName'" :width="180"></kendo-grid-column>
        <kendo-grid-column :field="'UnitPrice'"
                           :title="'Unit Price'"
                           :width="120"
                           :format="'{0:c}'"></kendo-grid-column>
        <kendo-grid-column :field="'UnitsInStock'"
                           :title="'Units In Stock'"
                           :width="120"></kendo-grid-column>
        <kendo-grid-column :field="'Discontinued'" :width="120"></kendo-grid-column>
    </kendo-grid>
</div>
Vue.use(GridInstaller);
new Vue({
    el: '#vueapp',
    data: {
        localDataSource: [{
                'ProductID':1,
                'ProductName':'Chai',
                'UnitPrice':18,
                'UnitsInStock':39,
                'Discontinued':false
            },
            {
                'ProductID':2,
                'ProductName':'Chang',
                'UnitPrice':19,
                'UnitsInStock':17,
                'Discontinued':false
            }
        ]
    }
})

In this article