ng-grid column size problems. And ng-if issue

Question

I am having problems with my grid column widths in ng-grid. My issue is that I don't know ahead of time what the columns will be (they are retrieved from a service call at the same time as the values. My Json object has two properties in it. An array of strings for column names and then a 2d array for values. currently the columns do not size to fit the column headers. I understand the columns will resize to fit the row data but what if no results are returned. then you have a mess. I tried making it so I did not have to set grid options until I had my data but then get an undefined error. I saw another post where the solution for that was to use ng-if in the div tag so the grid does not load until you want it to. that did not work either as the grid still tried to load before the if statement was satisfied. Below is my code. any thoughts? also,my ng-if was like this: ng-if="contentAvailable". Also adding a screen shot. My expectations would be for a horizontal scrollbar to show up. enter image description here

    app.controller('mainController',function($scope,dataFactory){
    $scope.contentAvailable = false;
    $scope.gridOptions = {
        columnDefs: 'columns',
        showGroupPanel: true
    };

    $scope.url = 'http://example.com';

        if (typeof String.prototype.startsWith != 'function') {
            String.prototype.startsWith = function (str) {
                return this.indexOf(str) == 0;
            };
        }

    $scope.Fetch = function () {
        dataFactory.Fetch($scope.url,$scope.config).success(function (blah) {
            var result = $scope.transformJsonDataSet(blah);

        })
          .error(function (error) {
              $scope.result = error;
          });
    };

    $scope.transformJsonDataSet = function (ds) {
        var tmp = angular.fromJson(ds);
        var fieldNames = tmp.FieldNames;
        var fieldValues = tmp.FieldValues;

        var columns = [];

        for (var i = 1; i < fieldNames.length; i++) {
            if (fieldNames[i].startsWith('DECODE_') == false) {
                columns.push({ field: fieldNames[i], displayName: fieldNames[i], cellClass: 'headerStyle'});
            }
        }

        $scope.columns = columns;

        $scope.contentAvailable = true;
        return ds;
    };
});

app.factory('dataFactory', ['$http', function ($http) {
    var dataFactory = {};
    dataFactory.Fetch = function (url,config) {
        return $http.get(url,config);
    };

    return dataFactory;
}]);

AardVark71 AardVark71 · Accepted Answer · 2013-10-31T10:31:08

There's no $scope.columns declared in your controller?
Try defining a $scope.columns variable and assign it an empty variable:

app.controller('mainController',function($scope,dataFactory){
    $scope.contentAvailable = false;
    $scope.columns = [];
    $scope.gridOptions = {
        columnDefs: 'columns',
        showGroupPanel: true
    };
 /* */

ng-grid column size problems. And ng-if issue

1 Answers