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

This worked for me with ui-grid 4.0.7 and angular 1.6.6, my properties are easily accessible in row.entity:

cellTemplate: '<div class="ngCellText">
                  <a href="Users/{{row.entity.userId}}">{{row.entity.name}}</a>
               </div>'

(added line breaks for clarity, remove when pasting)

Answer 2

To get property of the object in a row, one can just use row.entity.propertyName

Answer 3

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: '<div class="ngCellText" ng-class="col.colIndex()"><a href="{{row.getProperty(col.field)}}">Visible text</a></div>'
}

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

var linkCellTemplate = '<div class="ngCellText" ng-class="col.colIndex()">' +
                       '  <a href="{{row.getProperty(col.field)}}">Visible text</a>' +
                       '</div>';

{
  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.

Answer 4

The answer that Kabb5 gave is correct, but it appears that for newer versions of ui-grid, it does not work. Everything regarding the cellTemplate is valid, however, instead of

row.getProperty(col.field)

You need to do:

COL_FIELD

This was the only way I was able to get this to work.

Answer 5

Right.

Levi's {{COL_FIELD}} works with angular-ui-grid 3.0.0-rc.20.

$scope.gridOptions.columnDefs = [
            { name: 'firstname' },
            { name: 'lastname'},
            { name: 'email', displayName: 'Email', allowCellFocus : false },
            {
              field: 'viewUrl',
              displayName: 'View',
              enableCellEdit: false,
              cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><a ng-href="{{COL_FIELD}}" class="glyphicon glyphicon-eye-open green"></a></div>'
            },
            {
              field: 'editUrl',
              displayName: 'Edit',
              enableCellEdit: false,
              cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><a ng-href="{{COL_FIELD}}" class="glyphicon glyphicon-pencil blue"></a></div>'
            },
            {
              field: 'id',
              displayName: 'Delete',
              enableCellEdit: false,
              cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><a ng-click="grid.appScope.deleteUser(COL_FIELD)" class="glyphicon glyphicon-remove red"></a></div>'
            }
        ];

$scope.deleteUser = function(userId) {
            alert('Delete '+userId);
          };