ng-grid cellTemplate and grouping: can I change the template for the 'grouping' row

Question

I have been checking out ng-grid, and changed the columnDefs to use a different cellTemplate for certain columns. This template doesn't show the actual value but looks it up in another object, in order to make it more readable for an end-user (basically a foreign key id that is translated to something a human can make sense of).

When I enable showGroupPanel: true in the gridOptions, you can drag one column to the 'grouping' bar, and the results will be grouped.

When I do this with one of the columns for which I edited the template, it doesn't use my cellTemplate, and shows the id again.

Is there a way to make sure that, also in the header of a group, I can use my own template, instead of ng-grid simply showing the values?

[UPDATE] Some code (simplified to 1 column to only show the essence) might make it easier to understand (any code errors are typos, this is no copy-paste of my real code):

HTML:

<div ng-grid="gridOptions" class="gridStyle"></div>

JS:

$scope.gridOptions = { 
    data: 'data', enableSorting: true, showFilter: true, multiSelect: false,
    showGroupPanel: true,
    columnDefs: 'colDefs',
};

$scope.colDefs = [];
$scope.topicid_fkvalues = { 1: "Languages", 2: "Mathematics" };

var colDef1 = { 'field': 'Topic' };
colDef1.cellTemplate = '<label ng-class="\'colt\' + col.index" class="ng-pristine ng-valid colt3" style="width: 90%" >{{topicid_fkvalues[ COL_FIELD ]}} ({{COL_FIELD}})</label>';

$scope.colDefs.push( colDef1 );

$scope.data = [ { topicid: 1 }, { topicid: 2 }, { topicid: 1 } ]

So when I drag this column into the grouping bar, I would like to see the description also in the goup header, instead of only the id...

[UPDATE 2] SOLUTION

I think I found a good solution for this.

It turns out I didn't need a cellTemplate, just a filter.

So, if you define a new filter on your module, something like this:

app.filter( 
    'translateForeignKey', 
    function() {
        return  function( fk, fkValues ) {
                    return fkValues[ fk ];
                }
        ;
    }

);

You could replace this:

var colDef1 = { 'field': 'Topic' };
colDef1.cellTemplate = '<label ng-class="\'colt\' + col.index" class="ng-pristine ng-valid colt3" style="width: 90%" >{{topicid_fkvalues[ COL_FIELD ]}} ({{COL_FIELD}})</label>';

by the following

var colDef1 = { 'field': 'Topic' };
colDef1.cellFilter = 'translateForeignKey: topicid_fkvalues';

which will be adding the filter with as the second argument the $scope.topicid_fkvalues parameter (and this filter will also be used in 'aggregate' view). So if you have different columns with different translations, you could still use the same filter but use multiple scope variables for the translation.

Hope this makes sense, and helps some people out who might have the same question...

Answer 1

SOLUTION

I think I found a good solution for this.

It turns out I didn't need a cellTemplate, just a filter.

So, if you define a new filter on your module, something like this:

app.filter( 
    'translateForeignKey', 
    function() {
        return  function( fk, fkValues ) {
                    return fkValues[ fk ];
                }
        ;
    }

);

You could replace this:

var colDef1 = { 'field': 'Topic' };
colDef1.cellTemplate = '<label ng-class="\'colt\' + col.index" class="ng-pristine ng-valid colt3" style="width: 90%" >{{topicid_fkvalues[ COL_FIELD ]}} ({{COL_FIELD}})</label>';

by the following

var colDef1 = { 'field': 'Topic' };
colDef1.cellFilter = 'translateForeignKey: topicid_fkvalues';

which will be adding the filter with as the second argument the $scope.topicid_fkvalues parameter (and this filter will also be used in 'aggregate' view). So if you have different columns with different translations, you could still use the same filter but use multiple scope variables for the translation.