Simple uiGrid Example dynamic updating

by santhosh lanka

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.1.1/ui-grid.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.1.1/ui-grid.js"></script>
<div ng-app="demoApp" ng-controller="mainController as ctrl">
  <button ng-click="ctrl.add()">
  add
  </button>
  <div ui-grid="ctrl.gridOptions" class="myGrid">
  </div>
</div>

CSS

.myGrid {
      width: 500px;
      height: 250px;
    }

JavaScript

angular.module('demoApp', ['ui.grid'])
  .controller('mainController', MainCtrl);

function MainCtrl(uiGridConstants) {
  var vm = this,
  	data = [{
        "firstName": "Cox",
        "lastName": "Carney",
        "company": "Enormo",
        "employed": true
      }, {
        "firstName": "Lorraine",
        "lastName": "Wise",
        "company": "Comveyer",
        "employed": false
      }, {
        "firstName": "Nancy",
        "lastName": "Waters",
        "company": "Fuelton",
        "employed": false
      }];

  angular.extend(vm, {
  	add: function() {
    	data.push({
        "firstName": "Tester",
        "lastName": "goody",
        "company": "Comveyer",
        "employed": false,
        "newCol": 'something',
        "test" :true
      });
      		
     // columnDef only required if cols are changing
     // also notify only needed if cols change
     vm.gridOptions.columnDefs = [{
     	field: 'firstName'
     },{
     	field: 'lastName'
     },{
     	field: 'company'
     },{
     	field: 'employed'
     },{
     	field: 'newCol'
     },{
      field: 'test'
     }
     ];
     
     // no notify required with same data structure
      vm.gridApi
        .core.notifyDataChange(uiGridConstants.dataChange.ALL);
    },
    gridOptions: {
      data: data,
      onRegister: function(gridApi) {
      	vm.gridApi = gridApi;
      }
    }
  });
}