CODEWITHSUNDEEP
htmlangularjsangular-ui-grid
VivekDev
VivekDev

Reputation: 25553

AngularJs UI-Grid celltemplate calls a function to return HTML as text

When I have cellTemplate as the following, 

{ field: 'Trial', cellTemplate: '<div class="ui-grid-cell-contents" title="TOOLTIP">{{grid.appScope.getAnchorLink(row)}}</div>' }

what I get is <a data-ng-href="localhost:50849/PatientCategory/Edit/1">Edit</a> in the column. But what I want is simply an anchor link with Edit text.

The getAnchorLink function is as follows

        $scope.getAnchorLink = function (rowObj) {
            var tempId = rowObj.entity.Id.toString();
            return '<a data-ng-href="localhost:50849/PatientCategory/Edit/' + tempId + '">Edit</a>'
        };

Can someone please correct me where I am wrong?

Upvotes: 2

Views: 4142

Answers (1)

SakthiSureshAnand
SakthiSureshAnand

Reputation: 1362

If you want to show anchor tag in ui-grid below is an example code,

app.js

var app = angular.module('app', ['ui.grid', 'ui.grid.cellNav','ui.grid.pinning']);
app.controller('MainCtrl', ['$scope', '$http', '$log',
function($scope, $http, $log) {
$scope.gridOptions = {
  columnDefs: [{
    'field': 'code'
  }, {
    'field': 'name'
  }, {
    'field': 'status'
  },{
    'field':'link',
    'cellTemplate':'celltemplate.html'
  }]
};

$scope.gridOptions.data = [{
  "code": "Cox",
  "name": "Carney",
  "status": 0
}, {
  "code": "Lorraine",
  "name": "Wise",
  "status": 1
}, {
  "code": "Nancy",
  "name": "Waters",
  "status": 2
  }];
}
]);

celltempalte.html

<div>
<a href="test.html?code={{row.entity.code}}&name={{row.entity.name}}&status={{row.entity.status}}">
Click me
</a>
</div>

index.html

<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div ng-controller="MainCtrl">
<div ui-grid="gridOptions" ui-grid-cellNav></div>
</div>
<script src="app.js"></script>
</body>
</html>

main.css

.grid {
width: 500px;
height: 400px;
}

Upvotes: 2

Related Questions