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!

Organize

You might be able to also just set a maximum width on your table cells to force the text to go to the next line – Brashear

I have the columns as resizable. When I shrink them, the column text starts to appear as aaaaaaa bbb..... so intead of wrapping to next line, it starts to disappear with trailing dots...... – Organize

That is similar : #24242010 – Congou

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+).

Ale

Hi Lort, see my updated question above. Wanted to put the code in comment, but seems it has its limitations on formatting and length of comment. I tried mixing up your suggestion with the way angular team is suggesting on using templates. The column headers to blank. Can you please read my updated question and reply back. Thanks aton for this help you are extending. – Organize

Just found out that using ng-bind-html-unsafe="col.displayName" is working as expected !!!! Parsing the <br> tags, so thats good. Thanks ! – Organize

I've updated my answer slightly so it fits your needs better. It's important if you plan to upgrade Angular release you're using in near future. – Ale

I'll note that if you're using 1.2+ it appears you're supposed to use $sce.trustAsHtml() (as lort notes) but INSTEAD OF ng-bind-html-unsafe (and not in addition to) – Balk

For those using <1.2 I have a Working Example over on Plunker. I did have to use the ng-bind-html-unsafe to get it to work correctly. – Ol

@Ol Plnkr not found, can you please again provide working example? – Chalkboard

Had the same problem. Overriding the template and using ng-bind-html gave me an empty column name but got no errors or anything. Then I realized that I forgot to add 'ngSanitize' to my module. After adding ngSanitize, it worked perfectly. – Enclitic