Javascript 剑道UI中的可编辑层次网格

我希望创建一个网格，每一行中都有一个网格

两个网格都需要可编辑，我设法做到了这一点。但是，当我尝试向外部网格添加新行时，其中的所有数据都消失了

您可以在此处找到演示：

你能帮我解决这个问题吗

谢谢

var outerDataSource= new kendo.data.DataSource({
        schema: {
            model: {
                field1: { type: "string", validation: { required: true } },
                field2: { type: "boolean", validation: { required: true } },
                field3: { type: "string", validation: { required: true } }
            }
        }
    });

$("#outerGrid").kendoGrid({
    dataSource: outerDataSource,
    detailInit: onExpansion,
    toolbar: ["create"],
    columns: [
        { field: "field1", title: "field1" },
        { field: "field2", title: "field2" },
        { field: "field3", title: "field3" },
        { command: ["destroy"], title: " " }],
    editable: true
});
function onExpansion(e) {
    var insideDataSource= new kendo.data.DataSource({
        schema: {
            model: {
                in1: { type: "string", validation: { required: true } },
                in2: { type: "string", validation: { required: true } }
            }
        },
        data: [{
            in1: "Click to edit",
            in2: "Click to edit"
        }]
    });

    var headers = $("<div/>").appendTo(e.detailCell).kendoGrid({
        dataSource: insideDataSource,
        width: 90,
        toolbar: ["create"],
        editable: true,
        columns: [
          { field: "in1" },
          { field: "in2" },
          { command: ["destroy"], title: "&nbsp;" }]
    });
};

var outerDataSource=new kendo.data.DataSource({
模式：{
型号：{
字段1:{type:“string”，验证：{required:true}，
字段2:{type:“boolean”，验证：{required:true}，
字段3:{type:“string”，验证：{required:true}
}
}
});
$（“#outerGrid”）.kendoGrid({
数据源：outerDataSource，
detailInit:onExpansion，
工具栏：[“创建”]，
栏目：[
{字段：“字段1”，标题：“字段1”}，
{字段：“字段2”，标题：“字段2”}，
{字段：“字段3”，标题：“字段3”}，
{命令：[“销毁”]，标题：“}]，
可编辑：真
});
函数一扩展（e）{
var insideDataSource=new kendo.data.DataSource({
模式：{
型号：{
in1:{type:“string”，验证：{required:true}，
in2:{type:“string”，验证：{required:true}
}
},
数据：[{
in1:“点击编辑”，
in2：“点击编辑”
}]
});
var headers=$（“”）.appendTo（e.detailCell.kendoGrid({
数据源：InsidedDataSource，
宽度：90，
工具栏：[“创建”]，
是的，
栏目：[
{字段：“in1”}，
{字段：“in2”}，
{命令：[“销毁”]，标题：“}]
});
};

Telerik的回答：

请注意，分页、排序、筛选和 编辑会导致网格重新绑定并重新评估其中的所有模板 它（包括细节）。这就是为什么为了保护孩子 重新绑定之间的网格数据您应该保存它以删除服务 （此处链接到文档）或将其添加为导航属性 集合到父网格模型（此处提供演示）

---

单击“创建”按钮时是否调用了

onExpansion

，如果是，是否

e.detailCell

指向现有的dom元素？第一次展开行时是否调用onExpansion。e、 detailCell是展开的行。如何添加新行？使用“工具栏：[“创建”]”。这是剑道的特点。您可以在表格顶部看到“添加新记录”按钮。