Was playing around with a previous example... I'd like to generate the columns for the grid based on what is returned from a call to the server.
For example, in the example below
$scope.columns would not actually be hardcoded in the success() function, but rather be assigned to an object which has been returned in response
-Ed
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css"/>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1028/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>
</head>
<body>
<div ng-app="app" ng-controller="MyCtrl">
<div kendo-grid k-options="gridOptions" k-ng-delay="gridOptions"></div>
</div>
<script>
angular.module("app", ["kendo.directives"]).controller("MyCtrl", function($scope, $http) {
$scope.columns=[ { field: "ProductID" }, { field: "ProductName" } ];
$scope.gridOptions = {
columns: $scope.columns,
pageable: true,
dataSource: {
pageSize: 5,
transport: {
read: function (e) {
$http.jsonp('http://demos.telerik.com/kendo-ui/service/Products?callback=JSON_CALLBACK')
.then(function success(response) {
$scope.columns=[{field: "ProductID"}];
e.success(response.data)
}, function error(response) {
alert('something went wrong')
console.log(response);
})
}
}
}
}
});
</script>
</body>
</html>
1 Answer, 1 is accepted
Rank 1
Resolved -made k-ng-delay dependent on "columns", removed $scope.columns and gridOptions.columns
in the read upon callback set the columns