Exclude Pinned Rows While Sorting in Angular

Background:

By default, the standard sort functionality of Wijmo FlexGrid when clicking on a column header sorts the entire grid. Sometimes users want particular rows to remain pinned or frozen at the top and not be affected by sorting. In Angular, you can accomplish this by providing a custom sort converter that excludes pinned rows from the sort logic.

Steps to Complete:

1. Provide a custom sortConverter function on the grid’s CollectionView.
2. Ensure that a unique identifier is present on the data items for the pinned rows.

Getting Started:

Provide a custom sortConverter function on the grid’s CollectionView

Assigning a custom sortConverter overrides the default sort behavior and allows you to determine how values are compared for sorting. In our case, the converter will check if a row is pinned and, if so, cause it to always sort to the top (or bottom) based on sort direction, effectively excluding it from normal sorting.

// app.component.ts
import { Component } from '@angular/core';
import * as wjcGrid from '@mescius/wijmo.grid';

@Component({
  selector: 'app-root',
  template: `
    <wj-flex-grid
      #flex
      [itemsSource]="items"
      (initialized)="onGridInitialized(flex)">
    </wj-flex-grid>
  `,
})
export class AppComponent {
  items = getData(); // your data with unique ID & pinned rows

  onGridInitialized(grid: wjcGrid.FlexGrid) {
    grid.collectionView.sortConverter = this.customSortConverter;
  }

  customSortConverter(
    sd: any,
    item: any,
    value: any
  ): any {
    const frozenRowCount = 3; // example count
    // if the item’s ID places it among the pinned rows…
    if (item.id < frozenRowCount) {
      // push pinned rows to top on ascending, or bottom on descending
      return sd.ascending ? -Infinity : Infinity;
    }
    // otherwise use default sort value
    return value;
  }
}

• Here the first three items (id < 3) are treated as pinned.
• The converter checks this condition and returns -Infinity or Infinity, effectively forcing these pinned items to stay at the top on sort.

Ensure that a unique identifier is present on the data items for the pinned rows

The sort converter needs a way to identify which rows are pinned. A simple unique identifier such as an id property makes it possible to easily target pinned rows inside the sort converter.

// Example data
function getData() {
  return [
    { id: 0, country: 'PinnedRow1', value: 100 },
    { id: 1, country: 'PinnedRow2', value: 200 },
    { id: 2, country: 'PinnedRow3', value: 300 },
    { id: 3, country: 'Canada', value: 50 },
    { id: 4, country: 'Germany', value: 150 },
    { id: 5, country: 'Japan', value: 120 },
    // …
  ];
}

With this setup, rows designated as pinned (using a unique data property) remain unaffected when a user sorts the FlexGrid by clicking column headers. Only the non-pinned rows participate in the sort, while pinned rows stay fixed at the top (or bottom, depending on sort order).

Happy coding!