Angular UI Grid FooterCellTemplate not working

Question

I have some problems on my custom footer cell template.

As you can see, some of the column footer templates are not showing up, I have identical implementation of footerCellTemplate

This is my ui grid columndef:

{ 
    name: 'TRAN_TYPE', 
    footerCellTemplate: '<div class="ui-grid-cell-contents">Total / Average</div>' 
},
{
    name: "ISSUED", 
    footerCellTemplate: '<div class="ui-grid-cell-contents">{{grid.appScope.Aggregator.AVG_CUST_TIME}}</div>'                
},
{ 
    name: 'SERVED', 
    footerCellTemplate: '<div class="ui-grid-cell-contents" style="background-color: Red;color: White">custom template</div>' 
},
{ 
    name: 'UNPROCESSED', 
    footerCellTemplate: '<div class="ui-grid-cell-contents" style="background-color: Red;color: White">custom template</div>' 
},

Any help would be great. Thanks!

Answer 1

I think put (semicolon) ; end of css attribute in SERVED and UNPROCESSED column

style="background-color: Red;color: White;" 

Answer 2

I've resolved it by refreshing the grid. Thanks for the responses!