how to access datasource child.
<div id="a" data-role="grid"
data-toolbar="['excel']"
data-editable="false"
data-selectable="true"
data-filterable="true"
data-columnMenu="true"
data-groupable="true"
data-pageable='{ "pageSize": 10}'
data-reorderable="true"
data-resizable="true"
data-sortable="true"
data-height="550"
data-no-records= "true"
data-detail-template="templateSubGrid"
data-columns="[
{ 'field': 'a.nome','title':'nome'},
{ 'field': 'a.stato','title':'stato'}
]"
data-bind="source: GridSource,events:{detailInit: onDetailInit}">
</div>
<script id="templateSubGrid" type="text/x-kendo-template">
<h4>ciao ciao </h4>
<div id="Subgrid"
data-role="grid"
data-bind="source: GridSource.b"
data-columns="[
{ 'field': 'name','title':' name'},
{ 'field': 'company','title':'company'},
]">
</div>
</script>
JS:
this.vm = kendo.observable({
Grid:Source:[],
onDetailInit:function(e){
var dataItem = $("#Subgrid").data("kendoGrid").dataItem(e.masterRow);
kendo.bind("#Subgrid", dataItem);
}
});
kendo.bind($("#m"), this.vm);
//GridSource is filled with the ajax function
The response is like this:
[
{
"a":{
"idName":1,
"name":"abbi",
},
"b":[
{
"idSurname":2,
"surname":"24353453252",
},
{
"idSurname":3,
"surname":"fghgfhjk",
},
{
"idSurname":4,
"surname":"24ssdfds3252",
}
]
}
]
'b' must be the data source of the detailtemplate grid.