Custom header template for ui-grid , angular
To obtain what I was trying to achieve I had to specify a headerCellTemplate(Not headerTemplate) within the columnDefs of the grid as given below :
{
field: key, displayName: key
, headerCellTemplate: '<div ng-class="{ \'sortable\': sortable }">' +
'<div class="ui-grid-vertical-bar"> </div>' +
'<div class="ui-grid-cell-contents" col-index="renderIndex">' +
'<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 }">' +
' ' +
'</span>' +
'</div>' +
'<div class="ui-grid-column-menu-button" ng-if="grid.options.enableColumnMenus && !col.isRowHeader && col.colDef.enableColumnMenu !== false" class="ui-grid-column-menu-button" ng-click="toggleMenu($event)">' +
'<i class="ui-grid-icon-angle-down"> </i>' +
'</div>' +
'<div ng-if="filterable" class="ui-grid-filter-container" ng-repeat="colFilter in col.filters">' +
'<input type="text" class="ui-grid-filter-input" ng-model="colFilter.term" ng-attr-placeholder="{{col.displayName || \'\'}}" />' +
'<div class="ui-grid-filter-button" ng-click="colFilter.term = null">' +
'<i class="ui-grid-icon-cancel" ng-show="!!colFilter.term"> </i>' + <!-- use !! because angular interprets 'f' as false -->
'</div>' +
'</div>' +
'</div>'
}
Because for ui-grid , headerCellTemplate is appended inside the headerTemplate .The default headerCellTemplate is provided in the following link
Thank You