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.

Epiphany

would be helpful if you attach a plunker of your code – Acadian

Answer 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)

Greenman

Thank you Goodzilla, what is the syntax to access the properties of the json? I cannot get getProperty() to work on ui-grid: plnkr.co/edit/stmNTirT6L8INhTAmdxK thank you! – Epiphany

{{row.entity.firstName}} will do the job :) – Greenman

<div class="ui-grid-cell-contents"> looks better. – Autograft

It serves no purpose when you hardcode your "href" like this example! You need to be able to construct your href dynamically from the data in the field that would take you somewhere meaningful not "click me"!!! – Saturniid

What if I want a dynamic value rather than 'Click me' ? Like I have 'company name' returning in the same json , how do I show those names in place of "click me" – Admixture

@RohanJetha This will do the trick: cellTemplate:'<div><a href="http:||stackoverflow.com">{{COL_FIELD}}</a></div>' } – Fylfot

Answer 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

Endymion

It worked great except for an extra ] after hyperlink. Thx Marcelo – Foreworn