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

Question

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?

SakthiSureshAnand · Accepted Answer · 2015-10-19 05:16:12Z

2

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;
}

answered Oct 19, 2015 at 5:16

SakthiSureshAnand

1,3621 gold badge20 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

VivekDev Over a year ago

Ok, I shall give it a try, but where do I keep the celltempalte.html. In a file? or where? Could you please tell that as well. I am new to AngularJs and ui grid

SakthiSureshAnand Over a year ago

If you want to create celltemplate.html inside a same controller could you please try this way Eg :

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

SakthiSureshAnand Over a year ago

But you could change in your gridOptions like this cellTemplate:linkCellTemplate point out the var linkCellTemplate (Variable name) .also please bear with my english

VivekDev Over a year ago

ok, I shall try this out in the evening, and then accept the answer.

SakthiSureshAnand Over a year ago

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

|

Collectives™ on Stack Overflow

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

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related