CODEWITHSUNDEEP
javascriptobjectkendo-uikendo-grid
Austin Hoh
Austin Hoh

Reputation: 135

How to create kendo grid detailInit

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>

Upvotes: 1

Views: 2269

Answers (1)

DontVoteMeDown
DontVoteMeDown

Reputation: 21465

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.

Upvotes: 1

Related Questions