Simple uiGrid Example dynamic updating

by vaibhav saxena

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" ui-grid-pinning ui-grid-auto-resize
                 ui-grid-resize-columns ui-grid-selection ui-grid-cellNav class="myGrid">
  </div>
</div>

CSS

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

JavaScript

angular.module('demoApp', ['ui.grid', 'ui.grid.edit', 'ui.grid.selection', 'ui.grid.cellNav'])
  .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
      }];

	this.rowclick = function(row){
		console.log(row);
		alert(row.entity);
}
  angular.extend(vm, {
  	add: function() {
    	data.push({
        "firstName": "Tester",
        "lastName": "goody",
        "company": "Comveyer",
        "employed": false,
        "newCol": 'something'
      });
      		
     // columnDef only required if cols are changing
     // also notify only needed if cols change
     vm.gridOptions.columnDefs = [{
     	field: 'firstName',
       enableCellEdit: false, allowCellFocus:true,enableCellEdit: false,
     },{
     	field: 'lastName',
       enableCellEdit: false, allowCellFocus:false,enableCellEdit: false,
        allowCellFocus:false
     },{
     	field: 'company'
     },{
     	field: 'employed'
     },{
     	field: 'newCol'
     }];
     
     // no notify required with same data structure
      vm.gridApi
        .core.notifyDataChange(uiGridConstants.dataChange.ALL);
    },
    gridOptions: {
      data: data,
      rowTemplate: 
          '<div> <div  ng-repeat="(colRenderIndex, col) in '+				 	   
          ' colContainer.renderedColumns track by col.colDef.name" ng-click="grid.appScope.rowclick(row);"' +
          'class="ui-grid-cell"' +      
          'allow-event-propagation="true"' +
          '  ui-grid-cell </div>',
      onRegister: function(gridApi) {
      	vm.gridApi = gridApi;
        	vm.rowclick =...