How to get angular ui grid footerTemplate to work?

Question

Angular UI-Grid has a footerTemplate property, which should offer the ability to create a custom footer template. I tried to inject the html content (div with some text) into the string, I also tried to add the .html file name to the string and even the id of the processed div, but none of them work. It was also not clear to me whether I need to enable showGridFooter for this or not, so I tried both, but footerTemplate either does not appear at all, or if showGridFooter is set to true, then the default footer is displayed (common lines in the grid). What am I missing here?

Answer 1

For angular -ui-grid 3.0.x, it works with the following examples:

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

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

Answer 2

Try to include a footer template inside the div tag, e.g.

  $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 you to access scope variables in templates. verified using angular -ui-grid 3.0.x

Answer 3

I upgraded my version of ui-grid to "pre-beta" 3.x, and now I'm at the same point as you. With 'showGridFooter' set to true, full row information will be displayed automatically. Specifying "footerTemplate" does nothing. I tried both "showGridFooter" and "showFooter" and was missing. Thus, the following paragraph of my answer only works for the “stable” version of the 2.x ui-grid.

Surely, the showFooter property must be set to true. What worked for me was to add an html file to my project, which contains a div full of goodies (as you thought). Sounds like a mistake. The showGridFooter property does not work for me.

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

Answer 4

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

You just simply drop the html elements such as div or anchor tag in the template.

Answer 5

If you want to see the sum of the row values ​​using the code below, it may be useful

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