主细节kendo ui网格（当主网格中的选择行获得细节网格中的条目时）

我正在使用master-details kendo ui网格，它是分开的。主栅格位于标签栏1（tabstrip.select（0））内。添加/编辑字段（用于主网格）位于顶部页面中的tabstrip 2（tabstrip.select（1））内。在tabstrip 2中，我为嵌套的细节网格（在中间底部的页面）嵌套了tabstrips。详细信息网格位于嵌套标签页1（tabstripNested.select（0））中，添加/编辑字段位于嵌套标签页2（tabstripNested.select（1））内。我想要的是？我希望当我在主栅格中选择一些显示细节栅格中相应条目的行时。这是我的masterDataSource：主细节kendo ui网格（当主网格中的选择行获得细节网格中的条目时）

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" 
    }] 
});

这是我detailsDataSource：

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有masterD ataId字段，它与来自masterDataSource的Id相等。因此，当我在主网格中选择一些行时，我需要从详细网格显示适当的记录。例如：当我选择主栅格中的第一行时，我需要显示来自细节栅格（masterDataId = 1）的前两个记录。如果我选择主栅格中的第二行，我需要从细节栅格（masterDataId = 2）显示第三，第五，第六和第八行。实施这个的最好方法是什么？任何帮助赞赏。先谢谢你。

来源

2016-03-18 oknevermind

我不确定我是否能够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

来源

2016-03-18 17:26:22 DontVoteMeDown

@DontVoteMeDown您好，我刚才看到你的答案。当我插入你的功能时，我有一个关于添加新记录的问题。当我点击某行时（例如前一个或两个，之后单击添加），然后单击添加后，我的详细信息网格显示与主数据对应的详细数据，但应该显示空白网格。在我添加的点击事件中，我插入了这个代码'var grid = $（“＃gridMaster”）。data（“kendoGrid”）; grid.clearSelection（）;'但仍显示详细信息行（但应显示空格） – oknevermind

Hi @DontVoteMeDown，我找到了解决方案。在添加点击事件中，我为详细信息网格添加了新的dataSource：'var gridDetails = $（“＃gridDetails”）。data（“kendoGrid”）; var ds = new kendo.data.DataSource（）; （gridDataTetails）$（“＃gridDetails”）。data（“kendoGrid”）.setDataSource（detailsDataSource）;'。gridDetails.setDataSource（ds）;'，并为编辑和细节点击事件我重新定义dataSource的细节网格。感谢您的回复，感谢您的回复。 – oknevermind

@oknevermind太棒了！乐意效劳！！ – DontVoteMeDown

主细节kendo ui网格（当主网格中的选择行获得细节网格中的条目时）

回答

相关问题