Master-Detail Kendo UI Grid（当主网格中选择行时，在详细信息网格中获取条目）答案

【问题标题】：Master-detail kendo ui grid (when select row in master grid get entries in details grid)Master-Detail Kendo UI Grid（当主网格中选择行时，在详细信息网格中获取条目）
【发布时间】：2016-07-05 02:28:39
【问题描述】：

我正在使用分离的 master-details kendo ui 网格。主网格位于 tabstrip 1 (tabstrip.select(0)) 内。用于添加/编辑的字段（用于主网格）位于首页的 tabstrip 2 (tabstrip.select(1)) 中。在 tabstrip 2 中，我嵌套了用于详细信息网格的 tabstrips（在中间底部页面中）。详细信息网格位于嵌套的 tabstrip 1 (tabstripNested.select(0)) 中，用于添加/编辑的字段位于嵌套的 tabstrip 2 (tabstripNested.select(1)) 中。我想要的是？我希望当我在主网格中选择一些在详细信息网格中显示适当条目的行时。这是我的主数据源：

var masterDataSource = new kendo.data.DataSource({
    data: [
            { Id: 1, fieldMaster1: "10236", fieldMaster2: "20.01.2015", fieldMaster3: "24.01.2015", fieldMaster4: 1900.0, fieldMaster5: 1900.0, fieldMaster6: 0.0, fieldMaster7: "someth", fieldMaster8: "test" },
            { Id: 2, fieldMaster1: "10648", fieldMaster2: "26.01.2015", fieldMaster3: "28.01.2015", fieldMaster4: 7990.0, fieldMaster5: 7990.0, fieldMaster6: 0.0, fieldMaster7: "skafiskafnjak", fieldMaster8: "test 2" },
            { Id: 3, fieldMaster1: "10700", fieldMaster2: "22.01.2015", fieldMaster3: "25.01.2015", fieldMaster4: 2720.0, fieldMaster5: 2720.0, fieldMaster6: 0.0, fieldMaster7: "temp", fieldMaster8: "test 3" },
            { Id: 4, fieldMaster1: "10810", fieldMaster2: "24.01.2015", fieldMaster3: "27.01.2015", fieldMaster4: 0.0, fieldMaster5: 0.0, fieldMaster6: 0.0, fieldMaster7: "hlabuka", fieldMaster8: "test 4" },
            { Id: 5, fieldMaster1: "10101", fieldMaster2: "29.01.2015", fieldMaster3: "30.01.2015", fieldMaster4: 0.0, fieldMaster5: 0.0, fieldMaster6: 0.0, fieldMaster7: "descr", fieldMaster8: "test 5" },
            { Id: 6, fieldMaster1: "10364", fieldMaster2: "25.01.2015", fieldMaster3: "31.01.2015", fieldMaster4: 0.0, fieldMaster5: 0.0, fieldMaster6: 0.0, fieldMaster7: "TestNova", fieldMaster8: "" }
    ],
    schema: {
        model: {
            id: "Id",
            fields: {
                Id: { type: "number" },
                fieldMaster1: { type: "string" },
                fieldMaster2: { type: "string" },
                fieldMaster3: { type: "string" },
                fieldMaster4: { type: "number" },
                fieldMaster5: { type: "number" },
                fieldMaster6: { type: "number" },
                fieldMaster7: { type: "string" },
                fieldMaster8: { type: "string" }
            }
        }
    }
});

这是我的主网格：

var gridMaster = $("#gridMaster").kendoGrid({
    columns: [
            { field: "Id", hidden: true },
            { field: "fieldMaster1", width: "50px" },
            { field: "fieldMaster2", width: "77px" },
            { field: "fieldMaster3", width: "70px" },
            { field: "fieldMaster4", hidden: true },
            { field: "fieldMaster5", width: "170px" },
            { field: "fieldMaster6", hidden: true },
            { field: "fieldMaster7", width: "80px" },
            { field: "fieldMaster8", width: "80px" }
    ],
    dataSource: masterDataSource,
    selectable:  true,
    filterable: true,
    scrollable: true,
    pageable: {
        pageSize: 16
    },
    toolbar: [{
        name: "create"
    }]
});

这是我的详细资料数据源：

var detailsDataSource = new kendo.data.DataSource({
    data: [
        { Id: 1, masterDataId: 1, fieldDetails1: "20.01.2015", fieldDetails2: "096680", fieldDetails3: "descr1", fieldDetails4: 1000.00, fieldDetails5: 1000.00, fieldDetails6: "ETF", fieldDetails7: "entry1", fieldDetails8: "tmp", fieldDetails9: "20.03.2016", fieldDetails10: "", fieldDetails11: 0.00 },
          { Id: 2, masterDataId: 1, fieldDetails1: "26.01.2015", fieldDetails2: "100258", fieldDetails3: "descr2", fieldDetails4: 900.00, fieldDetails5: 900.00, fieldDetails6: "TMP", fieldDetails7: "entry2", fieldDetails8: "tmp2", fieldDetails9: "20.03.2016", fieldDetails10: "", fieldDetails11: 0.00 },
          { Id: 3, masterDataId: 2, fieldDetails1: "22.01.2015", fieldDetails2: "122554", fieldDetails3: "descr3", fieldDetails4: 970.00, fieldDetails5: 970.00, fieldDetails6: "TMP", fieldDetails7: "entry3", fieldDetails8: "tmp", fieldDetails9: "20.03.2016", fieldDetails10: "", fieldDetails11: 0.00 },
          { Id: 4, masterDataId: 3, fieldDetails1: "24.01.2015", fieldDetails2: "200148", fieldDetails3: "descr4", fieldDetails4: 2000.00, fieldDetails5: 2000.00, fieldDetails6: "ETF", fieldDetails7: "entry1", fieldDetails8: "tmp2", fieldDetails9: "20.03.2016", fieldDetails10: "", fieldDetails11: 0.00 },
          { Id: 5, masterDataId: 2, fieldDetails1: "29.01.2015", fieldDetails2: "344688", fieldDetails3: "descr5", fieldDetails4: 1970.00, fieldDetails5: 1970.00, fieldDetails6: "TMP", fieldDetails7: "entry3", fieldDetails8: "tmp", fieldDetails9: "20.03.2016", fieldDetails10: "", fieldDetails11: 0.00 },
          { Id: 6, masterDataId: 2, fieldDetails1: "25.01.2015", fieldDetails2: "188366", fieldDetails3: "descr", fieldDetails4: 2250.00, fieldDetails5: 2250.00, fieldDetails6: "TMP", fieldDetails7: "entry2", fieldDetails8: "tmp", fieldDetails9: "20.03.2016", fieldDetails10: "", fieldDetails11: 0.00 },
          { Id: 7, masterDataId: 3, fieldDetails1: "24.01.2015", fieldDetails2: "264486", fieldDetails3: "descr1", fieldDetails4: 720.00, fieldDetails5: 720.00, fieldDetails6: "ETF", fieldDetails7: "entry2", fieldDetails8: "tmp", fieldDetails9: "20.03.2016", fieldDetails10: "", fieldDetails11: 0.00 },
          { Id: 8, masterDataId: 2, fieldDetails1: "30.01.2015", fieldDetails2: "400822", fieldDetails3: "descr", fieldDetails4: 2800.00, fieldDetails5: 2800.00, fieldDetails6: "ETF", fieldDetails7: "entry1", fieldDetails8: "tmp2", fieldDetails9: "20.03.2016", fieldDetails10: "", fieldDetails11: 0.00 }
    ],
    schema: {
        model: {
            id: "Id",
            fields: {
                Id: { type: "number" },
                masterDataId: { type: "number" },
                fieldDetails1: { type: "string" },
                fieldDetails2: { type: "string" },
                fieldDetails3: { type: "string" },
                fieldDetails4: { type: "number" },
                fieldDetails5: { type: "number" },
                fieldDetails6: { type: "string" },
                fieldDetails7: { type: "string" },
                fieldDetails8: { type: "string" },
                fieldDetails9: { type: "string" },
                fieldDetails10: { type: "string" },
                fieldDetails11: { type: "number" }
            }
        }
    }
});

这是我的详细信息网格：

var gridDetails = $("#gridDetails").kendoGrid({
    columns: [
      { field: "Id", hidden: true },
      { field: "masterDataId", hidden: true },
      { field: "fieldDetails1", width: "70px" },
      { field: "fieldDetails2", width: "65px" },
      { field: "fieldDetails3", width: "170px" },
      { field: "fieldDetails4", width: "80px" },
      { field: "fieldDetails5", width: "80px" },
      { field: "fieldDetails6", width: "90px" },
      { field: "fieldDetails7", width: "120px" },
      { field: "fieldDetails8", hidden: true },
      { field: "fieldDetails9", hidden: true },
      { field: "fieldDetails10", hidden: true },
      { field: "fieldDetails11", hidden: true }
    ],
    dataSource: detailsDataSource,
    selectable: true,
    filterable: true,
    scrollable: true,
    pageable: {
        pageSize: 10
    },
    toolbar: [{
        name: "create",
        text: "Add New"
    }],
    height: 205
});

detailsDataSource 具有 masterDataId 字段，该字段与 masterDataSource 中的 Id 相同。因此，当我在主网格中选择某行时，我需要从详细信息网格中显示相应的记录。例如：当我在主网格中选择第一行时，我需要显示详细信息网格中的前两条记录（masterDataId = 1）。如果我在主网格中选择第二行，我需要从详细信息网格（masterDataId = 2）中显示第三、第五、第六和第八行。实现这一点的最佳方法是什么？任何帮助表示赞赏。提前谢谢你。

【问题讨论】：

标签： javascript jquery kendo-ui master-detail kendo-ui-grid

【解决方案1】：

我不确定我是否 100% 正确，但我根据你的情况做了一个简单的例子。关键是，当您change主网格的选定行时，您必须过滤详细网格，例如：

change: function() {
    var gridDetails = $("#grid-detail").data("kendoGrid");
    var dataItem = this.dataItem(this.select());
    gridDetails.dataSource.filter({ field: "parentId", value: dataItem.id, operator: "eq" });
}

Demo

【讨论】：

嗨@DontVoteMeDown，我刚刚看到你的回答。当我插入你的函数时，我有一个关于添加新记录的问题。当我点击某行（例如第一行或第二行，在我点击添加之前）并点击添加之后，我的详细信息网格显示与主数据对应的详细信息数据，但应该显示空白网格。在我的添加点击事件中，我插入此代码var grid = $("#gridMaster").data("kendoGrid"); grid.clearSelection();，但仍显示详细信息行（但应显示空白网格）
嗨@DontVoteMeDown，我找到了解决方案。在添加单击事件中，我为详细信息网格添加了新数据源：var gridDetails = $("#gridDetails").data("kendoGrid"); var ds = new kendo.data.DataSource(); gridDetails.setDataSource(ds);，对于编辑和详细信息单击事件，我为详细信息网格 var gridDataDetails = $("#gridDetails").data("kendoGrid").setDataSource(detailsDataSource); 重新定义了数据源。感谢您的回复，感谢我的帖子。
嗨@DontVoteMeDown，我真的很抱歉，因为我写信给你，但真的需要帮助（与这篇文章无关）。如何将外键值从 kendo ui 网格（带角度）数据源绑定到下拉列表（与网格分离（非内联））？如果你有时间，请看我的帖子：link。当然，还存在另一种情况，即在网格列中显示外键值。你能帮我解决这个问题吗？再一次，真的很抱歉，因为我寻求帮助。
嗨@DontVoteMeDown，我解决了这个问题。我正在处理link 并且不知道如何解决它。请你看看这个链接，你知道如何解决这个问题。
嗨@DontVoteMeDown，我为link 写了答案（关于绑定到下拉列表的帖子）。