Doco(tut): add single filter tut, fix #1765

Author: PaulL1

misc/tutorial/103_filtering.ngdoc

@@ -74,7 +74,7 @@ to make any columns with a filter condition have blue text.
 
 ### Single filter box (similar to 2.x)
 
-Refer the {@link 499_FAQ FAQ}, it is possible to implement this using a rowsProcessor.
+Refer {@link 321_singleFilter singleFilter tutorial}, it is possible to implement this using a rowsProcessor.
 
 @example
 <example module="app">

misc/tutorial/321_singleFilter.ngdoc

@@ -0,0 +1,91 @@
+@ngdoc overview
+@name Tutorial: 321 Single filter
+@description
+
+Provide a single filter box that searches across multiple columns in the grid.
+
+@example
+<example module="app">
+  <file name="app.js">
+    var app = angular.module('app', ['ngTouch', 'ui.grid']);
+
+    app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
+      var today = new Date();
+      $scope.gridOptions = {
+        enableFiltering: false,
+        onRegisterApi: function(gridApi){
+          $scope.gridApi = gridApi;
+          $scope.gridApi.grid.registerRowsProcessor( $scope.singleFilter, 200 );
+        },
+        columnDefs: [
+          { field: 'name' },
+          { field: 'gender', cellFilter: 'mapGender' },
+          { field: 'company' },
+          { field: 'email' },
+          { field: 'phone' },
+          { field: 'age' },
+          { field: 'mixedDate' }
+        ]
+      };
+    
+      $http.get('/data/500_complex.json')
+        .success(function(data) {
+          $scope.gridOptions.data = data;
+          $scope.gridOptions.data[0].age = -5;
+    
+          data.forEach( function addDates( row, index ){
+            row.mixedDate = new Date();
+            row.mixedDate.setDate(today.getDate() + ( index % 14 ) );
+            row.gender = row.gender==='male' ? '1' : '2';
+          });
+        });
+        
+      $scope.filter = function() {
+        $scope.gridApi.grid.refresh();
+      };
+        
+      $scope.singleFilter = function( renderableRows ){
+        var matcher = new RegExp($scope.filterValue);
+        renderableRows.forEach( function( row ) {
+          var match = false;
+          [ 'name', 'company', 'email' ].forEach(function( field ){
+            if ( row.entity[field].match(matcher) ){
+              match = true;
+            }
+          });
+          if ( !match ){
+            row.visible = false;
+          }
+        });
+        return renderableRows;
+      };
+    }])
+    .filter('mapGender', function() {
+      var genderHash = {
+        1: 'male',
+        2: 'female'
+      };
+    
+      return function(input) {
+        if (!input){
+          return '';
+        } else {
+          return genderHash[input];
+        }
+      };
+    });
+
+  </file>
+  <file name="index.html">
+    <div ng-controller="MainCtrl">
+      <input ng-model='filterValue'/><button ng-click='filter()'>Filter</button>
+      <div id="grid1" ui-grid="gridOptions" class="grid"></div>
+    </div>
+  </file>
+  <file name="main.css">
+    .grid {
+      width: 500px;
+      height: 450px;
+    }
+  </file>
+</example>

misc/tutorial/499_FAQ.ngdoc

@@ -84,5 +84,5 @@ There are a number of common gotchas in using the grid, this FAQ aims to cover m
   if each row should be visible, and appropriately set the visible flag.
 
   This is a little tricky to build as a generic feature, but for specific use cases would be reasonably
-  simple.
+  simple.  Refer the {@link 321_singleFilter single filter tutorial}.