-
Notifications
You must be signed in to change notification settings - Fork 2.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Default sorting allows data to always have an implicit ordering while yielding to any user-provided sorts. Default sorts effectively add additional columns to the sort at the lowest priorities, they cannot be removed and automatically reapply if the user clears their sort. Since they are intended to represent the default state of the data the default sorts are not displayed on the column headers and are effectively invisible to the user.
- Loading branch information
1 parent
a364886
commit e629bc6
Showing
4 changed files
with
182 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,88 @@ | ||
@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. | ||
|
||
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters