How can I use nested Json to populate the Kendo UI grid?

Question

How can I fill the Kendo UI grid with nested JSON.

I mean, my JSON is like

var myJson: [{"oneType":[ {"id":1,"name":"John Doe"}, {"id":2,"name":"Don Joeh"} ]}, {"othertype":"working"}, {"otherstuff":"xyz"}] }]; 

and I want Grid Kendo UI with columns like Id, Name, OtherType and OtherStuff.

Thanks in advance.!

Answer 1

For complex JSON structures, you can use schema.parse

 var grid = $("#grid").kendoGrid({ dataSource : { data : [ { "oneType": [ {"id": 1, "name": "John Doe"}, {"id": 2, "name": "Don Joeh"} ] }, {"othertype": "working"}, {"otherstuff": "xyz"} ], pageSize: 10, schema : { parse : function(d) { for (var i = 0; i < d.length; i++) { if (d[i].oneType) { return d[i].oneType; } } return []; } } } }).data("kendoGrid"); 

If you slightly change your JSON to:

 { "oneType" : [ {"id": 1, "name": "John Doe"}, {"id": 2, "name": "Don Joeh"} ], "othertype" : "working", "otherstuff": "xyz" } 

then you can use:

 var grid = $("#grid").kendoGrid({ dataSource: { data : { "oneType" : [ {"id": 1, "name": "John Doe"}, {"id": 2, "name": "Don Joeh"} ], "othertype" : "working", "otherstuff": "xyz" }, pageSize: 10, schema : { data: "oneType" } } }).data("kendoGrid"); 

Answer 2

I just wanted to introduce another answer based on OnaBai's.

http://jsfiddle.net/L6LwW/17/

HTML:

 <script id="message-template" type="text/x-kendo-template"> #for (var i = 0; i < ddl.length; i++) {# <li><span>#=ddl[i].value#</li> #}# </script> <div id="grid"></div> 

JS:

 var grid = $("#grid").kendoGrid({ dataSource: { data: [ [{ "id": 1, "name": "John Doe", "ddl": [{ "key": 1, "value": "hello" }, { "key": 1, "value": "hello" }] }, { "id": 2, "name": "Don Joeh", "ddl": [{ "key": 1, "value": "hello" }, { "key": 1, "value": "hello" }] }] ], pageSize: 10, schema: { parse: function(d) { for (var i = 0; i < d.length; i++) { if (d[i]) { return d[i]; } } return []; } } }, columns: [{ field: "id", title: "ID" }, { field: "name", title: "Name" }, { field: "ddl", title: "DDL", width: "180px", template: kendo.template($("#message-template").html()) } //template: "#=ddl.value#" } ] }).data("kendoGrid");