101_intro.ngdoc

@ngdoc overview
@name Tutorial: 101 Intro to UI-Grid
@description

UI-Grid 4.0 (formerly ng-grid), is a 100% angular grid written with no dependencies other than AngularJS. It is designed around
a core grid module and features are layered on as angular modules and directives.  This keeps the core small and focused
while executing very complex features only when you need them.

In the core module, you get:
<ul>
 <li>Virtualized rows and columns - only the rows and columns visible in the viewport (+ some extra margin) are actually rendered</li>
 <li>Bind cells to complex properties and functions</li>
 <li>Column sorting with three states: Asc, Desc, None</li>
 <li>Column filtering</li>
 <li>Ability to change header and cell contents with custom templates</li>
 <li>i18nService allows label translations</li>
</ul>


In this example we create the most basic grid possible.

Steps:
<ul>
 <li>Include uiGrid in your script and css
  <pre>
      <link rel="styleSheet" href="release/ui-grid.min.css"/>
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
      <script src="/release/ui-grid.min.js"></script>
      <!-- Or the following if you don't want to use all features -->
      <!-- <script src="/release/ui-grid.core.min.js"></script> -->
  </pre>
 </li>
 <li>Include ui.grid module as a dependency in your app
   <pre>
       var app = angular.module('app', ['ui.grid']);
   </pre>
 </li>
 <li>Or using CommonJS
   <pre>
       var app = angular.module('app', [require('angular-ui-grid')]);
   </pre>
 </li>
 <li>
   Add a css style to your app css so the grid knows it's dimensions
   <pre>
     .myGrid {
         width: 500px;
         height: 250px;
       }
   </pre>
 </li>
 <li>
  Add an array of data to a property on your controller
     <pre>
     this.myData = [
             {
                 "firstName": "Cox",
                 "lastName": "Carney"...
     </pre>
 </li>
 <li>
 Use the ui-grid directive and specify a json object with a data property referencing your $ctrl.myData property.
 <pre>
     <div ng-controller="MainCtrl as $ctrl">
       <div ui-grid="{ data: $ctrl.myData }" class="myGrid"></div>
     </div>
 </pre>

 </li>
</ul>


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

    function MainCtrl() {
      this.myData = [
        {
            firstName: "Cox",
            lastName: "Carney",
            company: "Enormo",
            employed: true
        },
        {
            firstName: "Lorraine",
            lastName: "Wise",
            company: "Comveyer",
            employed: false
        },
        {
            firstName: "Nancy",
            lastName: "Waters",
            company: "Fuelton",
            employed: false
        }
      ];
    }
  </file>
  <file name="index.html">
    <div ng-controller="MainCtrl as $ctrl">
      <div id="grid1" ui-grid="{ data: $ctrl.myData }" class="grid"></div>
    </div>
  </file>
  <file name="main.css">
    .grid {
      width: 500px;
      height: 250px;
    }
  </file>

  <file name="scenario.js">
    var GridObjectTest = require('../../test/e2e/gridObjectTestUtils.spec.js'),
      grid1 = new GridObjectTest('grid1');

    describe('101 tutorial', function() {
      it('grid should have three visible rows', function() {
        grid1.expectRowCount( 3 );
      });

      it('header values should be as expected', function() {
        grid1.expectHeaderColumns( ['First Name', 'Last Name', 'Company', 'Employed'] );
      });

      it('first row cell values should be as expected', function() {
        // checking individual cells usually gives a better stack trace when there are errors
        grid1.expectCellValueMatch( 0, 0, 'Cox' );
        grid1.expectCellValueMatch( 0, 1, 'Carney' );
        grid1.expectCellValueMatch( 0, 2, 'Enormo' );
        grid1.expectCellValueMatch( 0, 3, 'true' );
      });

      it('next two row cell values should be as expected', function() {
        // checking in bulk is convenient to write, but can be less informative with errors
        grid1.expectRowValuesMatch( 1, [ 'Lorraine', 'Wise', 'Comveyer', 'false' ] );
        grid1.expectRowValuesMatch( 2, [ 'Nancy', 'Waters', 'Fuelton', 'false' ] );
      });
    });
  </file>
</example>