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

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

  • Posted 29 October 2021, 4:26 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
    <parent component>
    <data-grid [dataGridCV]="dataGridCV" >
    </data-grid>
    </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}})</a>
    </ng-template>
    </wj-flex-grid-column>
    <wj-flex-grid-column [header]="'date'" [binding]="'startdate'" width="*" align="left">
    <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-item="item">
    {{item.startdate| date: startDateFormat}}
    </ng-template>
    </wj-flex-grid-column>
    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
  • Marked as Answer

    Replied 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:


    sortDescriptions
    grid.collectionView.sortDescriptions.push(
    new wjcCore.SortDescription('dateCol', false)
    );

    sortComparer
    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
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels