AngularJS: ui grid shows multiple lines in a cell

Question

I am trying to display multiple phone numbers in one cell. I want to show each number in a new line. I tried several ways, but I can not understand. Can someone help with this. Below is a link to my plnkr.

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

.filter('phoneListFilter', function () {
    return function (telePhoneList) {
        var telePhoneArray = [];

        for (var i in telePhoneList) {
                telePhoneArray.push(telePhoneList[i]);
        }
        return telePhoneArray.join('<br>');
    };
})

Answer 1

You can achieve this by installing your own template and repeat the number of phone numbers that you have.

app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
  $scope.gridOptions = {
    rowHeight:50,
    columnDefs: [
      { field: 'name' },
      { field: 'phoneList', name: 'Phone Numbers', cellTemplate:'<div ng-repeat="item in row.entity[col.field]">{{item}}</div>'}
    ],
     enableColumnResizing: true
  };

  $http.get('data.json')
  .success(function (data) {
    $scope.gridOptions.data = data;
  });
}]);

Height can be a problem. Take a look at this plnkr http://plnkr.co/edit/c65CZm19bGJbWfZT15u6?p=preview