I am referring to questions raised on ng-grid, but unable to find out the solution for my requirement here. I have ng-grid which has a column name called Status. It displays value taken from 2 different parameters in the JSON as below.
var mydata1 = [{"Id":01,"CustNo":"100001","CustName":"Alexander","LastSeen":null,"MultipleDatasets":false},
{"Id":02,"CustNo":"100002","CustName":"Mike","LastSeen":"2017-10-15T00:00:00","MultipleDatasets":false},
{"Id":03,"CustNo":"100003","CustName":"Anne","LastSeen":null,"MultipleDatasets":true}]
The Status displays
- No Flags - when LastSeen is null
- Yellow Flag - when it has a date
- Red Flag - MultipleDatasets: true
On ASC sort of Status column: I get YellowFlag, No Flag and Red Flag on DESC sort of Status column: I get No Flag, YellowFlag and Red Flag.
I want to have custom sort function that displays
On ASC sort of Status column: RedFlag, YellowFlag, No Flag on DESC sort of Status column: No Flag, YellowFlag and Red Flag.
How should I write a sortfunction for this?
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.data = [{"Id":01,"CustNo":"100001","CustName":"Alexander","LastSeen":null,"MultipleDatasets":false},
{"Id":02,"CustNo":"100002","CustName":"Mike","LastSeen":"2017-10-15T00:00:00","MultipleDatasets":false},
{"Id":03,"CustNo":"100003","CustName":"Anne","LastSeen":null,"MultipleDatasets":true}];
$scope.gridOptions = {
data: 'data',
columnDefs: [
{
field: 'DataLastSeen', displayName: 'Status', width: 25, enableCellEdit: false, cellTemplate: $scope.cellWarning,
sortFn: function (DataLastSeen) {
console.log(row.entity.DataLastSeen);
}
},
{ field: 'CustNo', displayName: 'Customer Number'},
{ field: 'CustName', displayName: 'Customer Name'}
]
};
$scope.cellWarning = "<div>" +
"<div ng-if=\"row.entity.MultipleDatasets\"><md-tooltip>Multiple datasets have been uploaded from this customer today.</md-tooltip><md-icon style='color: #FF2F00'>warning</md-icon></div>" +
"<div ng-if=\"showWarning(row.entity.DataLastSeen)\"><md-tooltip>No data in the past day</md-tooltip><md-icon style='color: #FFCC00'>warning</md-icon></div>" +
"</div>";
$scope.showWarning = function (date) {
if (date === undefined) {
return ;
}
var dataLastSeen = new Date(date);
var oneDayAgo = new Date();
oneDayAgo.setDate(oneDayAgo.getDate() - 1);
return dataLastSeen < oneDayAgo;
}
});