Make ColumnsDefs of UI Grid dynamic

Question

I have an angular UI Grid which I use to populate Data for my reports. Now I have almost 20 reports and I want to use one UI Grid to populate data for all reports. I am basically trying to configure columnDefs property at run time by looping throught the properties of an object. Here is what I am trying:

CrudService.GetData($scope.studyId, reportsTest).then(function (data) {
    $scope.getreportsdata = data;
    $scope.columns = [];
    for (var key in $scope.getreportsdata[0]) {
        if ($scope.getreportsdata[0].hasOwnProperty(key)) {
            if (!utilityExtensionService.isUndefinedOrNull($scope.getreportsdata[0][key]) && $scope.getreportsdata[0][key] != "")
                $scope.columns.push({ field: key, enableSorting: false, headerCellClass: 'ui-grid-header' });
        }
    }
});

And this how I am trying to configure my UI Grid:

$scope.gridOptions = {
            enableHorizontalScrollbar: 0,
            enableVerticalScrollbar: 0,
            enableSorting: true,
            columnDefs: 'columns',
            data: 'getreportsdata'}

However I am not being able to bind using this method. Can you please suggest some alternative solution to this.

Answer 1

The way you are configuring the grid is wrong.

$scope.gridOptions = {
   enableHorizontalScrollbar: 0,
   enableVerticalScrollbar: 0,
   enableSorting: true,
   columnDefs: $scope.columns,
   data: $scope.getreportsdata
}

From next time, it is better to replicate the issue on a plunkr link.