All Components

Data Binding

The Spreadsheet provides support for binding it to local data arrays.

To populate the Spreadsheet with local data:
1. Define the array in the data object of the Vue application.
1. Refer it in the <kendo-spreadsheet-sheet> component through the :data-source property.

<div id="vueapp" class="vue-app">
    <kendo-spreadsheet ref="spreadsheet"
                       :excel-proxy-URL="'https://demos.telerik.com/kendo-ui/service/export'"
                       :pdf-proxy-URL="'https://demos.telerik.com/kendo-ui/service/export'">
        <kendo-spreadsheet-sheet :name="'Food Order'" :data-source="localdatasource">
        </kendo-spreadsheet-sheet>
    </kendo-spreadsheet>
</div>
Vue.use(SpreadsheetInstaller);

new Vue({
    el: '#vueapp',
    mounted () {
        var spreadsheet = this.$refs.spreadsheet.kendoWidget();
        spreadsheet.element.css('height', '400px');
        spreadsheet.element.css('width', '100%');
        spreadsheet.resize();
    },
    data: {
        localdatasource: [{
            "ProductID": 1,
            "ProductName": "Chai",
            "UnitPrice": 18,
            "UnitsInStock": 39,
            "Discontinued": false,
        },{
            "ProductID": 2,
            "ProductName": "Chang",
            "UnitPrice": 17,
            "UnitsInStock": 40,
            "Discontinued": false,
        },{
            "ProductID": 3,
            "ProductName": "Aniseed Syrup",
            "UnitPrice": 10,
            "UnitsInStock": 13,
            "Discontinued": false,
        },{
            "ProductID": 4,
            "ProductName": "Chef Anton",
            "UnitPrice": 22,
            "UnitsInStock": 53,
            "Discontinued": false,
        },{
            "ProductID": 5,
            "ProductName": "Chef Gumbo Mix",
            "UnitPrice": 21.35,
            "UnitsInStock": 0,
            "Discontinued": true,
        },{
            "ProductID": 6,
            "ProductName": "Boysenberry Spread",
            "UnitPrice": 25,
            "UnitsInStock": 120,
            "Discontinued": false,
        }]
    }
})
In this article