Ng-grid insert several items to cell

Question

How to insert several values to 1 cell for example email, phone and address to 1 cell. I need to make less rows and more info in cells.

I tried such way:

 angular.forEach($scope.genData,function(row){
        row.getNameAndAge = function(){
            return this.name + '-' this.age ;
        }
    });

and seted:

columnDefs: [
            {field:'getNameAndAge()', displayName:'Contacts'}
        ]

but it don't work for me.

My JSON:

{
        "picture": "http://placehold.it/32x32", 
        "about": "Laboris do in mollit nostrud sit tempor ad velit. Duis excepteur ex voluptate dolore elit ad non aliqua. Dolore pariatur non sit eiusmod irure. Aliquip anim officia ea pariatur commodo excepteur. Nisi cupidatat Lorem minim culpa et voluptate commodo duis.\r\n", 
        "guid": "89f8d801-908b-4f9f-a361-d32a0b154451", 
        "name": "Rivers Navarro", 
        "tags": [
            "sit", 
            "pariatur", 
            "non", 
            "eu", 
            "sit", 
            "exercitation", 
            "magna"
        ], 
        "gender": "male", 
        "age": 36, 
        "friends": [
            {
                "id": 0, 
                "name": "Frazier Jefferson"
            }, 
            {
                "id": 1, 
                "name": "Polly Estes"
            }, 
            {
                "id": 2, 
                "name": "Klein Cleveland"
            }
        ], 
        "registered": "2004-05-18T13:23:46 -03:00", 
        "longitude": 79.622006999999996, 
        "email": "riversnavarro@everest.com", 
        "phone": "+1 (972) 552-3807", 
        "address": "962 Grace Court, Neahkahnie, Virginia, 6242", 
        "latitude": -20.004383000000001, 
        "customField": "Hello, Rivers Navarro! You have 4 unread messages.", 
        "balance": "$3,296.00", 
        "company": "Everest", 
        "id": 0, 
        "isActive": true
    }, 

And if I have such field as "friends", how I can display this array in cell?

Answer 1

Make use of the celltemplate for each cell and then reference the fields you want by using row.entity.<FIELD>…here is an example:

var nameAgeCellTemplate = '<div class="ngCellText" ng-class="col.colIndex()">{{row.entity.name}} ({{row.entity.age}})</div>';
var friendsCellTemplate = '<div class="ngCellText" ng-class="col.colIndex()"><span ng-repeat="friend in row.entity.friends">{{friend.name}}{{$last ? '' : ', '}}</span></div>';

$scope.gridOptions = {
  columnDefs: [
    {
      displayName: 'Name (age)',
      cellTemplate: nameAgeCellTemplate
    },
    {
      displayName: 'Friends',
      cellTemplate: friendsCellTemplate
    }
  ]
};

This would result in a table like this:

+----------------------+--------------------------------------------------+
| Name (age)           | Friends                                          |
+----------------------+--------------------------------------------------+
| Rivers Navarro (36)  | Frazier Jefferson, Polly Estes, Klein Cleveland  |
+----------------------+--------------------------------------------------+