@progress/kendo-spreadsheet-vue-wrapper
Version:
Kendo UI Spreadsheet wrapper for Vue.js
206 lines (192 loc) • 6.89 kB
Markdown
---
title: Data Binding
page_title: Data Binding - Spreadsheet - Kendo UI for Vue
description: "Bind the Kendo UI Spreadsheet wrapper for Vue to local data arrays."
slug: databinding_spreadsheet
position: 1
---
# 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` prop.
## Local Data Binding
{% meta id:foo height:460 theme:bootstrap %}
```html-preview
<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>
```
```js
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,
}]
}
})
```
{% endmeta %}
## Remote Data Binding
```html
<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>
```
```js
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" }
}
}
}
}
};
}
})
```
## Suggested Links
* [Kendo UI DataSource Component](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource)
* [Kendo UI Spreadsheet for jQuery](https://docs.telerik.com/kendo-ui/controls/data-management/spreadsheet/overview)
* [API Reference of the Spreadsheet Widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/spreadsheet)