Add html link in anyone of ng-grid

Asked 19/8, 2013 at 9:2 Answered 4/12, 2017 at 14:8

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

Flamen answered 19/8, 2013 at 9:2 Comment(0)

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.

Malposition answered 19/8, 2013 at 16:36 Comment(6)

I love the last one ! – Scurvy 9/5, 2014 at 15:24

Yes, using a separate HTML file for your template keeps your JavaScript less cluttered and you can avoid the frustration of escaping quotes...definitely my preferred method, too. – Malposition 9/5, 2014 at 18:51

To use with the upgraded angular UI grid, I was required to remove the div tags. My cell template then looked like this: '<a href="{{row.getProperty(col.field)}}">Visible text</a>'. – Autunite 21/12, 2014 at 1:44

Just keep in mind that using separate html files for each template may increase the latency time, because every template is additional request which leads to decrease in the performance. I also prefer keeping templates separated from the javascript, but not when the performance is reduced because of that. Now for the one liners templates I use a helper. – Buddie 10/2, 2015 at 16:30

From your answer "and you only need to store the URL as href in myData to work with this solution" - could you please elaborate? I have a html template that the grid is not able to pickup for some reason and trying to figure out who to provide the path to the template. – Prevaricate 24/2, 2015 at 20:58

@Prevaricate Because I defined the linkCellTemplate to include the anchor tag, $scope.myData can include href: "http://www.google.com" rather than href: "<a href='http://www.google.com'>Google</a>" – Malposition 25/2, 2015 at 12:26

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.

Headland answered 7/12, 2014 at 22:11 Comment(1)

Thanks for pointing this out...I added an update to my answer mentioning that COL_FIELD can be used to make the solution work with both ng-grid and ui-grid – Malposition 16/3, 2015 at 19:24

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

Spiegeleisen answered 10/3, 2015 at 8:25 Comment(0)

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

Lesseps answered 27/2, 2016 at 12:50 Comment(0)

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)

Geese answered 4/12, 2017 at 14:8 Comment(0)

Recommended topics

Hot tags