AngularJS - NG Grid doesnt allow columns with spaces

Question

I am just trying to get a basic Angular UI ng-grid working. We have data coming from sql server data sources with columns with spaces and ngGrid is not recognising those column names. Is there any way to get the ngGrid working with columns with spaces without modifying the schema?

var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
    $scope.myData = [{"name test": "Moroni", "age": 50},
                     {"name test": "Tiancum", "age": 43},
                     {"name test": "Jacob", "age": 27},
                     {"name test": "Nephi", "age": 29},
                     {"name test": "Enos", "age": 34}];
    $scope.gridOptions = { 
      data: 'myData',
      columnDefs: [{field:'name test', displayName:'Name'}, {field:'age', displayName:'Age'}]
    };
});

Plunker code here: http://plnkr.co/edit/u6I3P8rG3PlUxsJLXqT1?p=preview

bencripps bencripps · Accepted Answer · 2014-08-23T01:40:39

This is possible, but you will need to change your JSON a bit.

You can access the keys with white space by using bracket notation: fields['name test']:

Your JSON will end up looking something like this:

$scope.myData =
    [ { fields : {"name test": "Moroni", "age": 50} },
      { fields: {"name test": "Tiancum", "age": 43} },
      { fields: {"name test": "Jacob", "age": 27} },
      { fields: {"name test": "Nephi", "age": 29} },
      { fields: {"name test": "Enos", "age": 34 } }   ] ;

And you can set the column definitions this way:

columnDefs: [{field: "fields['name test']", displayName: "fields['Name']" }, {field:"fields['age']", displayName:'Age'}]

Working fiddle:

http://plnkr.co/edit/X7YAjrNXXjk1pbXftoZt?p=preview

There was an issue opened about this, but it was closed. You can see more info here: https://github.com/angular-ui/ng-grid/issues/531

AngularJS - NG Grid doesnt allow columns with spaces

1 Answers