Add html link in anyone of ng-grid

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

<html ng-app="myApp">  
<head lang="en">
    <meta charset="utf-8">
    <title>Getting Started With ngGrid Example</title>  
    <link href="../../Content/ng-grid.css" rel="stylesheet" type="text/css" />
    <script src="../../Scripts/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery-ui-1.8.20.js" type="text/javascript"></script>
    <script src="../../Scripts/angular.js" type="text/javascript"></script>
    <script src="../../Scripts/ng-grid.js" type="text/javascript"></script>
    <script src="../../Scripts/main.js" type="text/javascript"></script>
    <script type="text/javascript">
        var app = angular.module('myApp', ['ngGrid']);
        app.controller('MyCtrl', function ($scope) {
            $scope.myData = [{ name: "RK.PRABAKAR", age: 25, href: "<a href='#'>Link1</a>" },
                 { name: "Yoga", age: 27, href: "<a href='#'>Link1</a>" },
                 { name: "James", age: 27, href: "<a href='#'>Link1</a>" },
                 { name: "Siva", age: 35, href: "<a href='#'>Link1</a>" },
                 { name: "KK", age: 27, href: "<a href='#'>Link1</a>"}];

            $scope.pagingOptions = {
                pageSizes: [2, 4, 6],
                pageSize: 2,
                currentPage: 1
            };

            $scope.gridOptions = {
                data: 'myData',
                enablePaging: true,
                showFooter: true,
                enableCellSelection: true,
                enableRowSelection: false,
                enablePinning: true,
                pagingOptions: $scope.pagingOptions,
                enableCellEdit: true,
                columnDefs: [{ field: 'name', displayName: 'Name', enableCellEdit: true },
                 { field: 'age', displayName: 'Age', enableCellEdit: true },
                 { field: 'href', displayName: 'Link', enableCellEdit: false }]
            };
        });
    </script>
    <style>
    .gridStyle {
border: 1px solid rgb(212,212,212);
width: 500px; 
height: 300px;
}
    </style>
</head>
<body data-ng-controller="MyCtrl">
    <div class="gridStyle" data-ng-grid="gridOptions"></div>
</body>

Right now data grid is working fine except href link in grid. Link is not rendered to html tag it is displayed as normal string. I want to add link to ng-grid from myData

Solution

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.