Adding a Total Row to Footer In ng-grid

angularjs ng-grid
Phil Sandler picture Phil Sandler · Oct 17, 2013 · Viewed 12.2k times · Source

I can't seem to find documentation on how I might accomplish this.

I'd like to add totals to the bottom of my grid, in the footer area (i.e. not a standard row that scrolls). Since I am using paging, the totals will need to come from the server--I need the total of all rows, not just displayed rows.

Is this possible?

Answer

Davin Tryon picture Davin Tryon · Oct 17, 2013

Yes, you should be able to do this using the footerTemplate. To enable the footer set the showFooter grid option to true. You can replace the footer template by using the grid option footerTemplate.

The footer sites at the bottom of the grid and does not scroll. Since the footer template sits outside the grid, you will have to replace the default template with your own and align the columns.

Inside your custom footer template, you can call into your controller scope, therefore, retrieving any server-side totals values.

Here is a very simple plunker: http://plnkr.co/edit/31flwE?p=preview

Hope this helps.

Related questions

Best way to represent a Grid or Table in AngularJS with Bootstrap 3?

I am creating an App with AngularJS and Bootstrap 3. I want to show a table/grid with thousands of rows. What is the best available control for AngularJS & Bootstrap with features like Sorting, Searching, Pagination etc.

Read More
ng-options with simple array init

I'm a little bit confused with Angular and ng-options. I have a simple array and I want to init a select with it. But, I want that options value = label. script.js $scope.options = ['var1', 'var2', 'var3']; …

Read More
How to hide column in ng grid

here is my code: index.html <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> <link rel="stylesheet" type="text/css" href="http://…

Read More