Kendo-UI Grid does not represent data via AngularJS
I am using Restangular to solve the answer (product list) ... I know this is resolved OK.
I am new to Kendo-UI. But set up a basic test mesh as shown below. I am using k-rebind as the array of products will probably not be resolved at the time the mesh is generated.
<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 an array of products is being returned, and I would have thought that k-rebind would watch the array of products for changes, so when resolved it updates the UI ... no such luck.
I tried to redeem the array manually in the datasource to reflect the answer for the array of products and the grid works fine.
Hello
I am
You are absolutely correct that the Kendo UI grid initially has no data access, so when the Grid is rendered on the page, it just binds to an empty array - it doesn't give you any data. You are also using the attribute correctly k-rebind
in this scenario as it needs to keep track of when the scope changes.
However, one important thing you missed is that it k-rebind
should be set to the same as your options, as stated in this documentation . This can be easily overlooked, but I've used it before in scenarios like this.
So, until I tested this, I believe the following should work for you:
<kendo-grid k-options="mainGridOptions" k-rebind="mainGridOptions"></kendo-grid>
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 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"
}]