AngularJS ui-grid render hyperlink

Question

I'm using Angular ui-grid 2.0.12, is it possible to add a hyperlink inside a given cell, or for that matter any type of html code? I've been trying to follow this tip: Add html link in anyone of ng-grid though it doesn't seem to work on ui-grid, probably because ng-grid used to behave differently or because the syntax is different now.

Solution 1

Actually, cellTemplate works just the same in ui-grid as it did in ng-grid.

$scope.gridOptions.columnDefs = [
     { name: 'firstName' },
     { name: 'lastName'},
     { name: 'Hyperlink',
         cellTemplate:'<div>' +
                   '<a href="http://stackoverflow.com">Click me</a>' +
                   '</div>' }
];

Working demo (open the links in a new tab, because plunker can't handle the awesomeness of SO)

Solution 2

A slight variation for dynamic links:

$scope.gridOptions.columnDefs = [
   { 
     name: 'Hyperlink',
     cellTemplate:'<div><a ng-href="{{row.entity.hyperlink}}">Click me</a></div>'
   }
];

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