Sorting Not Working for Date Columns in FlexGrid

Sorting Not Working for Date Columns in FlexGrid

Posted by: nilesh_nichal on 7 July 2025, 2:38 pm EST

• 

  nilesh_nichal

  • Post Options:
  • Link
    Copy

  Posted 7 July 2025, 2:38 pm EST - Updated 7 July 2025, 2:48 pm EST

  Hi team,

  I’m using wj-flex-grid in my Angular app and trying to enable sorting on two date columns: creationDate and lastModifiedDate. Despite setting [allowSorting]=“true” on both columns, clicking the column headers does not sort the data in ascending or descending order.

  HTML

  <wj-flex-grid [itemsSource]="state.gridData$ | async" [selectionMode]="'None'" headersVisibility="Column">
    <wj-flex-grid-column [binding]="'creationDate'" header="Creation Date" [width]="'*'" [allowSorting]="true">
      <ng-template wjFlexGridCellTemplate [cellType]="'ColumnHeader'" let-cell="cell">
        <div>{{ cell.col.header }}</div>
      </ng-template>
      <ng-template wjFlexGridCellTemplate cellType="Cell" let-item="item">
        <div>{{ item.creationDate }}</div>
      </ng-template>
    </wj-flex-grid-column>
    <wj-flex-grid-column [binding]="'lastModifiedDate'" header="Last Modified Date" [width]="'*'" [allowSorting]="true">
      <ng-template wjFlexGridCellTemplate [cellType]="'ColumnHeader'" let-cell="cell">
        <div>{{ cell.col.header }}</div>
      </ng-template>
      <ng-template wjFlexGridCellTemplate cellType="Cell" let-item="item">
        <div>{{ item.lastModifiedDate }}</div>
      </ng-template>
    </wj-flex-grid-column>
  </wj-flex-grid>

  The data for these columns is in string format like 7/725 11.52AM’.
  
  Can add date for eg

  [{creationDate: '2025/4/12 2:20:00',
        lastModifiedDate: '2025/4/12 2:20:00},{ creationDate: '2025/4/12 2:20:00',
        lastModifiedDate: '2025/4/12 2:20:00'}]

  
  
  please give the sample answer in stack blitz in angular so that we can rectify above issue.
  
  Please find the attached screenshot for the reference.

  

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 8 July 2025, 7:31 am EST

  Hi Nilesh,
  
  As per the code snippets you shared, it seems sorting is happening in the grid when the column header is clicked, but the sort icon does not appear on the column header. This happens because a custom cell template is used for the column header cells, which overrides the default content. We suggest removing the cell template from the column header cells if you are not showing any extra content, or you’ll have to add the sort icon manually using the templates. If you want to set some attributes on the cell element for better accessibility, then you can handle the formatItem event for that purpose. Please refer to the sample below for the same.
  
  Another issue that could be occurring is that sorting might not be getting applied correctly, this happens because dates are stored as strings in the data source, hence compared as strings while sorting. To avoid this issue, you can set a ‘sortConverter’ for the grid’s collectionView, which will convert the string dates to actual Date objects before comparing them for sorting. Please refer to the following sample demonstrating the same - https://stackblitz.com/edit/angular-ivy-t3posxc5?file=src%2Fapp%2Fapp.component.ts
  
  In case, you still face this issue, or if there is something we missed, please let us know.
  
  Regards