311_importing_data_with_rowedit.ngdoc

@ngdoc overview
@name Tutorial: 311 Importing Data With Row Edit
@description The importer feature allows data to be imported into the grid in 
csv or json format.  The importer can use the native grid menu, or can accept a 
file from a custom file picker implemented by the user.

The importer can work together with the rowEdit feature to automatically save the
imported rows to your server, and show validation errors for any rows that were
not accepted by the server.

If you want to allow the user to look at the data before the saves kick off, consider
setting the rowEditWaitInterval to -1, which will suppress the auto-save, and require
you to manually call flushDirtyRows() once the user has made a save request.

In this example we also use a custom file picker to trigger the import, as well
as the grid menu.

For better performance with the following example, you can choose to load the ui-grid.core.js and specific feature files instead:
<pre>
  <script src="/release/ui-grid.core.min.js"></script>
  <script src="/release/ui-grid.cellnav.min.js"></script>
  <script src="/release/ui-grid.edit.min.js"></script>
  <script src="/release/ui-grid.importer.min.js"></script>
  <script src="/release/ui-grid.row-edit.min.js"></script>
</pre>

@example
In this example we use the rowEdit feature to save the rows as they are created.
As with the rowEdit tutorial, any records with a gender of 'male' give an error,
and can be edited to save without error.


<example module="app">
  <file name="app.js">
    var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.importer', 'ui.grid.rowEdit', 'ui.grid.edit']);

    app.controller('MainCtrl', ['$scope', '$http', '$interval', '$q', function ($scope, $http, $interval, $q) {
      $scope.data = [];
      $scope.gridOptions = {
        enableGridMenu: true,
        importerDataAddCallback: function( grid, newObjects ) {
          $scope.data = $scope.data.concat( newObjects );
        },
        onRegisterApi: function(gridApi){ 
          $scope.gridApi = gridApi;
          gridApi.rowEdit.on.saveRow($scope, $scope.saveRow);
        },
        data: 'data'
      };

      $scope.saveRow = function( rowEntity ) {
        // create a fake promise - normally you'd use the promise returned by $http or $resource
        var promise = $q.defer();
        $scope.gridApi.rowEdit.setSavePromise( rowEntity, promise.promise );
       
        // fake a delay of 3 seconds whilst the save occurs, return error if gender is "male"
        $interval( function() {
          if (rowEntity.Gender === 'male' ){
            promise.reject();
          } else {
            promise.resolve();
          }
        }, 3000, 1);
      };
      
      var handleFileSelect = function( event ){
        var target = event.srcElement || event.target;
        
        if (target && target.files && target.files.length === 1) {
          var fileObject = target.files[0];
          $scope.gridApi.importer.importFile( fileObject );
          target.form.reset();
        }
      };

      var fileChooser = document.querySelectorAll('.file-chooser');
      
      if ( fileChooser.length !== 1 ){
        console.log('Found > 1 or < 1 file choosers within the menu item, error, cannot continue');
      } else {
        fileChooser[0].addEventListener('change', handleFileSelect, false);  // TODO: why the false on the end?  Google  
      }
    }]);
  </file>
  
  <file name="index.html">
    <div ng-controller="MainCtrl">
      <form><input type="file" class="file-chooser" id="files" name="files[]" /></form>
      <div ui-grid="gridOptions" ui-grid-importer class="grid" ui-grid-edit ui-grid-row-edit></div>
    </div>
  </file>
  
  <file name="main.css">
    .grid {
      width: 500px;
      height: 400px;
    }
  </file>
</example>
import.json:
<pre>
[{"name":"John Smith","gender":"male","company":"TestIcon"},{"name":"Jane Doe","gender":"female","company":"FastTruck"}]
</pre>

import.csv
<pre>
"Name","Gender","Company"
"John Smith","male","TestIcon"
"Jane Doe","female","FastTrucks"
</pre>