Sorting of Date(DD-MMM-YYYY)

[Narsimsetty Chalamaiah]

Hi I am getting issue of sorting in  ejs grid.

sorting is not working as expected 

i am sending code,please find below code .

Component.ts

import { Component,ViewChild, OnInit} from '@angular/core';

import { orderDetails } from './data';

import { GroupService, SortService, GridComponent } from '@syncfusion/ej2-angular-grids';

@Component({

    selector: 'app-root',

    templateUrl: 'app.component.html'

})

export class AppComponent {

    public data: Object[] = [];

    public columns: Object[] = [];

  public template: any; 

  @ViewChild('template2')

  public template2: any; 

 

  @ViewChild('grid') public grid: GridComponent;

    ngOnInit(): void {

      

}

  refreshbtnclick(args){

      this.columns = [

         { headerName: "Date", field: "InvDate", visibility: true},

           

      { headerName: "Collector Name", field: "CollectorName", visibility: false },

      { headerName: "Phone No", field: "PhoneNo", visibility: true},

      { headerName: "SSO#", field: "Ssoid", visibility: true},

    

      { headerName: "Customer #", field: "CustomerNo", visibility: true}

      ]

    this.data = [{

     

      InvDate:'24-Jul-2018',

       PhoneNo: " FX:",

             Balance: "0.00",

              CollectorName: "BATHILY, SAMBA",

               Ssoid: "000000000",

                CustomerNo: "123"

     

     

     

      

    }, {

       InvDate:'23-Aug-2019',

       PhoneNo: " FX1:",

             Balance: "1.00",

              CollectorName: "Ramu",

               Ssoid: "111111",

                CustomerNo: "345"

    },{

        InvDate:'13-Nov-2019',

       PhoneNo: " FX1:",

             Balance: "1.00",

              CollectorName: "Hari",

               Ssoid: "22222",

                CustomerNo: "567"

    

    },

    {

        InvDate:'12-Jan-2018',

       PhoneNo: " FX1:",

             Balance: "1.00",

              CollectorName: "Arun",

               Ssoid: "333333",

                CustomerNo: "894"

    

    }

  

  

    ];

    // this.grid.refresh();

  }

}

Html

<button (click)="refreshbtnclick($event)">refresh Grid</button>

<ejs-grid #grid [dataSource]='data' [allowPaging] = 'true'  [allowSorting]='true'>  

            <e-columns> 

      <ng-template #template  ngFor let-column [ngForOf]="columns"> 

             <e-column [field]="column.field"  

                       [allowEditing]="column.allowEditing" 

                       

                       [isPrimaryKey]="column.isPrimaryKey != null ? column.isPrimaryKey : null" 

                       [width] = "column.width" > 

            </e-column> 

       </ng-template> 

    </e-columns> 

    </ejs-grid> 

Attachment: ejsgriddate_fb7655f7.zip

[Narsimsetty Chalamaiah]

Hi I am waiting for response of issue id:158446 from your end.

[Rajapandi Ravi]

Hi Narsimsetty, 

Greetings from syncfusion support 

We have analyzed your query and we could see that you are maintaining date column value as string type. So you have to parse the date value by using DataUtil method in queryCellInfo event. Please refer the below code example for more information. 

export class AppComponent { 

    public data: Object[]; 

    public initialSort: Object; 

    public pageSettings: Object; 

    public columns: any=[]; 

    public key: boolean; 

    constructor( ) { 

         

    } 

    queryCellInfo(args) {  //queryCellInfo event 

      if(args.column.field == "InvDate") { 

        args.data.InvDate = DataUtil.parse.parseJson(new Date(args.data.InvDate)); //you can use this way to convert the date 

      } 

    } 

    public ngOnInit(): void { 

      this.columns = [ 

         { headerName: "Date", type:'date', format: "d MMM y", field: "InvDate", visibility: true}, 

           .  .  .  .  .  .  .  .  . 

      ]; 

    } 

} 

Sample: https://stackblitz.com/edit/angular-ezg5cx-uga8f5?file=app.component.ts 

Regards,
Rajapandi R