Flexgrid Angular - Sorting Columns by friendly names

Flexgrid Angular - Sorting Columns by friendly names

Posted by: andrewalisa on 20 July 2021, 10:43 am EST

• 

  andrewalisa

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 20 July 2021, 10:43 am EST - Updated 3 October 2022, 1:12 pm EST

  Hello!

  I am trying to sort my Wijmo FLexgrid. I did the obvious with the: [allowSorting]=“‘SingleColumn’” but I am having a couple of issues. For what it is worth, I am using Angular 9, and I am using client pagination.

  * “Issue 1: We are rendering null as “All Counties” and this messes up the sort”
  
  

  For one of my columns, if a value is null, then we render the value “All Counties”. When this is sorted, the “All Products” value shows up in the bottom of the sort, because behind the scenes that value is actually “Null”.
  
  I want the value “All Counties” to sort alphabetically like normal OR I am curious if it is possible to have All Counties sort to the top. The current requirement is for me to sort All Counties as alphabetical (So it doesn’t go to the bottom of the list), but if you can provide both solutions (the alphabetical sort, and having “All Counties” sort to the top") that would be great
  
  Please see the following code example:

      <wj-flex-grid-column [header]="'County'" [isReadOnly]="true" [binding]="'county'" [width]="200">
        <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell">
          {{
            cell.item.countyFIPSCode === null
              ? 'All Counties'
              : countiesTypesMap && countiesTypesMap[cell.item.countyFIPSCode]
              ? countiesTypesMap[cell.item.countyFIPSCode].name
              : cell.item.countyFIPSCode
          }}
        </ng-template>
      </wj-flex-grid-column>
  

  * “Issue 2: One of my columns won’t even sort”
  
  
  
  I have a column called "Average Price’ and behind the scenes, this column can be a currency value (such as $5.50) or it can display the value “N/A”

  

  For some reason, this column will not sort at all. I can put the code example. I am suspecting it’s not sorting because it needs the entire current “View” to sort properly.

  Here are the code examples for this column:

  component.html:

      <wj-flex-grid-column
        *ngIf="partnerTypeID === notaryID"
        [header]="'Average Price'"
        [isReadOnly]="true"
        [width]="'1.1*'"
        [cssClass]="'right'"
      >
        <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell">
          {{ getAveragePrice(cell.item.countyFIPSCode) }}
        </ng-template>
      </wj-flex-grid-column>
  

  component.ts:

    public getAveragePrice(countyFIPSCode: string): string {
      return this.getAverageMaximumHelper(countyFIPSCode, (amp) => amp.averagePrice);
    }
  

    getAverageMaximumHelper(countyFIPSCode: string, memberGetter: (amp: SigningAgentServiceAreaAverageMaximumPriceInfo) => number) {
      if (this.signingAgentAverageMaximumPrices == null) {
        return '';
      }
      const averageMaximumPrices = this.signingAgentAverageMaximumPrices.find((p) => p.countyFIPSCode === countyFIPSCode);
      if (averageMaximumPrices == null || memberGetter(averageMaximumPrices) == null) {
        return 'N/A';
      }
      return this._currency.transform(memberGetter(averageMaximumPrices), 'USD', 'symbol', '1.2');
    }
  

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 23 July 2021, 12:28 am EST

  Hi,

  1). The observed behavior is by design, collectionView exposes a sortNulls property to customize the null position in sorted collection. By default, it is set to ‘Last’ , which causes null values to appear last on the sorted collection, regardless of sort direction. This is also the default behavior in Excel. You may change this property to ‘First’ (which causes null values to appear First on the sorted collection) or ‘Natural’ (which causes null to sort in natural order i.e. first in ascending, last in descending order)as per your requirement.
  
  API Reference - https://www.grapecity.com/wijmo/api/classes/wijmo.collectionview.html#sortnulls
  
  To implement custom null sort behaviour, You may make use of sortConverter method CollectionView as follows -

  sortConverter: (sd, item, value) => {
          if (sd.property === 'country') {
            return value ? value : 'All Countries';
          }
          return value;
        }
  

  You may also refer to the following sample: https://stackblitz.com/edit/angular-bdeuxr?file=src%2Fapp%2Fapp.component.ts

  2). In the provided code snippet, We could observe that binding property is missing, For sorting to work correctly, column needs to be bounded to some value that is used for sorting. Please make sure that binding property is set for the columns and let us know if the issue persists for you.

  ~sharad