I am facing an issue with my kendo grid that is being controlled by an angular controller:
<div>
<kendo-grid options="mainGridOptions" k-data-source="gridData">
</kendo-grid>
</div>
UPDATE The data is loading successfully, however, the grid is not rendering as expected. Additionally, there was a mistake in treating sectors as status.
"use strict";
angular.module("tenderApp")
.controller("tenderCtrl", ["$scope", "adalAuthenticationService", "tenderSvc", "$q", function ($scope, adalService, tenderSvc, $q) {
$scope.mainGridOptions = null;
$scope.gridSource = null;
$scope.statusData = null;
function loadStatusData() {
return tenderSvc.getSector()
.then(function(sector) {
$scope.sectorData = sector.data.map(function (obj) {
return {
text: obj.bezeichnung,
value: obj.id
};
});
return $scope.sectorData;
});
}
function loadGridSource(result) {
return tenderSvc.getItems()
.then(function (res) {
$scope.gridSource = res.data;
return res.data;
});
}
loadStatusData()
.then(loadGridSource)
.then(function (res) {
//both properties are available at this point
console.log($scope.gridSource);
console.log($scope.sectorData);
$scope.gridData = new kendo.data.DataSource({
transport: {
read: function (e) {
e.success($scope.gridSource);
},
//...
},
//...
});
$scope.mainGridOptions = {
toolbar: ["excel"],
dataSource: $scope.gridData,
columns: [
{ field: "sektor", title: "Sektor", values: $scope.sectorData },
{ command: ["edit"], title: "Aktionen", width: "120px" }
]
};
});
}]);
The main issue I am encountering is that the final call to populate the grid is not functioning correctly. Although the data has been loaded, the grid does not appear on the screen.