Can you add markup to table cells created using angular ui-grid?

Question

I am considering using ng-grid for a new angular application. The grid that we are creating requires html markup in each individual cell.

A very simplified example is in this plunkr. The ui-grid widget has some cells that want to use the <strong> and <em> tags. However, the markup is displayed as a string, not as DOM.

So, this is what I have:

HTML:

<body ng-app="mygrid">
  <div ng-controller="GridCtrl">
    <div ui-grid="{ data: myData }"></div>
  </div>
</body>

JS:

angular.module('mygrid', ['ui.grid'])
  .controller('GridCtrl', function($scope) {
    $scope.name = 'Andrew';
    $scope.data = [{
      first: '<em>Andrew</em>',
      last: '<strong>Eisenberg</strong>'
    }];
  });

I would like this to be displayed as DOM, instead of text. How can I do this?

Ian A · Accepted Answer · 2015-12-07 12:54:47Z

1

Assuming you have control over your data (i.e. you can change your data from:

$scope.data = [{
  first: '<em>Andrew</em>',
  last: '<strong>Eisenberg</strong>'
}];

to:

$scope.data = [{
  first: 'Andrew',
  last: 'Eisenberg'
}];

you can define columnDefs with cellTemplates (that contain the HTML template) as follows:

$scope.gridOptions = {
   columnDefs: [
     { 
       field: 'first',
       cellTemplate: '<em>{{COL_FIELD}}</em>'
     },
     { 
       field: 'last',
       cellTemplate: '<strong>{{COL_FIELD}}</strong>'
     },
   ],

See here for an example when using ui-grid. If you happen to be using an ng-grid you can do something similar, but instead of COL_FIELD use row.getProperty(col.field). See here for an ng-grid example.

Edit: If you have no control over the data and it must contain HTML

If you haven't got control of your data (i.e. your data must contain the markup) e.g:

$scope.data = [{
  first: '<em>Andrew</em>',
  last: '<strong>Eisenberg</strong>'
}];

then you can do as follows. Create a cell template that can render HTML:

<script type="text/ng-template" id="emailTemplate">
    <div class="ngCellText" ng-class="col.colIndex()"><span ng-bind-html="COL_FIELD"></span></div>
</script>

Define columnDefs that reference the template as follows:

$scope.gridOptions = {
  columnDefs: [
    { 
      field: 'first',
      cellTemplate: 'htmlTemplate'
    },
    { 
      field: 'last',
      cellTemplate: 'htmlTemplate'
    },
  ],

Note: You'll need to include the ngSanitize library to render and sanitize the HTML:

var app = angular.module('app', ['ngSanitize', 'ui.grid']);

See here for a demo.

edited Dec 7, 2015 at 12:54

answered Dec 7, 2015 at 8:52

Ian A

6,2382 gold badges24 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Andrew Eisenberg Over a year ago

This is great. I do have complete control over the data. I was including html in the strings just to show what I wanted to do, but failed. It looks like this will work. I've decided to go with another option, though. github.com/daniel-nagy/md-data-table

Collectives™ on Stack Overflow

Can you add markup to table cells created using angular ui-grid?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related