Show breakline in uigrid

Question

I'm using uigrid like below:

columnDefs: [                            
           { name: 'CA', field: 'CA', displayName: 'CA', enableCellEdit: false }
]

the CA column has data like below :

<div> name : Jon ><br /> Job : Barber </div>

even that i have <br /> i got a result as it is , without a break line.

Any solution ? to show the result like :

name : Jon
Job : Barber

Tim Harker · Accepted Answer · 2017-03-28T15:05:57.327

I believe this might be close to what you want, user2848242.

JavaScript/AngularJS Controller:

var app = angular.module('app', ['ui.grid', 'ngSanitize']);
app.controller('MainCtrl', ['$scope', '$http', function($scope, $http) {
  $scope.gridOptions = {
    rowHeight: 40,
    enableRowHeaderSelection: false,
    columnDefs: [{
      name: 'CA1',
      field: 'CA',
      displayName: 'Original CA',
      enableCellEdit: false,
      cellTemplate: '<span ng-bind-html="row.entity[col.field]"></span>'
    }, {
      name: 'CA2',
      field: 'Name',
      displayName: 'Alternative CA',
      enableCellEdit: false,
      cellTemplate: '<div>Name: {{row.entity[col.field]}}<br />Job: {{row.entity["Job"]}}</div>'
    }]
  }
  $http.get('data.json')
    .then(function(response) {
      $scope.gridOptions.data = response.data;
    });
}]);

The basic idea is, add a cellTemplate to your columnDefs. The tricky part is, since HTML is in your data you need to use ngSanitize to "trust" the HTML so it'll appear as HTML. Since it's best to separate HTML from data, for many reasons, I provided an alternative - hence Original CA and Alternative CA columns.

Here's a working Plunker, http://plnkr.co/edit/pkoARFr11Q7TmbBIegIT?p=preview.

Hope that helps, let me know if you have any other questions.

Show breakline in uigrid

1 Answers1