chore(401_AllFeatures.ngdoc): Updating All Features tutorial

Author: Portugal, Marcelo

misc/tutorial/401_AllFeatures.ngdoc

@@ -15,44 +15,55 @@ All features are enabled to get an idea of performance
 
     app.controller('MainCtrl',  ['$scope', '$http', '$timeout', '$interval', 'uiGridConstants', 'uiGridGroupingConstants',
      function ($scope, $http, $timeout, $interval, uiGridConstants, uiGridGroupingConstants) {
-
-      $scope.gridOptions = {};
-      $scope.gridOptions.data = 'myData';
-      $scope.gridOptions.enableCellEditOnFocus = true;
-      $scope.gridOptions.enableColumnResizing = true;
-      $scope.gridOptions.enableFiltering = true;
-      $scope.gridOptions.enableGridMenu = true;
-      $scope.gridOptions.showGridFooter = true;
-      $scope.gridOptions.showColumnFooter = true;
-      $scope.gridOptions.fastWatch = true;
-
-      $scope.gridOptions.rowIdentity = function(row) {
-        return row.id;
+       var gridApi;
+
+      $scope.gridOptions = {
+        data: 'myData',
+        enableCellEditOnFocus: true,
+        enableColumnResizing: true,
+        enableFiltering: true,
+        enableGridMenu: true,
+        showGridFooter: true,
+        showColumnFooter: true,
+        fastWatch: true,
+        rowIdentity: getRowId,
+        getRowIdentity: getRowId,
+        importerDataAddCallback: function importerDataAddCallback( grid, newObjects ) {
+          $scope.myData = $scope.data.concat( newObjects );
+        },
+        columnDefs: [
+          { name:'id', width:50 },
+          { name:'name', width:100 },
+          { name:'age', width:100, enableCellEdit: true, aggregationType: uiGridConstants.aggregationTypes.avg, treeAggregationType: uiGridGroupingConstants.aggregation.AVG },
+          { name:'address.street', width:150, enableCellEdit: true },
+          { name:'address.city', width:150, enableCellEdit: true },
+          { name:'address.state', width:50, enableCellEdit: true },
+          { name:'address.zip', width:50, enableCellEdit: true },
+          { name:'company', width:100, enableCellEdit: true },
+          { name:'email', width:100, enableCellEdit: true },
+          { name:'phone', width:200, enableCellEdit: true },
+          { name:'about', width:300, enableCellEdit: true },
+          { name:'friends[0].name', displayName:'1st friend', width:150, enableCellEdit: true },
+          { name:'friends[1].name', displayName:'2nd friend', width:150, enableCellEdit: true },
+          { name:'friends[2].name', displayName:'3rd friend', width:150, enableCellEdit: true },
+          { name:'agetemplate',field:'age', width:150, cellTemplate: '<div class="ui-grid-cell-contents"><span>Age 2:{{COL_FIELD}}</span></div>' },
+          { name:'Is Active',field:'isActive', width:150, type:'boolean' },
+          { name:'Join Date',field:'registered', cellFilter:'date', width:150, type:'date', enableFiltering: false },
+          { name:'Month Joined',field:'registered', cellFilter: 'date:"MMMM"', filterCellFiltered: true, sortCellFiltered: true, width:150, type:'date' }
+        ],
+        onRegisterApi: function onRegisterApi(registeredApi) {
+          gridApi = registeredApi;
+        }
       };
-      $scope.gridOptions.getRowIdentity = function(row) {
+
+      function getRowId(row) {
         return row.id;
-      };
+      }
 
-      $scope.gridOptions.columnDefs = [
-        { name:'id', width:50 },
-        { name:'name', width:100 },
-        { name:'age', width:100, enableCellEdit: true, aggregationType:uiGridConstants.aggregationTypes.avg, treeAggregationType: uiGridGroupingConstants.aggregation.AVG },
-        { name:'address.street', width:150, enableCellEdit: true },
-        { name:'address.city', width:150, enableCellEdit: true },
-        { name:'address.state', width:50, enableCellEdit: true },
-        { name:'address.zip', width:50, enableCellEdit: true },
-        { name:'company', width:100, enableCellEdit: true },
-        { name:'email', width:100, enableCellEdit: true },
-        { name:'phone', width:200, enableCellEdit: true },
-        { name:'about', width:300, enableCellEdit: true },
-        { name:'friends[0].name', displayName:'1st friend', width:150, enableCellEdit: true },
-        { name:'friends[1].name', displayName:'2nd friend', width:150, enableCellEdit: true },
-        { name:'friends[2].name', displayName:'3rd friend', width:150, enableCellEdit: true },
-        { name:'agetemplate',field:'age', width:150, cellTemplate: '<div class="ui-grid-cell-contents"><span>Age 2:{{COL_FIELD}}</span></div>' },
-        { name:'Is Active',field:'isActive', width:150, type:'boolean' },
-        { name:'Join Date',field:'registered', cellFilter:'date', width:150, type:'date', enableFiltering:false },
-        { name:'Month Joined',field:'registered', cellFilter: 'date:"MMMM"', filterCellFiltered:true, sortCellFiltered:true, width:150, type:'date' }
-      ];
+      $scope.toggleFilterRow = function() {
+        $scope.gridOptions.enableFiltering = !$scope.gridOptions.enableFiltering;
+        gridApi.core.notifyDataChange(uiGridConstants.dataChange.COLUMN);
+      };
 
       $scope.callsPending = 0;
 
@@ -90,13 +101,12 @@ All features are enabled to get an idea of performance
           $timeout.cancel(timeout);
           $interval.cancel(sec);
         });
-
       };
-
     }]);
   </file>
   <file name="index.html">
     <div ng-controller="MainCtrl">
+      <button id="filterToggle" type="button" class="btn btn-success" ng-click="toggleFilterRow()">Toggle Filter</button>
       <button id="refreshButton" type="button" class="btn btn-success" ng-click="refreshData()">Refresh Data</button>  <strong>Calls Pending:</strong> <span ng-bind="callsPending"></span>
       <br>
       <br>