This is a migrated thread and some comments may be shown as answers.

Dynamic columns based on object from server

1 Answer 66 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Edward
Top achievements
Rank 1
Edward asked on 09 Dec 2016, 10:24 PM

 

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

Sort by
0
Edward
Top achievements
Rank 1
answered on 10 Dec 2016, 01:49 PM

Resolved -made k-ng-delay dependent on "columns", removed $scope.columns and gridOptions.columns

 

in the read upon callback set the columns

Tags
Grid
Asked by
Edward
Top achievements
Rank 1
Answers by
Edward
Top achievements
Rank 1
Share this question
or