How to custom sort in ng-grid, when the column has boolean and undefined values?

151 Views Asked by At

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;
    }


});
0

There are 0 best solutions below