Question

我遇到了具有层次结构的Kendo Grid问题。示例代码如下：

var data =  [ { "id" : 1, "name" : "Navee", "details": [{"cityid": 1, "city": "India"}, {"cityid": 2, "city": "India"} ] } ]; 

data =  []; 

$("#grid").kendoGrid({
							columns: [
                    {
                      width: 100, field: "id", title: "ID", hidden: false, headerAttributes: { style: "font-weight: bold" }
                    },
                    {
                        width: 100, field: "name", title: "Name", headerAttributes: { style: "font-weight: bold" }
                    },
                    { command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }
                ],
                dataSource: new kendo.data.DataSource({
                    data: data,
                    schema: {
                        model: {
                            id: "id",
                            fields: {
                                id: { type: "string" },                                
                                name: { type: "string" }
                            }
                        }
                    }
                }),               
                height: 500,
                sortable: true,               
                toolbar: ["create"],                
                detailInit: detailInit1213,                
                editable: "inline",
                edit: function (e) {
                    if (e.model.isNew() == true) {
                        $('input[name="id"').val(kendo.guid().toString());
                    }
                },
                save: function (e) {
                    e.model.dirty = true;
                    e.model.id = $('input[name="id"').val();
                }
            });
            

function detailInit1213 (e) {
    $("<div/>").appendTo(e.detailCell).kendoGrid({
        toolbar: ["create"],
      editable: "inline",
        dataSource: {
            data: e.data.details,
            schema: {
                model: {
                id: "cityid",
                    fields: {                   
                    		cityid: { type: "string" },
                        city: { type: "string" }                        
                    }
                }
            },
            pageSize: 20,
            //filter: { field: "AppID", operator: "eq", value: e.data.AppID }
        },
        scrollable: false,
        filterable: true,
        groupable: true,
        sortable: true,
        pageable: true,
        editable: "inline",
        columns: [               
            {
                field: "cityid", title: "ID"
            },
            {
                field: "city", title: "City"
            },
            { command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }
        ],
        edit: function (e) {
                    if (e.model.isNew() == true) {
                        $('input[name="cityid"').val(kendo.guid().toString());
                    }
                },
                save: function (e) {
                    e.model.dirty = true;
                    e.model.cityid = $('input[name="cityid"').val();
                }
    });
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.silver.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>
</head>
<body>
  
<div id="grid"></div>
</body>
</html>

要重现此问题，需要执行以下步骤：

通过填写值添加主行并保存。
展开新添加的主行。
添加子行并填充值并保存。
在展开/折叠时，您可以在UI上找到子数据。

现在，

再次添加一个新的Master行。
再次添加一个新的Master行。
展开之前添加的行。
您会发现添加的子行已消失。

请尝试建议您解决此问题。

谢谢。

无法保存Kendo Grid Hierarchy中新添加的Child Row数据

0 个答案: