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!

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 — krilovich, Oct 25 '13 at 13:09
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...... — user2920020, Oct 25 '13 at 13:12
That is similar : http://stackoverflow.com/questions/24241510/wrapping-words-in-the-ng-grids-header — andres, Nov 03 '14 at 21:30

lort · Answer 1 · 2013-10-25T15:07:55.833

3

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

edited Oct 25 '13 at 15:07

answered Oct 25 '13 at 13:40

lort

1,458
12
16

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. – user2920020 Oct 25 '13 at 14:19
Just found out that using ng-bind-html-unsafe="col.displayName" is working as expected !!!! Parsing the
tags, so thats good. Thanks ! – user2920020 Oct 25 '13 at 14:24
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. – lort Oct 25 '13 at 15:09
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) – Rob Dennis Dec 05 '13 at 21:26
For those using <1.2 I have a [Working Example](http://plnkr.co/edit/BIBvo1Gzc1a3oSxxkGdA?p=preview) over on Plunker. I did have to use the `ng-bind-html-unsafe` to get it to work correctly. – CJdriver Jan 17 '14 at 19:24
@CJdriver Plnkr not found, can you please again provide working example? – Sajid Ali May 12 '15 at 10:40
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. – ultddave Sep 24 '15 at 14:44

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

1 Answers1

Linked