app.js

var module = angular.module("example", ["angularGrid"]);

module.controller("exampleCtrl", function($scope, $filter) {
    $scope.pending_view = true;
    $scope.orderOptions = ['applicant', '-categoryOrder'];
    $scope.orderOption = "['applicant']";
    $scope.nextOrder = function(stat) {
        console.log(stat);
      if(stat === 0){
        $scope.orderOption = ['applicant'];
      } else {
        $scope.orderOption = ['-need_vote', '-has_comment', '-is_stale', '-is_watched', '-disbursement_issue'];
      } // end if
    };

    var columnDefs = [
        {
            displayName: 'Pending',
            field: '',
            width: 140,
            suppressSorting: true,
            templateUrl: './pending.icons.html',
            width: 180,
            headerCellRenderer: pendingHdr
        },
        {
            displayName: 'Name', 
            field: 'name', 
            width: 260,
            cellStyle:  {'background-color': 'rgba(255, 255, 180, 0.5)'} // light yellow background
        },
        {
            displayName: 'Monday', 
            group: 'Weekly Editable Values',  
            field: 'mon', 
            newValueHandler: numberNewValueHandler, 
            editable: true,
            cellClass: 'text-right',
            cellRenderer: function(params) {
                return $filter('number')(params.data.mon, 1);
            },
            cellValueChanged: cellValueChangedFunction
        },
        {
            displayName: 'Tuesday', 
            group: 'Weekly Editable Values', 
            field: 'tue',
            newValueHandler: numberNewValueHandler,
            editable: true,
            cellClass: 'text-right',
            cellRenderer: function(params) {
                return $filter('number')(params.data.tue, 1);
            },
            cellValueChanged: cellValueChangedFunction
        },
        {
            displayName: 'Wednesday', 
            group: 'Weekly Editable Values', 
            field: 'wed', 
            newValueHandler: numberNewValueHandler, 
            editable: true,
            cellClass: 'text-right',
            cellRenderer: function(params) {
                return $filter('number')(params.data.wed, 1);
            },
            cellValueChanged: cellValueChangedFunction
        },
        {
            displayName: 'Thursday', 
            group: 'Weekly Editable Values', 
            field: 'thur', 
            newValueHandler: numberNewValueHandler, 
            editable: true,
            cellClass: 'text-right',
            cellRenderer: function(params) {
                return $filter('number')(params.data.thur, 1);
            },
            cellValueChanged: cellValueChangedFunction
        },
        {
            displayName: 'Friday', 
            group: 'Weekly Editable Values', 
            field: 'fri',
            newValueHandler: numberNewValueHandler,
            editable: true,
            cellClass: 'text-right',
            cellRenderer: function(params) {
                return $filter('number')(params.data.fri, 1);
            },
            cellValueChanged: cellValueChangedFunction
        },
        {
            displayName: 'Total', 
            group: 'Volatile Summary',
            valueGetter: 'data.mon + data.tue + data.wed + data.thur + data.fri',
            volatile: true,
            cellStyle:  {'background-color': 'rgba(180, 255, 255, 0.5)'}, // light blue background
            cellClassRules: {
                'bold-and-red': 'x>20'
            },
            cellClass: 'text-right',
            cellRenderer: function(params) {
                return $filter('number')(params.value, 1);
            },

        },
        {
            displayName: 'Avg',  
            group: 'Volatile Summary',
            valueGetter: '(data.mon + data.tue + data.wed + data.thur + data.fri) / 5',
            volatile: true,
            cellClass: 'text-right',
            cellStyle:  {'background-color': 'rgba(180, 255, 255, 0.5)'} // light blue background
        },
        {
            displayName: 'Total', 
            group: 'Hard Summary',
            valueGetter: 'data.mon + data.tue + data.wed + data.thur + data.fri',
            cellClass: 'text-right',
            cellStyle:  {'background-color': 'rgba(255, 180, 255, 0.5)'}, // light red background
            cellClassRules: {
                'bold-and-red': 'x>20'
            }
        },
        {
            displayName: 'Avg',  
            group: 'Hard Summary',
            valueGetter: '(data.mon + data.tue + data.wed + data.thur + data.fri) / 5',
            cellClass: 'text-right',
            cellStyle:  {'background-color': 'rgba(255, 180, 255, 0.5)'} // light red background
        }
    ];

    var data = [
        {
            need_vote: true,
            has_comment: true,
            is_stale: true,
            is_watched: true,
            disbursement_issue: true,
            name: 'Katniss Everdeen',
            mon: 9,
            tue: 9,
            wed: 9,
            thur: 9,
            fri: 4
        },
        {
            need_vote: true,
            has_comment: false,
            is_stale: false,
            is_watched: false,
            disbursement_issue: true,
            name: 'Primrose Everdeen',
            mon: 5, 
            tue: 5, 
            wed: 5, 
            thur: 5, 
            fri: 5
        },
        {
            need_vote: false,
            has_comment: false,
            is_stale: true,
            is_watched: false,
            disbursement_issue: false,
            name: 'Gale Hawthorne',
            mon: 12,
            tue: 12,
            wed: 12,
            thur: 4, 
            fri: 0
        },
        {
            need_vote: false,
            has_comment: true,
            is_stale: false,
            is_watched: true,
            disbursement_issue: false,
            name: 'Peeta Mellark',
            mon: 8,
            tue: 8,
            wed: 8,
            thur: 8,
            fri: 8
        },
        {
            need_vote: false,
            has_comment: true,
            is_stale: false,
            is_watched: false,
            disbursement_issue: false,
            name: 'Haymitch Abernathy',
            mon: 4,
            tue: 4,
            wed: 4,
            thur: 4,
            fri: 4
        },
        {
            need_vote: true,
            has_comment: true,
            is_stale: true,
            is_watched: false,
            disbursement_issue: false,
            name: 'Effie Trinket',
            mon: 10,
            tue: 10,
            wed: 10,
            thur: 10,
            fri: 10
        },
        {
            need_vote: false,
            has_comment: false,
            is_stale: false,
            is_watched: false,
            disbursement_issue: true,
            name: 'Cinna',
            mon: 4,
            tue: 4,
            wed: 4,
            thur: 4,
            fri: 4
         },
        {
            need_vote: false,
            has_comment: false,
            is_stale: false,
            is_watched: true,
            disbursement_issue: false,
            name: 'Plutarch Heavensbee',
            mon: 8,
            tue: 8,
            wed: 8,
            thur: 8,
            fri: 8
        },
        {
            need_vote: false,
            has_comment: false,
            is_stale: false,
            is_watched: false,
            disbursement_issue: false,
            name: 'Finnick Odair',
            mon: 9,
            tue: 9,
            wed: 9,
            thur: 9,
            fri: 4
        },
        {
            need_vote: false,
            has_comment: false,
            is_stale: false,
            is_watched: false,
            disbursement_issue: false,
            name: 'Beetee',
            mon: 10,
            tue: 10,
            wed: 10,
            thur: 10,
            fri: 10
        },
        {
            need_vote: false,
            has_comment: false,
            is_stale: false,
            is_watched: false,
            disbursement_issue: false,
            name: 'President Alma Coin',
            mon: 3,
            tue: 3,
            wed: 3,
            thur: 3,
            fri: 0
        }
    ];

    function pendingHdr(params) {
        console.log(params);
        if(params.context.scope.pending_view) {
            return "<div style='text-align:center !important;'><span class='pendicon glyphicon glyphicon-exclamation-sign' style='color:#006837' ng-click='params.context.scope.alertIt()'></span></div>";
        } else {
            return "<div style='text-align:center !important;'><span class='pendicon glyphicon glyphicon-exclamation-sign' style='color:#aaaaaa' ng-click='params.context.scope.alertIt()'></span></div>";
        }
    }

    function pendingClicked() {
        return $scope.pending_view = !$scope.pending_view;
    }

    /*function crPendingHeader(params) {
      //params.$scope.pending_view = pending_view;
      params.$scope.pendingClicked = pendingClicked;
      var eHeader = '<span ng-click="pendingClicked(data.id)" class="headicon glyphicon glyphicon-exclamation-sign" style="color:#000000;">';
      return eHeader;
    }*/

    $scope.alertIT = function() {
        alert('it');
    };

    function numberNewValueHandler(params) {
        var valueAsNumber = parseInt(params.newValue);
        if (isNaN(valueAsNumber)) {
            window.alert("Invalid value " + params.newValue + ", must be a number");
        } else {
            params.data[params.colDef.field] = valueAsNumber;
        }
    }


    function cellValueChangedFunction() {
        // after a value changes, get the volatile cells to update
        $scope.gridOptions.api.softRefreshView();
    }

    $scope.gridOptions = {
        angularCompileRows: true
        , rowData: data
        , columnDefs: columnDefs
        , groupHeaders: true
        , rowSelection: 'single'
        , enableSorting: true
        , ready: function(api) {
            api.sizeColumnsToFit();
        }
        , context: {
          scope: $scope
        }
        //, headerCellRenderer: hdrRenderer
    };

    $scope.onHardRefresh = function() {
        $scope.gridOptions.api.refreshView();
    };
});