324_default_sorting.ngdoc

@ngdoc overview
@name Tutorial: 324 Default Sorting
@description

UI-Grid allows you to apply a default sort to the data which allows you specify how the data should be ordered after any explicit sorting has been applied. This allows the data to retain a particular ordering even once the user applies an explicit sort of their own and clears any sorts initially applied through columnDef.

In this example there an initial sort via name, but the defaultSort on memberNo ensures that when the names are the same then the memberNo is used to sort the matching entries. If the name sort is removed then all the entries are automatically sorted by memberNo due to the defaultSort.

Default sorts are intended to ensure a sensible implicit ordering to the data is retained, and therefore they do not show on columnHeaders as sorts unless the user explicitly sorts by that column.

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>
</pre>

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

    app.controller('MainCtrl', ['$scope', '$http', 'uiGridConstants', function ($scope, $http, uiGridConstants) {
      $scope.gridOptions = {
        data: [
           { name: "David Johnson", memberNo: 6014, company: "Softsoft" },
           { name: "Brian Davidson", memberNo: 4432, company: "Roundwheel" },
           { name: "Peter Anderson", memberNo: 8725, company: "Softsoft" },
           { name: "John Johnson", memberNo: 5326, company: "Initech" },
           { name: "Andrew Thomson", memberNo: 6416, company: "Roundwheel" },
           { name: "Brian Davidson", memberNo: 9134, company: "Initech" }
        ],
        enableSorting: true,
        columnDefs: [
          { field: 'name', sort: { direction: uiGridConstants.ASC, priority: 1 } },
          { field: 'memberNo', defaultSort: { direction: uiGridConstants.ASC } },
          { field: 'company' }
        ],
        onRegisterApi: function( gridApi ) {
          $scope.grid1Api = gridApi;
        }
      };

    }]);
  </file>
  <file name="index.html">
    <div ng-controller="MainCtrl">
      <div id="grid1" ui-grid="gridOptions" class="grid"></div>
    </div>
  </file>
  <file name="main.css">
    .grid {
      width: 500px;
      height: 200px;
    }
  </file>
  <file name="scenario.js">
    var gridTestUtils = require('../../test/e2e/gridTestUtils.spec.js');
    var GridObjectTest = require('../../test/e2e/gridObjectTestUtils.spec.js');
    var grid1 = new GridObjectTest('grid1');

    describe('first grid on the page, default sort', function() {
      // Reload the page before each test if on Firefox. Chrome does it automatically.
      gridTestUtils.firefoxReload();

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

      it('grid should be sorted by name by default', function () {
        grid1.expectCellValueMatch( 0, 0, 'Andrew Thomson' );
        grid1.expectCellValueMatch( 1, 0, 'Brian Davidson' );
      });

      it('reverse sort by name by clicking header', function () {
        grid1.clickHeaderCell( 0 )
          .then(function () {
            grid1.expectCellValueMatch( 0, 0, 'Peter Anderson' );
            grid1.expectCellValueMatch( 1, 0, 'John Johnson' );
          });
      });

	  it('remove sort and sort by memberNo by clicking header', function () {
        grid1.clickHeaderCell( 0 )
          .then(function () {
            return grid1.clickHeaderCell( 0 );
          })
          .then(function () {
            grid1.expectCellValueMatch( 0, 0, 'Brian Davidson' );
            grid1.expectCellValueMatch( 1, 0, 'John Johnson' );
          });
      });

    });
  </file>
</example>