var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.grouping', 'ui.grid.pagination', 'ui.grid.moveColumns']);

app.controller('MainCtrl', ['$scope', '$http', '$interval', 'uiGridGroupingConstants', 'uiGridConstants', function ($scope, $http, $interval, uiGridGroupingConstants, uiGridConstants) {
  $scope.initonload = function () {
    $scope.gridOptions = {
      enableFiltering: true,
      enableGridMenu: true,
      paginationPageSizes: [5, 10, 15],
      paginationPageSize: 15,
      treeRowHeaderAlwaysVisible: false,
      headerTemplate: 'header-template.html',
      category: [
        { name: 'machine', visible: true, showCatName: false },
        { name: 'dep', visible: true, showCatName: false },
        { name: 'div', visible: true, showCatName: false },
        { name: 'productive', visible: true, showCatName: true }
      ],
      enableSorting: false,
      multiSelect: true,
      columnDefs: [
        { name: 'machine', width: '15%', category: "machine" },
        { name: 'dep', width: '10%', category: "dep" },
        { name: 'div', width: '10%', category: "div" },
        { name: 'util', width: '10%', category: "productive", treeAggregationType: uiGridGroupingConstants.aggregation.SUM },
        {
          name: 'prodcutive time', width: '25%', category: "productive", treeAggregationType: uiGridGroupingConstants.aggregation.AVG,
          filters: [
            {
              condition: uiGridConstants.filter.GREATER_THAN,
              placeholder: 'Greater than'
            },
            {
              condition: uiGridConstants.filter.LESS_THAN,
              placeholder: 'Less than'
            }
          ]
        },
        { name: 'non prodcutive time', width: '25%', category: "productive", treeAggregationType: uiGridGroupingConstants.aggregation.AVG }
      ],
      onRegisterApi: function (gridApi) {
        $scope.gridApi = gridApi;
      }
    };
  }

  $http.get('http://private-ba0530-machinejson.apiary-mock.com/questions')
    .success(function (data) {
      $scope.gridOptions.data = data;
      console.log($scope.gridOptions.data);
    });

  $scope.changeGroupByMachines = function () {
    //$scope.initonload();
    $scope.gridApi.grouping.clearGrouping();
    $scope.gridApi.grouping.groupColumn('machine');
  }

  $scope.changeGroupData10 = function () {
    //$scope.initonload();
    $scope.gridApi.grouping.clearGrouping();
    $scope.gridApi.grouping.groupColumn('dep');
    $scope.gridOptions.columnDefs[0].name = 'dep';
    $scope.gridOptions.columnDefs[0].treeAggregationType = uiGridGroupingConstants.aggregation.avg;
  }

  $scope.changeGroupData0 = function () {
    $scope.initonload();
    $scope.gridApi.grouping.clearGrouping();
    $scope.gridApi.grouping.groupColumn('dep');
    $scope.gridOptions.columnDefs[1].visible = true;
    $scope.gridOptions.columnDefs[0].treeAggregationType = uiGridGroupingConstants.aggregation.AVG;
  }

  $scope.changeGroupData = function () {
    $scope.initonload();
    $scope.gridApi.grouping.clearGrouping();
    $scope.gridApi.grouping.groupColumn('dep');
    $scope.gridApi.grouping.groupColumn('div');
    $scope.gridOptions.columnDefs[1].visible = true;
    $scope.gridOptions.columnDefs[2].visible = true;
  }

  $scope.hidefields = function () {
    $scope.gridOptions.columnDefs[1].visible = false;
    $scope.gridOptions.columnDefs[2].visible = false;
  }



  $scope.expandAll = function () {
    $scope.gridApi.treeBase.expandAllRows();
  };

  $scope.toggleRow = function (rowNum) {
    $scope.gridApi.treeBase.toggleRowTreeState($scope.gridApi.grid.renderContainers.body.visibleRowCache[rowNum]);
  };

  $scope.changeGrouping = function () {
    $scope.gridApi.grouping.clearGrouping();
    $scope.gridApi.grouping.groupColumn('age');
    $scope.gridApi.grouping.aggregateColumn('state', uiGridGroupingConstants.aggregation.COUNT);
  };

}])

.grid {
  width: 1000px;
  height: 750px;
}

.ui-grid-category {
  text-align: center;border-right: 0px;box-shadow: -1px 1px #d4d4d4
  
  
}

<div role="rowgroup"
     class="ui-grid-header">
    <div class="ui-grid-top-panel">
        <div class="ui-grid-header-viewport">
            <div class="ui-grid-header-canvas">
                <div class="ui-grid-header-cell-wrapper"
                     ng-style="colContainer.headerCellWrapperStyle()">
                    <div role="row"
                         class="ui-grid-header-cell-row">
                        <div class="ui-grid-header-cell ui-grid-clearfix ui-grid-category" ng-repeat="cat in grid.options.category"
                             ng-if="cat.visible && 
                             (colContainer.renderedColumns | filter:{ colDef:{category: cat.name} }).length > 0">
                             <span ng-if="cat.showCatName === true">
                                {{cat.name}}
                              </span>
                            <div class="ui-grid-header-cell ui-grid-clearfix" 
                                 ng-repeat="col in colContainer.renderedColumns | filter:{ colDef:{category: cat.name} }"
                                 ui-grid-header-cell
                                 col="col"
                                 render-index="$index">
                            </div>
                        </div><!--!cat.visible && -->
                        <div class="ui-grid-header-cell ui-grid-clearfix" ng-if="col.colDef.category === undefined"
                             ng-repeat="col in colContainer.renderedColumns track by col.uid"
                             ui-grid-header-cell
                             col="col"
                             render-index="$index">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
    <link rel="stylesheet" href="main.css" type="text/css">
  </head>
  <body>

<div ng-controller="MainCtrl" ng-init="initonload()">
<!--  <button id="expandAll" type="button" class="btn btn-success" ng-click="expandAll()">Expand All</button>
  <button id="toggleFirstRow" type="button" class="btn btn-success" ng-click="toggleRow(0)">Toggle First Row</button>-->
  <button id="toggleSecondRow" type="button" class="btn btn-success" ng-click="changeGroupByMachines(1)">Group By Machines</button>
  <button id="groupData0" type="button" class="btn btn-success" ng-click="changeGroupData0()">Grouping By Dep</button>
  <button id="groupData" type="button" class="btn btn-success" ng-click="changeGroupData()">Grouping By Dep and Div </button>
  <div id="grid1" ui-grid="gridOptions" ui-grid-grouping ui-grid-pagination ui-grid-move-columns ui-grid-pinning class="grid"></div>
</div>


    <script src="app.js"></script>
  </body>
</html>