kendo ui: no Data in Subgrid - kendo-ui

Question

i'm working with kendo ui to create rich user interface, but i'm stuck t the following:
I want a Grid with a subgrid, the first one displays customer info, like name, etc the second shows the available shipping-adresses, the customer saved. Now my problem is, that in the subgrid is not data, although firebug shows, that the data was returned. This is my source:
$(function() {
var main = $("#customer-grid").kendoGrid({
dataSource: {
transport:{
read :"data/users.php",
update :{
url :"data/users.php?action=update",
type:"POST",
data: function (data) {
data.birthday = kendo.toString(data.birthday, "yyyy-MM-dd");
return data;
}
},
destroy:{
url :"data/users.php?action=destroy",
type:"POST"
}
},
schema: {
data: "data",
model: {
id: "id",
fields: {
id: {editable: false},
activated: { type: "boolean" },
birthday: {type: "date"},
gender: {defaultValue: "W"}
}
}
}
},
height: 250,
filterable: true,
sortable: true,
pageable: true,
detailInit: detailInit,
dataBound: function() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
columns: [{
field: "id",
title: "ID",
width: "50px"
}, {
field: "gender",
title: "Geschlecht",
width: "100px",
values: data
}, {
field: "firstname",
title: "Vorname"
}, {
field: "lastname",
title: "Nachname"
}, {
field: "birthday",
title: "Geburtstag",
width: "100px",
format: "{0:dd.MM.yyyy}"
},{
field: "mail",
title: "E-Mail"
},{
field: "activated",
title: "Aktiviert",
width: "100px",
values: actval
}, {
command: ["edit", "destroy"],
title: " ",
width: "210px"
}],
editable:{
mode: "popup"
}
});
});
function detailInit(e) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
transport: {
read: "data/adress.php?uid="+e.data.id
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize:6
},
scrollable: false,
sortable: true,
pageable: true,
columns: [
{ field: "id", width: 70 },
{ field: "zipcode", title:"Ship Country", width: 100 },
{ field: "city", title:"Ship Address" },
{ field: "street", title: "Ship Name", width: 200 }
]
});
}
The function gets its data from a php page, which does a mysql-query and then gives back the data as application/json. But nothing is shown.
Hopefully you guys can help me.
Regards

Answer 1

I tested your code and it works fine.
Check:
e parameter format. I've used: detailInit({ detailCell : $("#grid"), data : { id : 1}});
JSON returned by data/adress.php. I've returned:
[
{"city":"Madrid", "id":"1", "zipcode":"31000", "street":"my street 1", "number":5},
{"city":"Sofia", "id":"2", "zipcode":"32000", "street":"my street 2", "number":4},
{"city":"London", "id":"3", "zipcode":"33000", "street":"my street 3", "number":3},
{"city":"San Francisco", "id":"4", "zipcode":"34000", "street":"my street 4", "number":2},
{"city":"Berlin", "id":"5", "zipcode":"35000", "street":"my street 5", "number":1}
]
Using the following (hardcoded) php response:
<?php
header('Content-type: application/json');
$named_array = array(
array("city" => "Madrid", "id" => "1", "zipcode" => "31000", "street" => "my street 1", "number" => 5),
array("city" => "Sofia", "id" => "2", "zipcode" => "32000", "street" => "my street 2", "number" => 4),
array("city" => "London", "id" => "3", "zipcode" => "33000", "street" => "my street 3", "number" => 3),
array("city" => "San Francisco", "id" => "4", "zipcode" => "34000", "street" => "my street 4", "number" => 2),
array("city" => "Berlin", "id" => "5", "zipcode" => "35000", "street" => "my street 5", "number" => 1)
);
echo json_encode($named_array);
?>
EDIT: This is the definition of the grid containing the subgrid.
var outer = $("#outer").kendoGrid({
dataSource:{
type:"json",
transport:{
read:"names.php"
},
pageSize:5
},
sortable:true,
columns:[
{ field:"id", width:70 },
{ field:"name", title:"Name", width:100 },
{ field:"lastname", title:"LastName", width:100 },
{ title:"Address", width:300, attributes:{ class:"ob-address"}}
]
}).data("kendoGrid");
and then on a button click, I run:
$(".ob-address", outer.tbody).each(function (idx, elem) {
detailInit({ detailCell:elem, data:{ id:1}});
});
As you can see I marked a column in the outer grid with a CSS class named ob-address and the function selects all the cell in the body of the outer table for inserting the inner table (subgrid).