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.
-
would be helpful if you attach a plunker of your codeAditya Sethi– Aditya Sethi2014-09-15 13:07:13 +00:00Commented Sep 15, 2014 at 13:07
Add a comment
|
2 Answers
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)
6 Comments
Slartibartfast
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!
Goodzilla
{{row.entity.firstName}} will do the job :)
yuya
<div class="ui-grid-cell-contents"> looks better.
Jenna Leaf
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"!!!
Rohan Jetha
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"
|
A slight variation for dynamic links:
$scope.gridOptions.columnDefs = [
{
name: 'Hyperlink',
cellTemplate:'<div><a ng-href="{{row.entity.hyperlink}}">Click me</a></div>'
}
];
1 Comment
Doug Weems
It worked great except for an extra ] after hyperlink. Thx Marcelo
