Wijmo 5 - AddNew and AutoSize

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://cdn.wijmo.com/5.20143.27/controls/wijmo.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20143.27/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20143.27/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20143.27/interop/angular/wijmo.angular.min.js"></script>
<!-- mark this as an Angular application and give it a controller -->
<div ng-app="app" ng-controller="appCtrl">
    
<h3>AddNew and Delete </h3>
    
   <wj-flex-grid
    items-source="data" 
    allow-add-new="true"
    allow-delete="true"
    selection-mode="Cell"
    row-added="rowAdded(s,e)"
    selection-changed="selectionChanged(s,e)">
    <wj-flex-grid-column header="Farm name" binding="name" width="*">
   
    </wj-flex-grid-column>
    <wj-flex-grid-column header="Box nr" binding="box" width="0.5*">
      <i>{{$item.box}}</i>
    </wj-flex-grid-column>
    <wj-flex-grid-column header="Alert" binding="warning" width="0.75*">
     
    </wj-flex-grid-column>
  </wj-flex-grid>
    <input type="button" value="Update" ng-click="updateDatabase()"/>
</div>

JavaScript

// define app, include Wijmo 5 directives
var app = angular.module('app', ['wj']);

// controller
app.controller('appCtrl', function ($scope) {

    // create some data
    var data = [{
        name: 'Farm Denver',
        box: 'Box 1',
        warning: 'Need restart'
    }, {
        name: 'Farm Aspen',
        box: 'Box 7'
    }, {
        name: 'Farm Durango',
        box: 'Box 32',
        warning: 'Call ASAP'
    } ];

    // expose source database as a CollectionView 
    $scope.data = new wijmo.collections.CollectionView(data);
    $scope.data.trackChanges = true;
    $scope.data.newItemCreator = function() {
      return {
        name: 'XXX',
        box: '0',
        warning: ''
    	};
    };

    $scope.rowAdded=function(s,e){
      var previousRow = $scope.data.items[e.row - 1];

      if(angular.isDefined(previousRow) && previousRow.name === 'XXX'){
                e.cancel = true;
      }
    };
    
    $scope.selectionChanged=function(s,e){
      s.startEditing(true, e.row, e.col, true)
    };


    $scope.updateDatabase=function(){
    //pass the collectionview object i.e. data through service to update source database       
        console.log("Added: " + JSON.stringify($scope.data.itemsAdded));
        console.log("Edited: " + JSON.stringify($scope.data.itemsEdited));
    }
   
});