Adding text to an Angular Ui-Grid date column - angular-ui-grid

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.
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