angularjs kendo datasource data length zero - angularjs

Question

I'm trying to get my grid (created by angular directive) populated with data, but it is not populating.
Here's my grid declaration:
<div id="dayTypesGrid" kendo-grid k-options='dayTypesGridOptions'></div>
Here's code from my angular controller:
$scope.dayTypesGridOptions = {
schema: {
model: {
id: "description",
fields: {
description: { editable: false, nullable: false },
numberOfDays: { type: "number", validation: { required: true, min: 0} }
}
}
},
columns: [{
field: "description",
title: "Day Type"
}, {
field: "numberOfDays",
title: "Number of Days"
}]
};
So far so good. The grid is instantiated, and I see the two columns. And my angular controller executes my data fetch call, and I store the result in an array $scope.viewModel.dayTypes.
Using the browser dev tools, I can see that $scope.viewModel.dayTypes indeed contains the array of 7 records.
I now want to display those 7 records in the grid, and I do so as follows:
var ds = new kendo.data.DataSource({data: $scope.viewModel.dayTypes});
$('#dayTypesGrid').data('kendoGrid').dataSource = ds;
After that last line of code, my grid still remains empty. Using the browser dev tools, I see that ds.data.length is zero.
What am I missing?

Answer 1

What you're looking for is the setDataSource method:
$('#dayTypesGrid').data('kendoGrid').setDataSource(ds);

Answer 2

Here is how I do it in my project and this works for me. Your mileage may vary because you're using data instead of a transport URL, but I noticed the structure of your grid configuration is a bit different than mine. For example, I define the schema when I create my datasource:
var datasource = new kendo.data.DataSource({
transport: {
read: {
url: "url/to/my/service",
dataType: "json"
}
},
schema: {
data: "results"
}
};
var gridConfig: {
dataSource: dataSource,
rowTemplate: $templateCache.get("modules/reports/row.html"),
height: 500,
scrollable: true,
groupable: true,
filterable: true,
pageable: true,
reorderable: true,
sortable: true,
resizable: true,
"columns": [
{
"field": "status",
"title": "Status",
"width": 200
},
{
"field": "actions",
"title": "Actions",
"width": 200
}
]
}
};