Kendo UI Grid Data Disappears on Popup Edit Cancel - mvvm

Question

I am trying to figure out why the data in my grid disappears when i click the edit button and then immediately close out the popup.
I am trying to use the value binding features of Kendo UI and i cant seem to understand why they are being removed.
Here is a jsfiddle of what i am talking about.
http://jsfiddle.net/JDMp8/13/
<div id="gridData">
<div
data-editable="popup"
data-role="grid"
data-bind="source: test"
data-columns="[
{field: 'ID', title: 'test'},
{command: ['edit', 'destroy'], title: 'test'}]"/>
var gridData = kendo.observable({
test:[
{ID: 1, Name: "Record 1"},
{ID: 2, Name: "Record 2"},
{ID: 3, Name: "Record 3"},
{ID: 4, Name: "Record 4"},
{ID: 5, Name: "Record 5"},
{ID: 6, Name: "Record 6"},
{ID: 7, Name: "Record 7"},
{ID: 8, Name: "Record 8"},
{ID: 9, Name: "Record 9"},
]
});
kendo.bind($('#gridData'), gridData);
I understand that i can use a data source rather than observable, but the actual view model i am using gets its data from the database and is nested a few layers down. The grid binds just fine but when i try to cancel or close the window it just gets removed.
How can i configure the value binding to prevent the results from being cleared?

Answer 1

It seems to be upset that the DataSource it is bound to (internally it converts your array to a DataSource) doesn't have a model defined. It uses the types defined on the model to help pick the correct editor.
Try this code:
var gridData = kendo.observable({
test: new kendo.data.DataSource({
data: [
{ID: 1, Name: "Record 1"},
{ID: 2, Name: "Record 2"},
{ID: 3, Name: "Record 3"},
{ID: 4, Name: "Record 4"},
{ID: 5, Name: "Record 5"},
{ID: 6, Name: "Record 6"},
{ID: 7, Name: "Record 7"},
{ID: 8, Name: "Record 8"},
{ID: 9, Name: "Record 9"},
],
model: {
fields: {
ID: { type: "number" },
Name: { type: "string" }
}
}
})
});
// Bind the view model to the personFields element.
kendo.bind($('#gridData'), gridData);

Answer 2

To answer the item in the comments re what to do with server side objects being called. I have used the following to bind to a js object that is called via the server.In the case below referralViewModel.dropDownItems.Statuses is an object that it generated from the server via a controller.
<div
id=myGridId
data-role="grid"
data-scrollable="true"
data-bind="source: myArray"
data-editable="{mode: 'popup'}"
data-toolbar="['create']"
data-columns="[
{command:['edit'], width:50},
{ 'field': 'Text', 'width': 200, 'title': 'Text' },
{ 'field': 'Value', 'width': 200, 'title': 'Value' },
]"
style="width: 100%; height: auto"></div>
Using the following script:
<script>
myObservable = new kendo.observable({
myArray: new kendo.data.DataSource({
data: referralViewModel.dropDownItems.Statuses, //bind to root level view model
schema:{
model: {
id:"Value", //primary key
fields: {
Value: { type: "string" },
Text: { type: "string" }
},
}
}
})
});
kendo.bind($("#myGridId"), myObservable);