Angular JS: How to use icons in the ng-grid grouping columns?

Question

Is there any way to display icons instead of text in the ng-grid grouping columns?

UPDATE 04-14-2015

I did it! Was making an example in Plunker, but i could do what i wanted. Thank you all.

$scope.gridOptions = {
    ...
    aggregateTemplate: aggregateRowTemplate()
};


function aggregateRowTemplate() {
    var result =
        "<div ng-click=\"row.toggleExpand()\" ng-style=\"rowStyle(row)\" class=\"ngAggregate\">" +
        "    <img ng-src='{{row.label}}' lazy-src >" +
        "    <div class=\"{{row.aggClass()}}\"></div>" +
        "</div>"

    return result;
}

Plunker: http://plnkr.co/edit/OxvCVgmJGzgsNL1eOV1d?p=preview

Answer 1

Use columnDefs, as stated in the docs, cellTemplate allows you to give an HTML string for what to display within a the column cells.

An example using bootstrap glyphicons:

$scope.gridOptions = { 
    data: [{name: "line 1", icon: "plus"},
           {name: "line 2", icon: "trash"}
    }],
    columnDefs: [
        {field: 'name', displayName: 'Name'},
        {
            field:'icon',
            displayName:'icon',
            cellTemplate: '<div><i class="ngCellText" ng-class="glyphicon glyphicon-{{ row.getProperty(col.field) }}"></i></div>'
        }
    ]
 };