Master-detail kendo ui grid (when select row in master grid get entries in details grid)

Question

I am working with master-details kendo ui grid, which is separated. Master grid is located within tabstrip 1 (tabstrip.select(0)). Fields for add/edit (for master grid) is located within tabstrip 2 (tabstrip.select(1)) in top page. In tabstrip 2 I have nested tabstrips for details grid (in middle-bottom page). Details grid is located within nested tabstrip 1 (tabstripNested.select(0)) and fields for add/edit is located within nested tabstrip 2 (tabstripNested.select(1)). What I want? I want that when I select some row in master grid that display appropriate entries in details grid. This is my masterDataSource:

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

This is my master grid:

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

This is my 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" }
            }
        }
    }
});

This is my details grid:

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 have masterDataId field, which is equal with Id from masterDataSource. Therefore, when I select some row in master grid, I need to display the appropriate records from details grid. For Example: when I select first row in master grid, I need to display first two records from details grid (masterDataId = 1). If I select second row in master grid I need to display third, fifth, sixth and eighth row from details grid (masterDataId = 2). What is the best way for implementing this? Any help appreciated. Thank you in advance.

score 2 · Accepted Answer · answered Mar 18 '16 at 17:26

2

I'm not sure if I get your 100% right, but I have made a simple example based on your case. The point is, when you change the master grid's selected row, you have to filter the detail grid, like:

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

answered Mar 18 '16 at 17:26

DontVoteMeDown

21,122
10
69
105

Hi @DontVoteMeDown, I just saw your answer. When I insert your function, I have a problem about add new record. When I click on some row (for example first or two, before when I click Add) and click Add after that, my details grid display details data which corresponding to master data, but should be display blank grid. In my add click event I am insert this code `var grid = $("#gridMaster").data("kendoGrid"); grid.clearSelection();` but still display details row (but should be display blank grid) – oknevermind Mar 19 '16 at 20:21
Hi @DontVoteMeDown, I am found a solution. In add click event I am added new dataSource for details grid: `var gridDetails = $("#gridDetails").data("kendoGrid"); var ds = new kendo.data.DataSource(); gridDetails.setDataSource(ds);`, and for edit and details click event I am redefined dataSource for details grid `var gridDataDetails = $("#gridDetails").data("kendoGrid").setDataSource(detailsDataSource);`. Thank you for your response, for my post. – oknevermind Mar 21 '16 at 08:39
Hi @DontVoteMeDown, I am really sorry, because I write you, but really need help (unrelated to this post). How can bind foreign key value from kendo ui grid (with angular) dataSource to dropdownlist (which is separated from grid (not inline))? If you have a time, please look my post: [link](http://stackoverflow.com/questions/36728904/how-to-bind-foreign-key-kendo-ui-dropdownlist-with-angular). Of course, exist one more case, when foreign key value is display in grid column. Can you help me any of this case. Once again, really sorry because I ask for help. – oknevermind Apr 22 '16 at 13:26
Hi @DontVoteMeDown, I solved that problem. I am working on [link](http://www.telerik.com/forums/master-detail-kendo-ui-grid---how-to-sum-by-column-from-details-grid-and-display-that-sum-in-master-grid-column-by-rows) and don't know how can solve it. Please can you look this link and have you idea how can solve that. – oknevermind Apr 25 '16 at 12:32
Hi @DontVoteMeDown, I wrote answer for [link](http://stackoverflow.com/questions/36728904/how-to-bind-foreign-key-kendo-ui-dropdownlist-with-angular/36841199#36841199) (post about binding to dropdownlist). – oknevermind Apr 25 '16 at 12:57
DontVoteMeDown, I am work on master-detail grid sum by column (Amount1, Amount2) within details grid and display result sum in master grid columns by row. Thread (post) is posted on [link](http://www.telerik.com/forums/master-detail-kendo-ui-grid---how-to-sum-by-column-from-details-grid-and-display-that-sum-in-master-grid-column-by-rows). If you have a time, please look and tell how can solve this. Really much thanks. – oknevermind Apr 25 '16 at 14:15
I add dataBound in details grid: `var gridDetails = e.sender.dataSource.data(); var gridMaster = $scope.gridMaster.dataSource.data(); $scope.amountCreditJournalSum = 0; $scope.amountDebitJournalSum = 0; for (var i = 0, j = 0; i < gridDetails.length, j < gridMaster.length; i++, j++) { if (gridDetails[i].finGeneralLedgerId == gridMaster[j].Id) { $scope.amountDebitJournalSum += gridDetails[i].AmountDebit; $scope.amountCreditJournalSum += gridDetails[i].AmountCredit; }` – oknevermind Apr 26 '16 at 21:42
Any row which I select always return same value. Always return 0 for Amount1 and 1000 for Amount2. (if you look JSON data for details grid on [link](http://www.telerik.com/forums/master-detail-kendo-ui-grid---how-to-sum-by-column-from-details-grid-and-display-that-sum-in-master-grid-column-by-rows). I don't know how can define for and if statement for this case, where foreignKey from detailsDataSource should match Id from masterDataSource. – oknevermind Apr 26 '16 at 21:48

Master-detail kendo ui grid (when select row in master grid get entries in details grid)

1 Answers1

Linked