Angular-UI grid: adding a custom field to columnDefs and accessing it from the header template

Question

I want to add some kind of custom field to columnDefs and want to access it from the header template. For example, I want the let say showFile field

$scope.gridOptions.columnDefs = [ { name: 'ServiceID', displayName: 'Service', showFile: some data }] 

and want to access the showFile header template inside ...

 <div class="ui-grid-top-panel" style="text-align: center"> {{ want to access 'showFile' }} </div> 

What is the best way to do this. Since I tried this using a custom method like

 <div class="ui-grid-top-panel" style="text-align: center"> {{grid.appScope.letter()}} </div> 

(plnkr link http://plnkr.co/edit/ZW43LsiLY7GdnX6XEOgG?p=preview , http://plnkr.co/edit/3E8HTz4Z2daGqRh1WHtx?p=preview ), but the function (grid.appScope.letter ()) is called endlessly time. I raised a question, but received no answer. https://github.com/angular-ui/ui-grid/issues/4250 , https://github.com/angular-ui/ui-grid/issues/4314 . Someone can suggest the best possible way to achieve the above task.

Answer 1

Try using renderIndex . This will give you the column index.

 {{grid.appScope.gridOptions.columnDefs[renderIndex].customField}} 

Answer 2

To access showFile, you tried ...

 {{grid.appScope.gridOptions.columnDefs[0].showFile}} 

Answer 3

I edited plnkr: http://plnkr.co/edit/kdU59pZYQT0B76vYBQC8?p=preview .

I'm not sure if this is what you want to do, I used headerCellTemplate in the columnDefs object instead of headerTemplate, then you get access: {{col.colDef.showFile}}

 columnDefs: [{ field: 'name', displayName: 'First Name', width: 90 }, { field: 'title', displayName: 'Last Name', width: 80 }, { field: 'test', displayName: 'test', width: 80, showFile: 'FILE', headerCellTemplate: '<div ng-class="{ \'sortable\': sortable }">' + '<div class="ui-grid-cell-contents" col-index="renderIndex" title="TOOLTIP">' + '<span>{{ col.displayName CUSTOM_FILTERS }}</span><br /><span>{{col.colDef.showFile}}</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>' }