Adding text to an Angular Ui-Grid date column

Question

I have an angular ui-grid that has a column for a date, which indicates the date an email was sent to a new user:

{ 
  name: "SentOn", 
  displayName: "Sent On", 
  cellFilter: "date:\"yyyy-MM-dd HH:mm\"" 
}

The email is not sent until a number of background processes are complete, so this date can be null. When the date is null, nothing shows in the cell.

Is there a straight forward way to display some default text when the date is null?

Answer 1

There are two ways you can achieve what you want here.

1. You can provide a custom template for the cell to handle the null date scenario. This is probably easier option too.

{ 
  name: "SentOn", 
  displayName: "Sent On", 
  cellTemplate : "<div class=\"ui-grid-cell-contents\">{{COL_FIELD CUSTOM_FILTERS || \"Not Sent\"}}</div>"
}

Or you can create a custom cellFilter which will take care of the null date. You can extend the existing date filter to achieve this.

var app = angular.module('app', ['ngTouch', 'ui.grid','ui.grid.edit']);
var grid;
app.filter('customDate', function($filter){    
    var standardDateFilterFn = $filter('date');
    return function(dateToFormat){
      if(!dateToFormat)
        return "Not Sent Yet";
     return standardDateFilterFn(dateToFormat, 'yyyyMMddhhmmss');
    }    
});
app.controller('MainCtrl', ['$scope', function ($scope) {

  var myData = [
    {
      id1:new Date(),id2:"2",id3:"3",id4:"4",id5:"5",
    }, {
      id1:null,id2:"2",id3:"3",id4:"4",id5:"5",
    },]

    var getTemplate = function()
    {

        return "<div class=\"ui-grid-cell-contents\">{{COL_FIELD CUSTOM_FILTERS}}</div>";

    }

  var cellEditable = function($scope){
    if($scope.row.entity.oldId4===undefined)
      return false;
    return $scope.row.entity.oldId4!=$scope.row.entity.id4;
  }

  $scope.gridOptions = {
        enableFiltering: true,
         onRegisterApi: function(gridApi){
      grid = gridApi;
    },
    data: myData,
    columnDefs:[
        {
          field: 'id1',
          displayName: "id1",
          width: 200,
           cellTemplate: getTemplate(),
           cellFilter : "customDate:\"yyyy-MM-dd HH:mm\""
        },
        {
          field: 'id2',
          displayName: "id2",
          width: 100
        },{
          field: 'id3',
          displayName: "id3",
          width: 100
        },{
          field: 'id4',
          displayName: "id4",
          width: 100
        },{
          field: 'id5',
          displayName: "id5",
          width: 100
        },

    ],
}
 $scope.gridOptions.onRegisterApi = function(gridApi){
          //set gridApi on scope
          $scope.gridApi = gridApi;
          gridApi.edit.on.afterCellEdit($scope,function(rowEntity, colDef, newValue, oldValue){
            rowEntity.oldId4 = oldValue;
            $scope.$apply();
          });
        };

 $scope.test = function()
 {
   window.alert("Cell clicked")
 }
}]);

here is a working plnkr. http://plnkr.co/edit/qHaRzkzxGEphuTMQ6oqG?p=preview