Date display in descending order with null field of date on top

Date display in descending order with null field of date on top

Posted by: samvarth123 on 29 October 2021, 4:26 am EST

• 

  samvarth123

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 29 October 2021, 4:26 am EST - Updated 3 October 2022, 3:16 am EST

  I have a common component which has a collection to be displayed with descending order (latest on top).
  
  Also if there is no date in an array of objets that should be on top of the latest date. Using angular 6+ and wijmo flexgrid.
  
  This collection is part of 2, 3 pages and we are using the collection and data will be passed from the place where we use this component which has dates
  
  Ex : Could you suggest me a case where one of the object doesn’t have a date and it needs to be on top and the rest of them should be in descending order. My scenario is for one row not having a date and it should be on top and rest of them needs to be in descending order.
  
  This common collection I will be using in multiple components where we populate data from server in parent component like below
  
  parent.ts
  
  this.dataGridCV = new wjcCore.CollectionView((res.data));
  
  parent.html as below
  
  
  
  <data-grid [dataGridCV]=“dataGridCV” >
  
  
  
  </parent component>

  Common component html is as below :
  
  <wj-flex-grid-column [header]=“‘Stream’” [binding]=“‘streamCount’” width=“" align=“left”>
  
  <ng-template wjFlexGridCellTemplate [cellType]=“‘Cell’” let-item=“item”>
  
  <a href [routerLink]=“item.links.stream” queryParamsHandling=“merge”>Documents({{item.streamCount}})
  
  
  
  
  
  <wj-flex-grid-column [header]=“‘date’” [binding]=“‘startdate’” width="” align=“left”>
  
  <ng-template wjFlexGridCellTemplate [cellType]=“‘Cell’” let-item=“item”>
  
  {{item.startdate| date: startDateFormat}}
  
  
  
  
  
  Empty date should be at top and other dates should be in descending order. But I am not able to do that. Attached my example here
  
  

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 31 October 2021, 5:46 pm EST

  Hello,

  As per my understanding, you want to show null date values on the top of the column along with column sort(in descending order) if so then you may use the sortDescriptions ObservableArray of collectionView and push a new SortDescription with setting ascending to false to sort date column in descending order. And to sort the dates with null values on the top, you would be required to use the sortComparer property of the CollectionView. Please refer to the code snippet and sample link below for reference:

  
  [b]sortDescriptions[/b]
  grid.collectionView.sortDescriptions.push(
        new wjcCore.SortDescription('dateCol', false)
      );
  
  [b]sortComparer[/b]
  this.source.sortComparer = function (a, b) {
        if (a === null) {
          return 1;
        } else if (b === null) {
          return -1;
        }
      };
  
  
  

  sample link: https://stackblitz.com/edit/angular-bht7az?file=src%2Fapp%2Fapp.component.ts

  Regards