Question

我要求Kendo Grid用户输入＆＃39; n＆＃39;结果数量，然后单击一个按钮（与网格控件分开），它将把所有结果添加到网格中并将它们保存到数据库中。考虑到网格本身没有进行CRUD操作，这应该是一项简单的任务，除了为数据输入添加额外的空白行...

然而，

问题是网格的内容不是静态的，并且可以根据用户输入在列大小（从1到6）上变化（我的示例显示了它将如何以数组{{1}的形式表示}）。似乎大多数（如果不是全部）可用的教程似乎只关注静态内容，而在其他任何方面都没有什么帮助。

到目前为止（来自Telerik的一些反馈）我已经提出了以下内容......

设置一个Lot Schema，即占位符，用于数组中每个Lots的所有数据：

Lot

设置整体网格架构模型ID：

var Lots = [];
    Lots.push({ ID: 13, LotNumber: "158UL" }),
    Lots.push({ ID: 14, LotNumber: "646UE" });

var LotResultsSchema = [];
    for (var p = 0; p < Lots.length; ++p) {
        LotResultsSchema.push({
            Result: {
                Count: '', 
                Mean: '',  
                SD: ''     
            }
        });
    }

根据上面的架构设置网格的数据源：

var schemaModel = kendo.data.Model.define({
        id: "ID",
        fields: {
            ID: { editable: false, nullable: true },
            ResultDateTime: {
                type: "date", validation: {
                    required: true
                }
            },
            LotResults: LotResultsSchema,           
            StandardComment: {
                ID: {
                    nullable: true, validation: {
                        required: false
                    }
                },
                Description: {
                    defaultValue: "<empty>",
                    validation: {
                        required: false
                    }
                }
            },
            ReviewComment: {
                ID: {
                    nullable: true, validation: {
                        required: false
                    }
                },
                Description: {
                    defaultValue: "<empty>",
                    validation: {
                        required: false
                    }
                }
            }
        }
    });

设置列架构（再次考虑到可以根据数组大小创建多个列）：

var gridConfigDataSourceAdd = new kendo.data.DataSource({
        data: [],           
        schema: {
            model: schemaModel
        }
    });

设置整体网格：

var columnSchema = [];
columnSchemaAdd.push({ field: "ResultDateTime", format: "{0:yyyy/MM/dd hh:mm:ss}", editor: dateTimeEditor, title: 'Date Time' });
    for (var j = 0; j < Lots.length; ++j) {
        columnSchemaAdd.push({
            title: Lots[j].LotNumber,
            field: Lots[j].ID,
            columns: [{
                field: "LotResults[" + j + "].Result.Count",
                title: 'Count'
            }, {
                field: "LotResults[" + j + "].Result.Mean",
                title: 'Mean'
            }, {
                field: "LotResults[" + j + "].Result.SD",
                title: 'SD'
            }]
        });
    }
    columnSchemaAdd.push({ field: "StandardComment", title: 'Comment', editor: standardCommentDropDownEditor, template: "#=StandardComment.Description#" });
    columnSchemaAdd.push({ field: "ReviewComment", title: 'Review Comment', editor: reviewCommentDropDownEditor, template: "#=ReviewComment.Description#" });
    columnSchemaAdd.push({ command: ["edit", "destroy"] });

运行此代码并点击“添加新内容”。用于创建新行的按钮会产生以下错误：

未捕获的TypeError：无法读取属性＆＃39;结果＆＃39;未定义的

我理解为什么我收到此错误，因为新项目是使用未定义的$("#configAddGrid").kendoGrid({ dataSource: gridConfigDataSourceAdd, height: 550, navigatable: true, autoBind: false, editable: { mode: "inline" }, toolbar: ["create"], columns: columnSchemaAdd });创建的。我无法理解的是，在批量架构中设置默认值时会发生这种情况。

任何建议都表示赞赏，我希望有人之前使用过Kendo网格用于同样的目的，因为我真的想看看一个有效的例子！

Answer 1

我认为问题出在LotResultsSchema上。可以尝试将其合并到字段类？

，而不是将其创建为单独的数组

<script>
var Lots = [];
    Lots.push({ ID: 13, LotNumber: "158UL" }),
    Lots.push({ ID: 14, LotNumber: "646UE" });


  var fields1 =  {
            ID: { editable: false, nullable: true },
            ResultDateTime: {
                type: "date", validation: {
                    required: true
                }
            },          
            StandardComment: {
                ID: {
                    nullable: true, validation: {
                        required: false
                    }
                },
                Description: {
                    defaultValue: "<empty>",
                    validation: {
                        required: false
                    }
                }
            },
            ReviewComment: {
                ID: {
                    nullable: true, validation: {
                        required: false
                    }
                },
                Description: {
                    defaultValue: "<empty>",
                    validation: {
                        required: false
                    }
                }
            }
  };
    for (var p = 0; p < Lots.length; ++p) {
            fields1['Count' + Lots[p].ID] = {type : "number"};
            fields1['Mean'+Lots[p].ID] = {type : "number"};
            fields1['SD' +Lots[p].ID] = {type : "number"};        
    }
  var schemaModel = kendo.data.Model.define({
        id: "ID",
        fields: fields1
    });

  var gridConfigDataSourceAdd = new kendo.data.DataSource({
        data: [],           
        schema: {
            model: schemaModel
        }
    });

  var columnSchemaAdd = [];
columnSchemaAdd.push({ field: "ResultDateTime", format: "{0:yyyy/MM/dd hh:mm:ss}",  title: 'Date Time' });
    for (var j = 0; j < Lots.length; ++j) {
        columnSchemaAdd.push({
            title: Lots[j].LotNumber,
            field: Lots[j].ID,
            columns: [{
                field: 'Count' + Lots[j].ID ,
                title: 'Count'
            }, 
            {
                field: 'Mean'+Lots[j].ID ,
                title: 'Mean'
            }, {
                field: 'SD' + Lots[j].ID ,
               title: 'SD'
            }]
        });
    }
    columnSchemaAdd.push({ field: "StandardComment", title: 'Comment',  template: "#=StandardComment.Description#" });
    columnSchemaAdd.push({ field: "ReviewComment", title: 'Review Comment',  template: "#=ReviewComment.Description#" });
    columnSchemaAdd.push({ command: ["edit", "destroy"] });
  $("#configAddGrid").kendoGrid({
        dataSource: gridConfigDataSourceAdd,
        height: 550,
        navigatable: true,
        autoBind: false,
        editable: {
            mode: "inline"
        },
        toolbar: ["create"],
        columns: columnSchemaAdd
    });

  </script>

示例http://dojo.telerik.com/uHucA

向网格添加新行

1 个答案: