How to create kendo grid detailInit

Question

I'm trying to create a kendo grid with detailInit function but i didn't know how to implement it.

How to show the address[object,Object] data in my grid detailsInit function where allow user to toggle to show the details and there is an sample of the wanted output below:-

Current output:

    Name      |  Phone         |     Address
------------------------------------------------
John Smith    | (519) 420-2391 | [object Object]
------------------------------------------------
James Seth    | (123) 212-3332 | [object Object]

wanted output:

   Name       |  Phone         |     
--------------------------------
John Smith    | (519) 420-2391 | 
--------------------------------
 ^  Location  | no             |
   -----------------------------
    london    | 123            |
    aus       | 456            |

 var peoples = [], address = []; peoples = [{ id: 1, name: "John Smith", phone: "(519) 420-2391", address: [{ Location: "london", no: "123" }, { Location: "aus", no: "456" }] }, { id: 2, name: "James Seth", phone: "(123) 212-3332", address: [{ Location: "Paris", no: "789" }, { Location: "ita", no: "888" }] }]; $("#grid").kendoGrid({ dataSource: { data: peoples, }, columns: [{ field: "name", title: "Name" }, { field: "phone", title: "Phone number" }, { field: "address", title: "Address" }], });

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Untitled</title> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css"> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.rtl.min.css"> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css"> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.mobile.all.min.css"> <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script> <script src="http://kendo.cdn.telerik.com/2016.2.714/js/angular.min.js"></script> <script src="http://kendo.cdn.telerik.com/2016.2.714/js/jszip.min.js"></script> <script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script> </head> <body> <div id="example"> <div id="grid"></div> </div> </body> </html>

Answer 1

Just create another grid in your detailInit event with the address property of the current row as it's data:

detailInit: function(e) {
    $('<div></div>')
        .appendTo($(e.detailRow))
        .kendoGrid({
            dataSource: {
                data: e.data.address
            },
            columns: [{
                field: "Location"
            }, {
                field: "no"
            }]
        });
}

Official demo of how to do it.

How to create kendo grid detailInit

Question

1 answers

solution1
0 ACCPTED 2016-12-01 12:44:02

How to create kendo grid detailInit

Question

1 answers

solution1 0 ACCPTED 2016-12-01 12:44:02

solution1
0 ACCPTED 2016-12-01 12:44:02