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

score 2 · Answer 1 · edited Apr 06 '15 at 14:10

2

Use Angular date filter, like this:

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

edited Apr 06 '15 at 14:10

IndieTech Solutions

2,527
1
21
36

answered Apr 06 '15 at 12:03

Reena

1,109
8
16

but where do i do this?? – I Love Stackoverflow Apr 07 '15 at 03:55

score 2 · Accepted Answer · answered Apr 07 '15 at 11:34

2

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>'，
     },
     ....
 ]
 });

answered Apr 07 '15 at 11:34

Pankaj Parkar

134,766
23
234
299

@MariaPithia `row.entity` contains row level data – Pankaj Parkar Apr 08 '15 at 05:08
oh ok thanks.what options you would suggest me for displaying data in grid?? – I Love Stackoverflow Apr 08 '15 at 05:23
put the code given by me, to your columnDefs of ng-grid option – Pankaj Parkar Apr 08 '15 at 05:25
pankaj can you suggest me some option instead of ng-grid like i am thinking for kendo grid (with script only)?? – I Love Stackoverflow Apr 08 '15 at 06:10
I'd suggest `ui-grid`(updated version of ng-grid)/`smart-table`/ `ng-table`, I don't prefer to go with Kendo.. – Pankaj Parkar Apr 08 '15 at 06:14
can you provide me any good link for that where i can study it and get code for it and have you used it??? – I Love Stackoverflow Apr 08 '15 at 06:17
@MariaPithia do read this http://stackoverflow.com/questions/21375073/best-way-to-represent-a-grid-or-table-in-angularjs-with-bootstrap-3 – Pankaj Parkar Apr 08 '15 at 06:18
i have already checked that link but the answer on it is saying that smart table is good but i have checked and i didnt like it as because there is no good ui and sorting and filtering capability in it – I Love Stackoverflow Apr 08 '15 at 06:21
1

the link you have given there it is saying smart table.what would you say about it?? – I Love Stackoverflow Apr 08 '15 at 06:32
Simply if you are caring about UI, want it impressive then go for `ui-grid` otherwise go for `Smart Table` which is not that much good in UI – Pankaj Parkar Apr 08 '15 at 06:35
personally I'd prefer `ui-grid` in terms of UI & good github support on issues – Pankaj Parkar Apr 08 '15 at 06:43
why you dont prefer kendo ui as though it is having a good ui design ??any performance issue with kendo grid?? – I Love Stackoverflow Apr 08 '15 at 06:49
@MariaPithia Initially i tried with it..& found angular variable binding issue with it..May be I missed something in it..but still I don't prefer kendo – Pankaj Parkar Apr 08 '15 at 06:52

score 1 · Answer 3 · answered Apr 06 '15 at 13:37

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

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

3 Answers3