How do I add image in a angular ui-grid cell

Question

How do I add image in a angular ui-grid cell.

var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']);

   app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
     $scope.gridOptions = {
       enableSorting: true,
       columnDefs: [
         { field: 'name' },
         { field: 'company'  },
         { field: 'image'}
       ],
       data:[
         {name:"Name1",company:"Company1",image:"http://cdn.flaticon.com/png/256/70689.png"},
         {name:"Name2",company:"Company2",image:"http://cdn.flaticon.com/png/256/70689.png"},]
   };  
 }]);

Kathir · Accepted Answer · 2015-05-15 19:42:38Z

13

You can use a custom cell template to render the image in the cell.

var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']);

app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
  $scope.gridOptions = {
    enableSorting: true,
    rowHeight:100,
    columnDefs: [
      { field: 'name' },
      { field: 'company'  },
      { field: 'image', cellTemplate:"<img width=\"50px\" ng-src=\"{{grid.getCellValue(row, col)}}\" lazy-src>"}
    ],
    data:[
      {name:"Name1",company:"Company1",image:"http://cdn.flaticon.com/png/256/70689.png"},
      {name:"Name2",company:"Company2",image:"http://cdn.flaticon.com/png/256/70689.png"},
      {name:"Name3",company:"Company3",image:"http://cdn.flaticon.com/png/256/70689.png"}
      ]
  };

}]);

Here is a working plnkr.

http://plnkr.co/edit/awQ7B0WmmZhythlCZmgt?p=preview

answered May 15, 2015 at 19:42

Kathir

6,2068 gold badges38 silver badges68 bronze badges

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

2 Comments

Juan Carlos Oropeza Over a year ago

How this line ng-src=\"{{grid.getCellValue(row, col)}}\" give you the picture ? what if you have multiple images fields how you choose one?

Rajendrasinh Parmar Over a year ago

what is the use of lazy-src attribute? is it a custom directive or something in any module?

Collectives™ on Stack Overflow

How do I add image in a angular ui-grid cell

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related