AG-Grid Test

by Umair Rafiq

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/7.1.0/ag-grid.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/7.1.0/styles/ag-grid.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/7.1.0/styles/theme-fresh.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js"></script>
<div ng-app="myApp" class="container-fluid" style="height: 100vh;">
  <div ng-controller="gridCtrl" class="row" style="height: 100%;">

    <input placeholder="Filter..." type="text" ng-model="filter" ng-keydown="filterData()" ng-keyup="filterData()" ng-change="filterData()" />


    <div style="height: 300px">
      <div ag-grid="gridOptions" class="ag-fresh" style="width: 100%; height: 100%;"></div>

      <div id="display-toolbar" ng-if="displayToolbar">
        <input type="button" ng-click="showCheckboxes()" value="View Columns" />

        <div ng-repeat="item in columnDefs" ng-if="displayCheckbox && $index > 0">
          <label class="checkbox" for="{{item.colId}}">

            <input id="{{item.colId}}" type="checkbox" name="columnName_{{item.colId}}" ng-checked="(item.hide === false || item.hide === undefined) " ng-click="showColumn(item.colId);" ng-model="colSelection.colIds[item.colId]"> {{item.headerName}}
          </label>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.page-wrapper {
  height: calc(100vh - 20px);
  width: calc(100vw - 10px);
}

.wrapper {
  height: 100%;
  width: 100%;
}

.wrap-height {
  height: 100%;
}

.ag-material {
  height: calc(100% - 110px);
  margin-bottom: 10px;
}

JavaScript

agGrid.initialiseAgGridWithAngular1(angular);

var myApp = angular.module('myApp', ['agGrid']);

myApp.controller('gridCtrl', function($scope, $timeout) {
  console.clear();
  //console.log(agGrid.defaultGroupComparator);

  $scope.filter = '';
  var columnDefs = [{
      headerName: "Profile name",
      cellRenderer: 'group',
      colId: 'profileName',
      field: 'group',
      comparator: agGrid.defaultGroupComparator,
       getQuickFilterText: function(params) {
        return params.value ? params.value.name : ""
    }
    }, {
      headerName: "Client name",
      field: "clientName",
      colId: 'clientName'
    }, {
      headerName: "Modification date",
      field: "modDate",
      width: 140,
      colId: 'modDate',
      comparator: agGrid.dateComparator,
      hide: true,
      suppressFilter: true
    }, {
      headerName: 'Reports',
      field: 'reports',
      width: 100,
      suppressSorting: true,
      colId: 'reports',
      suppressFilter: true,
      cellRenderer: function(params) { // Function cell renderer
        return '<span>PDF</span>';
      }
    },

    {
      headerName: 'Status',
      field: 'status',
      width: 100,
      colId: 'status',
      suppressFilter: true
    }, {
      headerName: '10-K',
      colId: 'progress',
      groupId: 'progress',
      children: [{
        headerName: 'C received',
        field: 'fundsReceived',
        width: 150,
        suppressSorting: true,
        hide: false,
        suppressFilter: true,
        cellRenderer: function(params) {
          return '<span>T</span>'
        }
      }, {
        headerName: 'B received',
        field: 'cafReceived',
        width: 150,
        suppressSorting: true,
        hide: false,
        suppressFilter: true,
        cellRenderer: function(params) {
          return '<b>blah</b>';
        }
      }]
    }
  ];

  $scope.rowData = [{
    group: "Best company ever",
    clientName: "John and jane smith p1",
    modDate: '09/10/2016',
   ...