190_large_dataset.ngdoc

@ngdoc overview
@name Tutorial: 190 Large Dataset
@description

This grid example uses a data set of 10,000 records.

Demonstrates the following:
<ul>
  <li>binding complex column properties on Address.City.</li>
  <li>same field can be listed twice in the grid with a different name</li>
  <li>using field instead of name for backwards compatibility with 2.x</li>
</ul>

For better performance with the following example, you can choose to load the ui-grid.core.js instead:
<pre>
  <script src="/release/ui-grid.core.min.js"></script>
</pre>

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

    app.controller('MainCtrl', ['$scope', '$http', '$q', function ($scope, $http, $q) {
      $scope.gridOptions = {
      };

      $scope.gridOptions.columnDefs = [
        {name:'id'},
        {name:'name'},
        {field:'age'}, // showing backwards compatibility with 2.x.  you can use field in place of name
        {name: 'address.city'},
        {name: 'age again', field:'age'}
      ];

      var canceler = $q.defer();
      $http.get('/data/10000_complex.json', {timeout: canceler.promise})
        .then(function(response) {
          $scope.gridOptions.data = response.data;
        });

      $scope.$on('$destroy', function(){
        canceler.resolve();  // Aborts the $http request if it isn't finished.
      });
    }]);
  </file>
  <file name="index.html">
    <div ng-controller="MainCtrl">
      <strong>Data Length:</strong> {{ gridOptions.data.length | number }}
      <br>
      <br>
      <div id="grid1" ui-grid="gridOptions" class="grid"></div>
    </div>
  </file>
  <file name="main.css">
    .grid {
      width: 500px;
      height: 450px;
    }
  </file>
  <file name="scenario.js">
    var gridTestUtils = require('../../test/e2e/gridTestUtils.spec.js');
    describe( '190 large dataset', function() {
      it('grid should have five visible columns', function () {
        gridTestUtils.expectHeaderColumnCount( 'grid1', 5 );
      });

      it('column headers as expected', function () {
        gridTestUtils.expectHeaderCellValueMatch( 'grid1', 0, 'Id' );
        gridTestUtils.expectHeaderCellValueMatch( 'grid1', 1, 'Name' );
        gridTestUtils.expectHeaderCellValueMatch( 'grid1', 2, 'Age' );
        gridTestUtils.expectHeaderCellValueMatch( 'grid1', 3, 'Address.City' );
        gridTestUtils.expectHeaderCellValueMatch( 'grid1', 4, 'Age Again' );
      });

      it('first couple of rows as expected', function () {
        gridTestUtils.expectRowValuesMatch( 'grid1', 0, [ '0', 'Ramsey Cummings', '52', 'Glendale', '52' ] );
        gridTestUtils.expectRowValuesMatch( 'grid1', 1, [ '1', 'Stefanie Huff', '70', 'Beaverdale', '70' ] );
      });
    });
  </file>
</example>