how to add image as a header in angular ui grid?

Question

I would like to add image in the header, not in the rows.

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: '<THIS NEEDS TO BE IMAGE>' displayName: 'Timer'}
   ],
   data:[
     {name:"Name1",company:"Company1",Timer:"10"},
     {name:"Name2",company:"Company2",Timer:"11"},]
};  
}]);

Can you include your template to show what you have tried?

Tristan
– Tristan

2015-11-12 22:44:17 +00:00
Commented Nov 12, 2015 at 22:44 — Tristan
– Tristan, Commented Nov 12, 2015 at 22:44

WadeB · Accepted Answer · 2015-11-12 22:44:41Z

0

I don't have a specific example to paste in but I would assume that you could override the default headerCellTemplate. I have used cellTemplate with an image but not headerCellTemplate. Given all the other features that can show up in the header, you may have to find the default headerCellTemplate then add your image.

answered Nov 12, 2015 at 22:44

WadeB

639 bronze badges

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

Comments

CMR · Accepted Answer · 2015-11-13 12:09:36Z

Like @WadeB mentioned, you have to use a headerCellTemplate for that specific column.

I created a Plunkr showcasing a possible setup.

You need to add the headerCellTemplate to your columnDef:

{ field: 'company', headerCellTemplate: myHeader}

and create your own template by creating a local variable:

var myHeader = "<div ng-class=\"{ 'sortable': sortable }\"><!-- <div class=\"ui-grid-vertical-bar\">&nbsp;</div> --><div class=\"ui-grid-cell-contents\" col-index=\"renderIndex\" title=\"TOOLTIP\"><span>{{ col.displayName CUSTOM_FILTERS }}</span> <span ui-grid-visible=\"col.sort.direction\" ng-class=\"{ 'ui-grid-icon-up-dir': col.sort.direction == asc, 'ui-grid-icon-down-dir': col.sort.direction == desc, 'ui-grid-icon-blank': !col.sort.direction }\">&nbsp;</span></div><div class=\"ui-grid-column-menu-button\" ng-if=\"grid.options.enableColumnMenus && !col.isRowHeader  && col.colDef.enableColumnMenu !== false\" ng-click=\"toggleMenu($event)\" ng-class=\"{'ui-grid-column-menu-button-last-col': isLastCol}\"><i class=\"ui-grid-icon-angle-down\">&nbsp;</i></div><div ui-grid-filter></div></div>"

Thats a bit messy to understand, the important part is:

{{ col.displayName CUSTOM_FILTERS }}

Replace that part with anything you'd like, for example a picture like shown in the Plunkr

var myHeader = "<div ng-class=\"{ 'sortable': sortable }\"><!-- <div class=\"ui-grid-vertical-bar\">&nbsp;</div> --><div class=\"ui-grid-cell-contents\" col-index=\"renderIndex\" title=\"TOOLTIP\"><span><img src=\"https://angularjs.org/img/AngularJS-large.png\" alt=\"Mountain View\" style=\"width:100px;height:30px;\"></span> <span ui-grid-visible=\"col.sort.direction\" ng-class=\"{ 'ui-grid-icon-up-dir': col.sort.direction == asc, 'ui-grid-icon-down-dir': col.sort.direction == desc, 'ui-grid-icon-blank': !col.sort.direction }\">&nbsp;</span></div><div class=\"ui-grid-column-menu-button\" ng-if=\"grid.options.enableColumnMenus && !col.isRowHeader  && col.colDef.enableColumnMenu !== false\" ng-click=\"toggleMenu($event)\" ng-class=\"{'ui-grid-column-menu-button-last-col': isLastCol}\"><i class=\"ui-grid-icon-angle-down\">&nbsp;</i></div><div ui-grid-filter></div></div>";

You could also override the template globally:

$templateCache.put('ui-grid/uiGridHeaderCell',
    '<div>my-own-html</div>'
);

Collectives™ on Stack Overflow

how to add image as a header in angular ui grid?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related