dustyjuicebox dustyjuicebox - 1 year ago 296
AngularJS Question

Read the sum value from the column footer in UI - Grid?

I'm currently trying to read my column footer to make sure that the total sum from the aggregate is exactly 100. However I can not find a way to get that value from the grid functions. Maybe I missed a function in the docs. Is there a way to accomplish this or will I have to manually loop through my grid and sum the values?

Answer Source

You can use aggregates on the column footer to automatically show the sum of all the values in the column.

you can have your grid config like below

$scope.gridOptions = {
    showGridFooter: true,
    showColumnFooter: true,
    enableFiltering: true,
    columnDefs: [
        { field: 'name', width: '13%' },
        { field: 'address.street',aggregationType: uiGridConstants.aggregationTypes.sum, width: '13%' },
        { field: 'age', aggregationType: uiGridConstants.aggregationTypes.avg, aggregationHideLabel: true, width: '13%' },
        { name: 'ageMin', field: 'age', aggregationType: uiGridConstants.aggregationTypes.min, width: '13%', displayName: 'Age for min' },
        { name: 'ageMax', field: 'age', aggregationType: uiGridConstants.aggregationTypes.max, width: '13%', displayName: 'Age for max' },
        { name: 'customCellTemplate', field: 'age', width: '14%', footerCellTemplate: '<div class="ui-grid-cell-contents" style="background-color: Red;color: White">custom template</div>' },
        { name: 'registered', field: 'registered', width: '20%', cellFilter: 'date', footerCellFilter: 'date', aggregationType: uiGridConstants.aggregationTypes.max }
    data: data,
    onRegisterApi: function(gridApi) {
            $scope.gridApi = gridApi;


To get the value from the footer, provided you know the column index and have a reference to the gridApi.

$scope.getFooterValue = function()
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download