Reputation: 1945
What is the simplest way to turn off three-state column sorting for angular UI grid? The third 'unknown' state is very confusing.
UI-grid sortings example: http://ui-grid.info/docs/#/tutorial/102_sorting by default has three sorting states. What I need is to have one column in a default sorting state (ASC or DESC). On click event ui-grid should result into ASC or DESC state, but not the third one "Undefined".
This is UI Grid v3.1.0
Upvotes: 1
Views: 1170
Reputation: 1
Used sortDirectionCycle: [uiGridConstants.ASC, uiGridConstants.DESC] to each column worked fine...
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.resizeColumns', 'ui.grid.moveColumns']);
app.controller('MainCtrl', ['$scope', '$http', 'uiGridConstants', function ($scope, $http, uiGridConstants) {
$scope.gridOptions = {
enableSorting: true,
enableColumnMenus : false,
columnDefs: [
{ field: 'name', width: '33%', minWidth: 150, width: 250,sortDirectionCycle: [uiGridConstants.ASC, uiGridConstants.DESC]},
{ field: 'gender', width: '33%', maxWidth: 200, minWidth: 70,sortDirectionCycle: [uiGridConstants.ASC, uiGridConstants.DESC] },
{ field: 'company', width: '33%',sortDirectionCycle: [uiGridConstants.ASC, uiGridConstants.DESC] }
]
};
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
.success(function(data) {
$scope.gridOptions.data = data;
});
}]);
Upvotes: 0
Reputation: 1945
Grid UI v3.1.0 can set sortDirectionCycle for each column separately:
$scope.GridOptions.columnDefs: [{
sortDirectionCycle: [uiGridConstants.ASC, uiGridConstants.DESC]
},
{ sortDirectionCycle: [uiGridConstants.ASC, uiGridConstants.DESC] },
{ sortDirectionCycle: [uiGridConstants.ASC, uiGridConstants.DESC] },
//... for each
];
Upvotes: 1