Kendo UI Grid Data Disappears on Popup Edit Cancel

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);