Add html link in anyone of ng-grid

Question

I want to add link to ng-grid. Here is my code for your reference

Answer 1

Update:

It has been noted that this answer does not work with ui-grid. This is understandable since at the time of the answer only ng-grid existed; however, substituting {{COL_FIELD}} in place of {{row.getProperty(col.field)}} allows the solution to be valid for both ng-grid and ui-grid.

I know I used COL_FIELD in these situations around the time I wrote this answer, so I'm not sure of my rationale for answering with the longer row.getProperty(col.field)…but in any event, use COL_FIELD and you should be good to go with ng-grid and ui-grid.

Original (unchanged) Answer:

You just need to define a cell template for the Link field…

You can do this inline:

{
  field: 'href',
  displayName: 'Link',
  enableCellEdit: false,
  cellTemplate: '
Visible text
'
}

Or you can do this by using a variable (to keep your gridOptions a little cleaner:

var linkCellTemplate = '
' +
                       '  Visible text' +
                       '
';

{
  field: 'href',
  displayName: 'Link',
  enableCellEdit: false,
  cellTemplate: linkCellTemplate
}

Or you could even put your template in an external HTML file and point to the URL:

{
  field: 'href',
  displayName: 'Link',
  enableCellEdit: false,
  cellTemplate: 'linkCellTemplate.html'
}

…and you only need to store the URL as href in myData to work with this solution :)

Look here for an example of a cell template.