new Vue({
el: '#vueapp',
template: `<kendo-grid :data-source="localDataSource">
<kendo-grid-column :field="'ProductID'"
:title="'ID'"
:width="40"></kendo-grid-column>
<kendo-grid-column :field="'ProductName'"></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>`,
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's Cajun Seasoning",
"UnitPrice": 22,
"UnitsInStock": 53,
"Discontinued": false,
},
{
"ProductID": 5,
"ProductName": "Chef Anton's Gumbo Mix",
"UnitPrice": 21.35,
"UnitsInStock": 0,
"Discontinued": true,
},
{
"ProductID": 6,
"ProductName": "Grandma's Boysenberry Spread",
"UnitPrice": 25,
"UnitsInStock": 120,
"Discontinued": false,
},
{
"ProductID": 7,
"ProductName": "Uncle Bob's Organic Dried Pears",
"UnitPrice": 30,
"UnitsInStock": 15,
"Discontinued": false,
}
]
}
})
new Vue({
el: '#vueapp',
template: ` <kendo-scheduler :data-source="localDataSource"
:date="date"
:height="600"
:timezone="'Etc/UTC'">
<kendo-scheduler-view :type="'day'"></kendo-scheduler-view>
<kendo-scheduler-view :type="'week'"></kendo-scheduler-view>
<kendo-scheduler-view :type="'month'"></kendo-scheduler-view>
<kendo-scheduler-view :type="'agenda'"></kendo-scheduler-view>
</kendo-scheduler>`,
data: {
date: new Date('2018/6/6'),
localDataSource: [
{
id: 1,
start: new Date("2018/6/6 08:00 AM"),
end: new Date("2018/6/6 09:00 AM"),
title: "Interview"
},
{
id: 2,
start: new Date("2018/6/6 08:00 AM"),
end: new Date("2018/6/6 09:00 AM"),
title: "Meeting"
}
]
}
})
new Vue({
el: '#vueapp',
template: `<kendo-chart
:title-text="'Gross domestic product growth /GDP annual %/'"
:legend-position="'bottom'"
:legend-position="'horizontal'"
:series-defaults-type="'area'"
:series="series"
:category-axis-categories="categories">
</kendo-chart>`,
data: {
date: new Date('2018/6/6'),
series:[{
name: "India",
data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855]
}, {
name: "Russian Federation",
data: [4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3]
}, {
name: "Germany",
data: [0.010, -0.375, 1.161, 0.684, 3.7, 3.269, 1.083, -5.127, 3.690, 2.995]
},{
name: "World",
data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727]
}],
categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011]
}
})
new Vue({
el: '#vueapp',
template: ` <kendo-editor :resizable-content="true"
:resizable-toolbar="true"
:value="htmlText"
style="height:280px"
rows="10"
cols="30">
</kendo-editor>`,
data () {
return {
htmlText: "<p>Some sample text.</p>"
}
}
})