How to get angular ui grid footerTemplate to work?

Question

Angular UI-Grid has a property called footerTemplate, which is supposed to offer the possibility to create a custom footer template. I tried entering html content (a div with some text) in a string, I've also tried adding a .html file name in the string and even the ID of a rendered div, but none of them seem to work. It also wasn't clear for me if I need to enable showGridFooter for this or not, so I tried both, but the footerTemplate is either not shown at all, or if I set showGridFooter to true, it shows the default footer (total lines in the grid). What am I missing here?

Cataplasm

Answer 1

For angular-ui-grid 3.0.x it's working with the following example options:

$scope.options = {
                   showGridFooter: true,
                   gridFooterTemplate: '<div>pink floyd</div>'
};

For the 2.x ng-grid versions, Mokgra's version is good.

Janessa

Answer 2

Try enclosing the footer template inside div tag like

 $scope.gridOptions = {
            showGridFooter: true,
            gridFooterTemplate: "<div>Message Here</div>"
    }

if you want to show any scope variable

$scope.SomeScopeVariable = "Message Here";

$scope.gridOptions = {
        showGridFooter: true,
        gridFooterTemplate: "<div>Grid Footer: {{grid.appScope.SomeScopeVariable}}</div>"
}

grid.appScope allows access to scope variables in templates. tested with angular-ui-grid 3.0.x

Mckellar

Wow, I have been looking for grid.appScope for some time. Randomly stumbled across it here of all places. Man, ui-grid has terrible documentation. – Rinaldo

Answer 3

I updated my version of ui-grid to the "pre-beta" 3.x and now I'm at the same point you are. Using 'showGridFooter' set to true will show total rows info automatically. Specifying a 'footerTemplate' doesn't do anything. I've tried with both 'showGridFooter' and 'showFooter' present and absent. So the following paragraph of my answer only works for the 2.x "stable" version of ui-grid.

Wierdly, showFooter property needed set to true. What worked for me is to add an html file to my project that contained a div full of goodies (like you were thinking). Seems like a bug. showGridFooter property didn't work for me.

$scope.gridOptions1 = {
    showFooter: true,
    footerTemplate:'somePath/footerTemplate.html'
}

Unpeg

Answer 4

http://ui-grid.info/docs/#/tutorial/105_footer

You just simply drop html elements like a div or an anchor tag in the template.

Dumbhead

Answer 5

If you want to see sum of the row values using the code below can be helpfull

{ field: 'age',  footerCellTemplate: '<div class="ui-grid-cell-contents">Total {{col.getAggregationValue()  }}</div>', aggregationType: uiGridConstants.aggregationTypes.sum }

Tass