All Components

Data Binding

The Spreadsheet enables you to bind it to a list of possible values.

To populate the Spreadsheet with data, bind it to either:

Binding to Local Data Arrays

To populate the Spreadsheet with local data:

  1. Define the data array in the data object of the Vue application.
  2. Refer the data object in the <kendo-spreadsheet-sheet> component through the :data-source prop.
<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);

window.JSZip = JSZip;

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,
        }]
    }
})

Binding to Remote Data Services

The following example demonstrates how to bind the spreadsheet to remote data.

<div id="vueapp" class="vue-app">
    <kendo-spreadsheet ref="spreadsheet" :columns="20" :rows="100" :toolbar="false" :sheetsbar="false">
        <kendo-spreadsheet-sheet :name="'Products'"
                                 :data-source="datasource"
                                 :rows="rows"
                                 :columns="columns">
        </kendo-spreadsheet-sheet>
    </kendo-spreadsheet>
</div>
Vue.use(SpreadsheetInstaller);

window.JSZip = JSZip;

new Vue({
    el: '#vueapp',
    mounted () {
        var spreadsheet = this.$refs.spreadsheet.kendoWidget();
        spreadsheet.element.css('height', '400px');
        spreadsheet.element.css('width', '100%');
        spreadsheet.resize();
        // spreadsheet.sheetByIndex(0).setDataSource(this.datasource);
    },
    data: function () {
        return {
            rows: [{
                height: 40,
                cells: [{
                    bold: "true",
                    background: "#9c27b0",
                    textAlign: "center",
                    color: "white"
                },{
                    bold: "true",
                    background: "#9c27b0",
                    textAlign: "center",
                    color: "white"
                },{
                    bold: "true",
                    background: "#9c27b0",
                    textAlign: "center",
                    color: "white"
                },{
                    bold: "true",
                    background: "#9c27b0",
                    textAlign: "center",
                    color: "white"
                },{
                    bold: "true",
                    background: "#9c27b0",
                    textAlign: "center",
                    color: "white"
                }]
            }],
            columns: [
                { width: 100 },
                { width: 415 },
                { width: 145 },
                { width: 145 },
                { width: 145 }
            ],
            datasource: {
                transport: {
                    read: function (options) {
                        $.ajax({
                            url: "https://demos.telerik.com/kendo-ui/service/Products/",
                            dataType: "jsonp",
                            success: function (result) {
                                options.success(result);
                            },
                            error: function (result) {
                                options.error(result);
                            }
                        });
                    },
                    submit: function (options) {
                        $.ajax({
                            url: "https://demos.telerik.com/kendo-ui/service/Products/Submit",
                            data: { models: kendo.stringify(e.data) },
                            contentType: "application/json",
                            dataType: "jsonp",
                            success: function (result) {
                                e.success(result.Updated, "update");
                                e.success(result.Created, "create");
                                e.success(result.Destroyed, "destroy");
                            },
                            error: function (xhr, httpStatusMessage, customErrorMessage) {
                                alert(xhr.responseText);
                            }
                        });
                    }
                },
                batch: true,
                schema: {
                    model: {
                        id: "ProductID",
                        fields: {
                            ProductID: { type: "number" },
                            ProductName: { type: "string" },
                            UnitPrice: { type: "number" },
                            Discontinued: { type: "boolean" },
                            UnitsInStock: { type: "number" }
                        }
                    }
                }
            }
        };
    }
})
In this article