Kendo-UI Grid not presenting data via AngularJS - angularjs

Question

I am using Restangular to resolve an response (a list of products)...I know this is being resolved OK.
I am new to Kendo-UI. But have set up a basic test grid as below. I am using k-rebind, as the products array is likely not resolved at the time the grid is created.
<kendo-grid k-options="mainGridOptions" k-rebind="products"></kendo-grid>
In my controller:
$scope.products = [];
$scope.therapyAreas = [];
$scope.dropDownTAs = [];
prProductService.getProducts().then(function(products) {
$scope.products = products;
prTAService.getTAs().then(function(tas) {
$scope.therapyAreas = tas;
for(var i = 0; i < $scope.therapyAreas.length;i++) {
$scope.dropDownTAs.push({id: $scope.therapyAreas[i].id, therapyArea: $scope.therapyAreas[i].therapyArea});
}
});
});
$scope.mainGridOptions = {
dataSource: {
data: $scope.products
},
height: 550,
scrollable: true,
sortable: true,
filterable: true,
pageable: {
input: true,
numeric: false
},
columns: [
"productName",
"activeIngredients",
"productComments",
"gpt",
"ta"
]
};
}])
I know the products array is being returned, and I would have thought k-rebind would watch the products array for changes so when it is resolved it refreshes the UI...no such luck.
I have tried bashing in a manual array into the data source to mirror the response for the products array, and the grid works fine.
Regards
i

Answer 1

You are absolutely correct that the Kendo UI Grid will initially not have access to the data, so when the Grid gets rendered on the page it will simply bind to an empty array - giving you no data. You're also correct to use the k-rebind attribute in this scenario, since it should keep an eye out for when the scope changes.
However, one important thing that you missed is that k-rebind should be set to the same as your options, as mentioned in this documentation article. This can easily be missed, but I've used this before in similar scenarios.
So, while I haven't tested this I believe the following should work for you:
<kendo-grid k-options="mainGridOptions" k-rebind="mainGridOptions"></kendo-grid>

Answer 2

i got the same error. But this worked for me:
in the html view code:
<kendo-grid data-source="vm.kendoData.data"
sortable="true"
options="vm.gridOptions">
</kendo-grid>
in the angular controller:
vm.kendoData = new kendo.data.DataSource({});
vm.getRegistros = function () {
vm.loading = true;
registroDePontoService.registrosPorPeriodo(vm.registroPorPeriodo)
.success(function (result) {
vm.kendoData.data = result.registros;
}).finally(function () {
vm.loading = false;
});
};
vm.gridOptions = {
columns: [{
field: "date",
title: "Date",
width: "120px"
}, {
field: "column1",
title: "column1",
width: "120px"
}, {
field: "column2",
title: "column2",
width: "120px"
}]