Kendo UI 网格数据在弹出编辑取消时消失答案

【问题标题】：Kendo UI Grid Data Disappears on Popup Edit CancelKendo UI 网格数据在弹出编辑取消时消失
【发布时间】：2013-11-18 23:42:15
【问题描述】：

我试图弄清楚为什么当我单击编辑按钮然后立即关闭弹出窗口时我的网格中的数据消失了。

我正在尝试使用 Kendo UI 的值绑定功能，但我似乎无法理解它们被删除的原因。

这是我在说什么的 jsfiddle。 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);

我知道我可以使用数据源而不是可观察的，但我使用的实际视图模型从数据库中获取数据并嵌套了几层。网格绑定得很好，但是当我尝试取消或关闭窗口时，它就会被删除。

如何配置值绑定以防止结果被清除？

【问题讨论】：

标签： mvvm kendo-ui kendo-grid

【解决方案1】：

它绑定的 DataSource（在内部将您的数组转换为 DataSource）似乎没有定义模型，这似乎令人不安。它使用模型上定义的类型来帮助选择正确的编辑器。

试试这个代码：

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

【讨论】：

将其设置为数据源的问题是对象结构从数据库（LINQ to SQL）返回。它已经有数据了，那么我如何将已经存在的对象数组转换为 kendo 数据源对象？另一个示例是返回的 JSON 字符串，其中包含国家/地区列表，并且每个国家/地区都有其省或州。网格将根据所选国家/地区的 id 绑定到各州。
re：“如何将已经存在的对象数组转换为 kendo 数据源对象？” - 通过像我上面所做的那样将其作为data 配置选项传递，或者通过在数据源上调用myDataSource.data(existingDataArray); 来为其提供现有数据。

【解决方案2】：

回答 cmets 中关于如何处理被调用的服务器端对象的项目。我已使用以下内容绑定到通过服务器调用的 js 对象。在下面的情况下，refererViewModel.dropDownItems.Statuses 是它通过控制器从服务器生成的对象。

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

使用以下脚本：

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

【讨论】：