angular ng grid not displaying data when there is a special character in column name

In this post am going to explain how to show data in ng-grid when there is a special character in column name.

Assume you have following columnDefs in gridOptions

columnDefs: [{
      name: "parent.name",
      displayName: 'Name',
      type:'string'

    }, {
      name: 'lastName',
      displayName: 'Surname'
    }]
  };

As you see, our first column has name as parent.name. It has dot ('.') in it's name. So if you use this columnDefs in your ng-grid it will not show data in that column as the name has special characters in it. To make it work you need to add following flag to your gridOptions

gridOptions.flatEntityAccess = true;

So your final gridOptions will look something like below

  $scope.gridOptions = {

    columnDefs: [{
      name: "parent.name",
      displayName: 'Name',
      type:'string'

    }, {
      name: 'lastName',
      displayName: 'Surname'
    }]
  };

  $scope.gridOptions.data = [{
    "parent.name": "John",
    "lastName": "Cena"
  }];

 $scope.gridOptions.flatEntityAccess = true;

Check the following plunkr for working example.

ng-grid show data when there is a special character in column name

This is how we can show data in ng-grid even if the column name is having special character in it.

For more posts on angularJs refer: AgngularJs