How to format the date to be display in ng-grid which is returns from server in json?

Question

I am using ng-grid from following link:http://angular-ui.github.io/ng-grid/

My MVC Controller function return data in json format which includes date like this

: "RunDate":"\/Date(1439577000000)\/","RunDate":"\/Date(1441391400000)\/" etc....

My View:

<div ng-grid="gridOptions" style="min-height:420px"></div>

My Grid options in js:

$scope.gridOptions = {
        data: 'myData',
        enablePaging: true,
        showFooter: true,
        columnDefs: [{ field: "RunDate", displayName: "Run Date", width: 120, cellFilter: "date:'yyyy-MM-dd'" }],
        totalServerItems: 'totalServerItems',
        pagingOptions: $scope.pagingOptions,
        filterOptions: $scope.filterOptions
    };

I want date to be display in this format:06/April/2015

Can anybody help me with this???

Answer 1

You need to apply custom filter on you variable while binding data. Do use cellTemplate of column level.

Code

 $scope.gridOptions = {
 data: 'gridData',
 columnDefs: [{
         field: 'RunDate',
         displayName: 'Run Date',
         cellTemplate： '<span> {{row.entity.RunDate | date:\'dd-MMM-yyyy\'}}</span>'，
     },
     ....
 ]
 });

Answer 2

Use Angular date filter, like this:

{{row.entity.RunDate | date:'dd-MMM-yyyy'}}

Answer 3

You need to change the date formatting on your gridOptions The correct date format you need is

dd/MMM/yyyy

 $scope.gridOptions = {
        data: 'myData',
        enablePinning: true,
        columnDefs: [
                     { field: 'RunDate',displayName: 'Run Date', cellFilter: 'date:\'dd/MMM/yyyy\'' },
                   ]
    };
   ...........
});

Check this link for an example