Using the kendo example for angular (http://demos.telerik.com/kendo-ui/grid/angular).
I have a simple kendo ui grid setup (kendo ui and angularjs) with a detail template that retrieves the data properly for the detail template (can see the correct data returned in the browsers developer console, attached as screenshot ) ,
<div>
<div
kendo-grid
options="homeGridOptions">
<div k-detail-template>
<div kendo-grid options="detailGridOptions(dataItem)">
</div>
</div>
</div>
</div>
and in the angular controller
$scope.homeGridOptions = {
dataSource: $scope.userchartsDS,
sortable: true,
pageable: true,
dataBound: function() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
columns: [
{
field: "chartno",
title: "Chart"
}
]
};
$scope.chartsDS = new kendo.data.DataSource({
transport: {
read: {
url: "http://site.local/api/v1/index.php/user/home",
dataType: "json"
}
}
});
$scope.detailGridOptions = function(dataItem) {
return {
dataSource: {
type: "json",
transport: {
read: "http://site.local/api/v1/index.php/products/chart/" + dataItem.chartno + "/20100101/20150515"
},
filter: { field: "PRODUCT_NAME", operator: "eq", value: dataItem.chartno }
},
scrollable: false,
sortable: true,
pageable: true,
columns: [
{ field: "PRODUCT_NAME", title:"chart", width: "56px" },
{ field: "VERB_CODE", title:"verb code", width: "110px" },
{ field: "PRODUCT_REF_EN", title:"product" },
{ field: "VERB_NAME_EN", title: "Verb", width: "190px" }
]
};
};
}]);
but the detail template is not populating with the data. I can see in batarang this information for the detail grids model
{ column:
{ encoded: true
hidden: null
field: PRODUCT_NAME title: Chart
width: 56px
template: #: data.PRODUCT_NAME # } }
Do I need to explicitly inject the detail template data source array value into the angular scope, it did not appear to be necessary in the example?