Add a property to ng-grid column - angularjs

Question

Using ng-grid, I'd like to add my own tooltip, using a header cell template. To do so I'd like to create a column property called "tooltip" for instance. Tried that and it doesn't show up in the col properties. What do you think about giving us that functionality. Otherwise I create a new template in each case?
See plunkr: http://plnkr.co/edit/lSf4XK?p=preview
Ideally, the gridOptions would contain columnDefs like this:
columnDefs: [
{field: 'complex.name', displayName: 'Name', headerCellTemplate:'header_template2.html'},
{field:'complex.active',
dimension1: "Testing",
displayName: 'In Progress',
headerCellTemplate:'header_template.html',
cellTemplate : 'checkBoxTemplate.html'}]
and that dimension1 property would be accessible in the template like so:
<div tooltip="{{col.dimension1}}">{{col.displayName}}</div>

Answer 1

Built a solution - more of a workaround - here:
http://plnkr.co/edit/0PMmrw?p=preview
Here's an excerpt. I make displayName an object instead of a string:
columnDefs: [
{field: 'complex.name', displayName: 'Name'},
{field:'complex.active',
cellClass: 'overflow-visible',
displayName: {name:'In Progress', tooltip:'Testing'},
headerCellTemplate:'header_template.html',
cellTemplate : 'checkBoxTemplate.html'}]
And then refer to it in the cell template like so:
<div ng-click="col.sort($event)" ng-class="'colt' + col.index" class="ngHeaderText" tooltip="{{col.displayName.tooltip}}">{{col.displayName.name}}</div>
Edit
The problem with this is that it will throw errors because the implementation of ng-grid expects displayName to be a string (at least in v2.0.7); it calls col.displayName.toLowerCase().

Answer 2

You can use cellClass/headerClass properties in my case i am not using cellClass for my columns so i used cellClass. I wanted attribute "help-id" on my each column header.
In your column definition:
{field: 'id.value', displayName: $scope.CONFIGVLANSlabels.tbl_vlans_id, enableCellEdit: true, editableCellTemplate: idEditCellTemplate, headerCellTemplate: myHeaderCellTemplate, cellClass:'tbl_vlans_id'}
In your header template
var myHeaderCellTemplate = '<div class="ngHeaderSortColumn {{col.headerClass}}" ng-style="{cursor: col.cursor}" ng-class="{ ngSorted: !noSortVisible }">'+
'<div ng-click="col.sort($event)" ng-class="\'colt\' + col.index" class="ngHeaderText" help-id="{{col.cellClass}}">{{col.displayName}}</div>'+
'<div class="ngSortButtonDown" ng-show="col.showSortButtonDown()"></div>'+
'<div class="ngSortButtonUp" ng-show="col.showSortButtonUp()"></div>'+
'<div class="ngSortPriority">{{col.sortPriority}}</div>'+
'</div>'+
'<div ng-show="col.resizable" class="ngHeaderGrip" ng-click="col.gripClick($event)" ng-mousedown="col.gripOnMouseDown($event)"></div>';
Hope this will help some one.

Answer 3

(Cannot add a comment to the accepted answer due to rep score, so I'm adding it here)
An easy solution to get around the script errors of the accepted answer, a simple JavaScript object can be created to support the toLowerCase() call using in ng-grid:
function DisplayObject(name, tooltip) {
// this refers to the new instance
this.name = name;
this.tooltip = tooltip;
// you can also call methods
this.toLowerCase = function() {
return this.name.toLowerCase();
}
}
And then use it like this:
columnDefs: [
{field: 'complex.name', displayName: 'Name'},
{field:'complex.active',
cellClass: 'overflow-visible',
displayName: new DisplayObject('In Progress','Testing'),
headerCellTemplate:'header_template.html',
cellTemplate : 'checkBoxTemplate.html'}]
ng-grid will then no longer complain about the toLowerCase(), and the name will be added to the ng-grid fieldMap.

Answer 4

I'm using bootstrap 3.0, ui-bootstrap 0.10, nggrid 2.0.11, in order to make it works I define a header column template like the answer template, the difference is to use a tooltip-append-to-body="true" attribute for the tooltip. The cellClass: 'overflow-visible' in the column def is not neccesary.
<div class="ngHeaderSortColumn {{col.headerClass}}" ng-style="{'cursor': col.cursor}" ng-class="{ 'ngSorted': !noSortVisible }">
<div ng-click="col.sort($event)" ng-class="'colt' + col.index" class="ngHeaderText" tooltip-append-to-body="true" tooltip="{{col.displayName.tooltip}}">{{col.displayName.name}}</div>
<div class="ngSortButtonDown" ng-show="col.showSortButtonDown()"></div>
<div class="ngSortButtonUp" ng-show="col.showSortButtonUp()"></div>
<div class="ngSortPriority">{{col.sortPriority}}</div>
<div ng-class="{ ngPinnedIcon: col.pinned, ngUnPinnedIcon: !col.pinned }" ng-click="togglePin(col)" ng-show="col.pinnable"></div>
</div>
<div ng-show="col.resizable" class="ngHeaderGrip" ng-click="col.gripClick($event)" ng-mousedown="col.gripOnMouseDown($event)"></div>