Displaying FlexGrid Filter Values in UTC in Angular

Background

When a FlexGrid column contains date-time values, the grid cells can be displayed in UTC with a cell template. However, the Excel-style filter menu may still show the raw date values. To display the filter value list in UTC as well, assign a DataMap to the date column’s ColumnFilter.

Steps to Complete

1. Install and import the required Wijmo packages.
2. Prepare the date-time values as JavaScript Date objects.
3. Create a reusable UTC formatter.
4. Display the FlexGrid date column in UTC.
5. Add wj-flex-grid-filter.
6. Assign a UTC DataMap to the date column filter.

Getting Started

Install and import the required Wijmo packages

npm install @mescius/wijmo.angular2.grid @mescius/wijmo.angular2.grid.filter @mescius/wijmo.grid @mescius/wijmo.styles

In styles.css, import the Wijmo stylesheet:

@import '@mescius/wijmo.styles/wijmo.css';

In app.component.ts, import the Angular grid modules and DataMap:

import { Component } from '@angular/core';
import { WjGridModule } from '@mescius/wijmo.angular2.grid';
import { WjGridFilterModule, WjFlexGridFilter } from '@mescius/wijmo.angular2.grid.filter';
import { DataMap } from '@mescius/wijmo.grid';

• WjGridModule provides the Angular FlexGrid components, WjGridFilterModule provides wj-flex-grid-filter, and DataMap lets the filter editor show UTC display text for raw date values.

Prepare the date-time values as JavaScript Date objects

rawData = [
  {
    id: 1,
    task: 'Order created',
    startTime: '2026-06-25T09:30:00+08:00'
  },
  {
    id: 2,
    task: 'Order shipped',
    startTime: '2026-06-25T14:00:00+08:00'
  }
];

data = this.rawData.map(item => ({
  ...item,
  startTime: new Date(item.startTime)
}));

• The +08:00 offset identifies the source values as SGT. Converting them to Date objects preserves the correct instant in time for filtering and UTC display.

Create a reusable UTC formatter

utcFormatter = new Intl.DateTimeFormat('en-GB', {
  year: 'numeric',
  month: '2-digit',
  day: '2-digit',
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit',
  hour12: false,
  timeZone: 'UTC',
  timeZoneName: 'short'
});

formatUtc(value: Date | string | null): string {
  if (!value) {
    return '';
  }

  const date = value instanceof Date ? value : new Date(value);
  return Number.isNaN(date.getTime()) ? '' : this.utcFormatter.format(date);
}

• The formatter uses timeZone: 'UTC', so both grid cells and filter values can use the same UTC display format.

Display the FlexGrid date column in UTC

<wj-flex-grid [itemsSource]="data" [autoGenerateColumns]="false">
  <wj-flex-grid-column [header]="'ID'" [binding]="'id'" [width]="70">
  </wj-flex-grid-column>

  <wj-flex-grid-column [header]="'Task'" [binding]="'task'" [width]="'*'">
  </wj-flex-grid-column>

  <wj-flex-grid-column [header]="'Start Time (UTC)'" [binding]="'startTime'" [width]="220">
    <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell">
      {{ formatUtc(cell.item.startTime) }}
    </ng-template>
  </wj-flex-grid-column>
</wj-flex-grid>

• The column remains bound to startTime, but the cell template displays the value in UTC.

Add wj-flex-grid-filter

<wj-flex-grid [itemsSource]="data" [autoGenerateColumns]="false">
  <wj-flex-grid-filter (initialized)="initializeFilter($event)"></wj-flex-grid-filter>

  <!-- columns here -->
</wj-flex-grid>

• The initialized event gives access to the WjFlexGridFilter instance after Angular creates it. Use that event to configure the date column’s filter display.

Assign a UTC DataMap to the date column filter

initializeFilter(filter: WjFlexGridFilter): void {
  const utcMap = this.createUtcDateMap('startTime');
  const columnFilter = filter.getColumnFilter('startTime', true);

  columnFilter.dataMap = utcMap;
}

createUtcDateMap(field: 'startTime'): DataMap {
  const uniqueDates = new Map<number, Date>();

  this.data.forEach(item => {
    const value = item[field];

    if (value instanceof Date && !Number.isNaN(value.getTime())) {
      uniqueDates.set(value.getTime(), value);
    }
  });

  const mapItems = Array.from(uniqueDates.values()).map(date => ({
    value: date,
    caption: this.formatUtc(date)
  }));

  return new DataMap(mapItems, 'value', 'caption');
}

• The DataMap uses the original Date as the key and the UTC text as the display value. Assigning it to columnFilter.dataMap makes the filter editor show UTC-formatted values.

With this Angular setup, FlexGrid displays the date column in UTC and also shows UTC-formatted values in the filter editor. The grid still filters against the original Date values, while the DataMap controls how those values appear to users.

Happy coding!