Question

我试图找出为什么当我点击编辑按钮然后立即关闭弹出窗口时，网格中的数据会消失。

我正在尝试使用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);

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

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

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

Answer 2

要回答评论中的项目，请如何处理被调用的服务器端对象。我使用以下命令绑定到通过服务器调用的js对象。在下面的情况中，referralViewModel.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);

弹出编辑取消时，Kendo UI网格数据消失

2 个答案: