How can I bind kendo ui grid to its datasource in a this MVC SPA? - mvvm

Question

Using the following source as a template: https://github.com/Simba-Mupfunya/Kendo-UI-SPA-Template-vs2013-MVC5
I am trying to bind other Kendo UI controls like the grid and scheduler to the model in the javascript "code behind". What I have tried...
HTML:
<div data-role="grid"
date-scrollable="true"
data-editable="true"
data-toolbar="['create', 'save']"
data-columns="[
{ 'field': 'Name', 'width': 50 }
, { 'field': 'Phone' }
, { 'field': 'Email' }
]"
data-bind="source: contacts,
visible: isVisible,
events: {
save: onSave
}"
style="height: 200px">
</div>
js:
define([
'text!views/contacts/contacts.html'
], function (html) {
var contactDataSource = new kendo.data.DataSource({
data: [
{ Name: "Jim Dandy", Phone: "555-1234", Email: "jim.dandy#gmail.com" }
, { Name: "Joe Coffee", Phone: "555-1234", Email: "joe.coffee#gmail.com" }
, { Name: "Ham Son", Phone: "555-1234", Email: "ham.son#gmail.com" }
, { Name: "Dan Fooey", Phone: "555-1234", Email: "dan.foo#gmail.com" }
],
schema: {
model: {
fields: {
Name: { type: "string" }
, Phone: { type: "string" }
, Email: { type: "string" }
}
}
}
});
//contactDataSource.read();
var viewModel = kendo.observable({
title: 'Contacts'
, contacts: contactDataSource
});
kendo.bind(html, viewModel);
var view = new kendo.View(html, {
model: viewModel,
show: function (e) {
kendo.fx(this.element).fade('in').duration(500).play();
}
});
return view;
});

Answer 1

This doesn't answer your specific problem, however in your 'real' implementation, I think you'll need to get the data from a real datasource? In this case you probably want the data to come via an MVC or Web Api controller. To do this, you need to manually configure an AJAX call in your datasource. See this (you'll need to use the 'read' property of the 'transport' object that will automatically employ AJAX to make the call)
http://docs.telerik.com/kendo-ui/framework/datasource/basic-usage#creating-a-datasource-for-remote-data