Binding nggrid with . in json object

Question

I am having an issue while I am trying to bind ng-grid to json array returned from server that contains . in the column names. To demonstrate the problem, I have created a plunker here:

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

If you notice in the plunker, if I use xyz.name, I cannot bind the data to ng-grid. However, if I replace it with xyz_name, it works perfectly fine. I understand that ng-grid uses . notation to go to next level of json array to get the fields. I am hoping to get a workaround that will work with the data I have.

Any suggestions/work arounds for achieving this ?

thanks, Kunal

Answer 1

The solution is to define a cellTemplate for this column using row.entity[col.field] instead of default row.getProperty(col.field) method.

var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
  $scope.myData = [{
    "xyz.name": "Moroni",
    age: 50
  }, {
    "xyz.name": "Enos",
    age: 34
  }];



  var colDefs = [{
      field: 'xyz.name',
      cellTemplate: '<div>{{row.entity[col.field]}}</div>'
    }, {
      field: 'age'
    }

  ];

  $scope.gridOptions = {
    data: 'myData',
    columnDefs: colDefs
  };
});

• The plunkr is working perfectly now. http://plnkr.co/edit/xeLCGuSjrbGyiPgw7q75?p=preview

so, what's wrong with default cellTemplate?

the default cellTemplate used in ng-grid is like this:

<div class="ngCellText" ng-class="col.colIndex()"><span ng-cell-text>{{row.getProperty(col.field)}}</span></div>

it uses row.getProperty() method which eventually calls angular $parse service. it will evaluate the argument which treats the . as child operator.

so in this case 'xyz.name' actually maps to json data structure like this:

xyz:{name: "moroni"}

row.entity[col.field] just maps the data like a hashmap, so it will serve the purpose here.