How to render html formatted text in ng-grid column header

Question

I have 5 column names in a config file which I read into an array called columns in javascript.

var columns = [];
var columnNames = [];
var columnCount = 5;
$scope.nettingGridOptions = {
        data : 'tableData',
        columnDefs: 'columnNames'
}

Next, I just iterate through the columns array and assign values in columnNames array so that my ng-grid starts showing correct displayName.

for(i=0;i<columnCount;i++)
    {       
        columnNames[i] = { field: i, displayName: columns[i], headerClass : "myPersonalHeaderClass"};
    }

The issue I have is that the column names are too big. I want to split a column name (for example "aaaaaaaa bbbbbbbbbb cccccccc" into three rows and display the column name as

aaaaaaaaa
bbbbbbbbb
ccccccccc

The config file which stores these column names, I have tried to edit that to have a <br> tag whereever I want to split, but
tag is not getting interpreted when the page is rendered and I see the column name as aaaaaaaa<br>bbbbbbbbbb<br>cccccccc

I think I have to use headerCellTemplate, but not really sure what shall I do in there to tell it to render the {{col.displayName}} as HTML.

After seeing the answer given by lort (see 1st answer below) - I have tried something, still not working.

Hello,

Thanks Lort, I was trying to use templates as described on https://github.com/angular-ui/ng-grid/wiki/Templating.

This is what I did (merged your suggestion of using ng-html-bind with the way the above link is suggesting on updating templates).

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" ng-bind-html="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 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>';


    for(i=0;i<columnCount;i++)
    {           
        columnNames[i] = { field: i, displayName: columns[i], headerClass : "myPersonalHeaderClass", headerCellTemplate: myHeaderCellTemplate};
    }

When I do this, the column headers go blank !!!! Help!

Answer 1

If you want to render HTML in column names, you need to change a template headerCellTemplate.html in ngGrid JS file. In order to do that, find following code in that template:

<div ng-click=\"col.sort($event)\" ng-class=\"'colt' + col.index\" class=\"ngHeaderText\">{{col.displayName}}</div>

And change it to:

<div ng-click=\"col.sort($event)\" ng-class=\"'colt' + col.index\" class=\"ngHeaderText\" ng-bind-html=\"col.displayName\"></div>

If you're unhappy about modifying the external lib contents, you can override that template in run() method of your app using $templateCache:

// Assuming you have
// var app = angular.module(...);
// somewhere before following code
app.run(function($templateCache){
    $templateCache.put("headerCellTemplate.html",
    "<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\" ng-bind-html=\"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 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>"
);

Note that I used ng-bind-html which may be insufficient for your needs. If that's the case, try using ng-bind-html-unsafe (in Angular 1.0.8) or read documentation for $sce.trustAsHtml() (Angular 1.2+).