計算フィールドにはプロキシが必要になります。 IE11で使用する場合は、 https://www.npmjs.com/package/proxy-polyfill のようなポリフィルを使用します。

計算フィールドは、外部データを扱う場合に役立ちます。 たとえば、1人当たりの収入フィールド（gnp/pop）または利益フィールド（収益-経費）を追加できます。

計算フィールドは動的です。 計算で使用されるフィールドを変更すると、それらの値は自動的に更新されます。 また、読み取り専用です。 それらの計算に使用されるプロパティの値を変更することはできますが、結果を直接編集することはできません。

FlexGrid cellTemplatesとは異なり、計算フィールドは並べ替え、フィルタリング、およびグループ化に使用できます。 また、チャートやその他のWijmoコントロールで使用することもできます。

計算フィールドは、データ項目を引数または文字列として受け取る関数として定義できます。

以下に例を示します。

// 通常のデータ項目
interface IDataItem {
      product: string,
      brand: string,
      unitPrice: number,
      qty: number,
      shipped: boolean
}
function getData(): IDataItem[] {
    return [
        {
            product: 'Banana',
            brand: 'Chiquita',
            unitPrice: 45.95,
            qty: 12,
            discount: .08,
            shipped: true
        }, ...
    ]
}

次のように関数ベースの計算フィールドを追加できます。

// 計算プロパティをIDataItemに追加します
interface ICalcDataItem extends IDataItem {
    fullName: string;
    allCaps: string;
    totalPrice: number,
    tax: number;
}

let cv = new CollectionView<ICalcDataItem>(getData(), {
    calculatedFields: {
        fullName: ($: ICalcDataItem) => [$.brand, $.product].join(' '),
        allCaps: ($: ICalcDataItem) => $.fullName.toUpperCase(),
        totalPrice: ($: ICalcDataItem) => ($.unitPrice * $.qty) * (1 - $.discount),
        tax: ($: ICalcDataItem) => $.totalPrice * 0.12
    }
});

関数ベースの計算フィールドは、次の理由により、通常、文字列ベースの計算フィールドよりも優れています。

1）設計時のエラーチェックとコマンド補完を提供します。 2）実行速度が速い 3）コンテンツセキュリティポリシー（CSP）に関する問題はありません。

あるいは、文字列ベースの計算フィールドを追加することもできます。

let cv = new CollectionView<IDataItem>(getData(), {
  calculatedFields: {
    fullName: '[$.brand, $.product].join(" ")',
    allCaps: '$.fullNameStr.toUpperCase()',
    totalPrice: '($.unitPrice * $.qty) * (1 - $.discount)',
    tax: '$.totalPrice * 0.12'
});

文字列式は、 項目の元の値と計算された値を含む コンテキスト変数「$」により、現在の項目を参照できます。 文字列ベースの計算フィールドには、関数ベースの計算フィールドよりも利点があり、場合によっては重要になることがあります。 いくつかの利点は次のとおりです。

1）少し簡潔です 2）データとして保存でき、実行時に簡単に変更できます。

このプロパティは、常に適用されるfiltersプロパティには影響しません。

オブジェクトのキーはフィールド名を表し、値はそのデータをどのように型変換するかを示すDataType 値を表します。以下のサンプルコードは、 ODataCollectionView を作成した後、（データベースに文字列として格納されている）'Freight'の値を数値に変換し、さらに3つの日付フィールドを日付に変換します。

import { ODataCollectionView } from '@grapecity/wijmo.odata';
import { DataType } from '@grapecity/wijmo';
const url = 'http://services.odata.org/V4/Northwind/Northwind.svc/';
const orders = new ODataCollectionView(url, 'Orders', {
  dataTypes: {
    Freight: DataType.Number
    OrderDate: DataType.Date,
    RequiredDate: DataType.Date,
    ShippedDate: DataType.Date,
  }
});

このプロパティは、データベースに格納されているデータの書式が一般的な用法に適合していない場合に役立ちます。 inferDataTypes プロパティによってDate値の変換が自動的に処理されるため、ほとんどの場合、データ型に関する情報を提供する必要はありません。 明示的に型情報を提供した場合、inferDataTypes プロパティは適用されません。 そのため、データ型の情報を提供する場合は、Date型のフィールドも含め、 すべてのフィールドの型情報を提供する必要があります。

このプロパティのデフォルト値は falseです。これにより、 データへの変更はデータベースにすぐにコミットされます。

このプロパティを trueに設定すると、 自動的に trackChanges プロパティがtrueに設定されます。 この後、データへの変更（編集、追加、削除など）は追跡されますが、 commitChanges メソッドを呼び出して変更をコミットするか、 cancelChanges メソッドを呼び出して保留中の変更を破棄するまで、 データベースにコミットされません。

以下に例を示します。

import { ODataCollectionView } from '@grapecity/wijmo.odata';

// データソースを作成します
let url = 'https://services.odata.org/...';
let view = new ODataCollectionView(url, 'Categories', {
    keys: [ 'ID' ]
});

// コミットされたコンテンツを延期します
view.deferCommits = true;

// コミット/キャンセル変更ボタンを処理します
let btnCommit = document.getElementById('btn-commit') as HTMLButtonElement,
    btnCancel = document.getElementById('btn-cancel') as HTMLButtonElement;
btnCommit.addEventListener('click', () => view.commitChanges());
btnCancel.addEventListener('click', () => view.cancelChanges());
view.hasPendingChangesChanged.addHandler((s, e) => {
   btnCommit.disabled = btnCancel.disabled = !view.hasPendingChanges;
});

一部のODataサービスでデータを更新する必要があります。詳細について、以下のリンクを参照してください。 http://docs.oasis-open.org/odata/odata-json-format/v4.0/cs01/odata-json-format-v4.0-cs01.html#_Toc365464687。

このプロパティは直接ODataの$expandオプションにマップされます。

たとえば、次のコードは、すべての顧客とその注文をデータベースから取得します。 各顧客エンティティには、注文オブジェクトの配列を含む[Orders]フィールドが含まれています。

import { ODataCollectionView } from '@grapecity/wijmo.odata';
const url = 'http://services.odata.org/V4/Northwind/Northwind.svc/';
const customersOrders = new ODataCollectionView(url, 'Customers', {
  expand: 'Orders'
});

このプロパティがnullまたは空の配列に設定されている場合は、 すべてのフィールドが 取得されます。

たとえば、以下のコードは、データベースの'Categories'テーブルから3つの フィールドのみを取得する ODataCollectionView を作成します。

import { ODataCollectionView } from '@grapecity/wijmo.odata';
const url = 'http://services.odata.org/V4/Northwind/Northwind.svc/';
const categories = new ODataCollectionView(url, 'Categories', {
  fields: ['CategoryID', 'CategoryName', 'Description']
});

パラメータとして渡された項目を画面に表示する必要がある場合、コールバックはtrueを返します。

このプロパティのデフォルト値はnullです。これは、データがフィルタリングされないことを意味します。

フィルタ定義構文については、ODataドキュメントを参照してください。たとえば、以下のコードでは、 'CompanyName'フィールドが'A'で始まり'S'で終わるレコードがサーバーから返されます。

view.filterDefinition = "startswith(CompanyName, 'A') and endswith(CompanyName, 'B')";

フィルタ定義は自動生成することができます。 たとえば、FlexGridFilter コンポーネントは、データソースがODataCollectionView かどうかを検出し、 ODataCollectionView.filter プロパティとODataCollectionView.filterDefinition プロパティの両方を自動的に更新します。 ODataCollectionView.filterDefinition プロパティは、ODataCollectionView.filterOnServer プロパティがfalseに設定されている場合でも 適用されることに注意してください。 これにより、同じコレクションに対してサーバーフィルタとクライアントフィルタの両方を適用でき、 さまざまなシナリオで役立ちます。 たとえば、次のコードは、ODataCollectionView.filterDefinition プロパティを使用してサーバーでフィルタ処理を実行し、 ODataCollectionView.filter プロパティを使用してクライアントでさらにフィルタ処理を実行します。 結果のコレクションには、名前が'C'で始まり、単価が20より大きい項目が表示されます。

import { ODataCollectionView } from '@grapecity/wijmo.odata';
const url = 'http://services.odata.org/V4/Northwind/Northwind.svc/';
const data = new ODataCollectionView(url, 'Products', {
  oDataVersion: 4,
  filterDefinition: 'startswith(ProductName, \'C\')', // サーバー側のフィルタ
  filterOnServer: false, // クライアント側のフィルタ
  filter: function(product) {
    return product.UnitPrice > 20;
  },
});

ビューに含めるには、アイテムはfilterプロパティとfiltersコレクション内のすべての述語を渡す必要があります。

メソッドは、データ項目をパラメータとして、検証されるプロパティ、およびデータが既に解析されてデータ項目に適用されているかどうか（parsing == false）またはユーザーが値を編集しようとして予期されたデータ型に解析できない値を入力したかどうかを記述する解析パラメータ（parsing == true）を受け取ります。

このメソッドは、エラーメッセージを含む文字列を返します。エラーが検出されなかった場合はnullを返します。

次に例を示します。

view = new CollectionView(data, {
    getError: (item: any, prop: string, parsing: boolean) => {

        // 「解析に失敗しました」メッセージを表示します。
        if (parsing) {
            if (prop == 'date') {
                return 'Please enter a valid date in the format "MM/dd/yyyy"';
            } else if (prop == 'id') {
                return 'Please enter a positive number';
            }
        }

        //  保存（解析）されたデータが有効であることを確認します。
        if (prop == 'date' && item.date < minDate) {
            return 'Please enter a date after ' + Globalize.formatDate(minDate, 'd');
        } else if (prop == 'id' && item.id < 0) {
            return 'Please enter a positive number';
        }
    }
});

詳細については、deferCommits プロパティ、commitChanges および cancelChanges メソッドも参照してください。

ODataCollectionView クラスは、DateオブジェクトをサポートしていないJSON形式を 使用するため、 このプロパティはデフォルトでtrueに設定されます。

dataTypes プロパティを使用して特定のタイプ情報を指定する場合、このプロパティは無効になります。

このプロパティを使用して、進捗状況インジケータを提供できます。

提供されている場合、関数は2つのパラメータ（キーおよび値）があり、 解析された値（元の値と同じ値の場合があります）を返さなければなりません。

reviver関数の詳細については、JSON.parse メソッドを参照してください。

更新操作（追加/削除/完全削除）にはキーフィールドが必要です。

作成関数が提供されない場合、CollectionView は、適切な型の項目を 初期化せずに作成しようとします。

作成関数が提供される場合、その関数は、パラメータを受け取らず、 コレクションに対して適切な型のオブジェクトを初期化して返す 必要があります。

現在、ODataサービスには1.0～4.0の4つのバージョンがあります。 最新サービスではバージョン4.0が使用されていますが、 レガシーサービスも依然として数多く運用されています。

利用するサービスが実装しているODataのバージョンがわかっている場合は、 ODataCollectionView を作成するときに、 oDataVersion プロパティを適切な値（1～4）に設定します（以下の例を参照）。

import { ODataCollectionView } from '@grapecity/wijmo.odata';
let url = 'https://services.odata.org/Northwind/Northwind.svc';
let categories = new ODataCollectionView(url, 'Categories', {
  oDataVersion: 1.0, // legacy OData source
  fields: ['CategoryID', 'CategoryName', 'Description'],
  sortOnServer: false
});

利用するサービスが実装しているODataのバージョンがわからない場合 （おそらく、 ODataエクスプローラアプリケーションを記述している場合）には、 バージョンは指定しないでください。 その場合、 ODataCollectionView この情報をサーバーから取得します。この操作には追加のリクエストが必要ですが、 サービスURLあたり1回だけなので、オーバーヘッドは大きくありません。

このプロパティはデフォルトで true に設定されます。これにより、 編集が完了した後にコレクションが常に正しくソート、フィルタリング、およびグループ化されるようにします。

false に設定する場合、アイテムの編集時に更新を遅延されます。 この場合、ソート、フィルタリング、およびグループ化の基準が変更されるか、 またはExcelと同様にrefresh メソッドが呼び出されるまで、コレクションは更新されません。

このプロパティは、認証が必要なシナリオでよく使用されます。 次に例を示します。

import { ODataCollectionView } from '@grapecity/wijmo.odata';
const url = 'http://services.odata.org/V4/Northwind/Northwind.svc/';
const categories = new ODataCollectionView(serviceUrl, 'Categories', {
  fields: ['Category_ID', 'Category_Name'],
  requestHeaders: { Authorization: db.token }
});

指定された場合、ソート比較関数は、パラメータとして任意の型の値を 2つ取り、最初の値が2番目の値と比べて小さい、等しい、または大きい のいずれであるかを示す値-1、0、または+1を返します。ソート比較関数がnullを返す場合は、標準の組み込み比較子が使用されます。

このsortComparer プロパティを使用すると、カスタム比較アルゴリズムを 提供でき、単純な文字列比較より、ユーザーが期待する結果によく 一致するソートシーケンスが得られる場合があります。

たとえば、 Dave Koele's Alphanum algorithmを参照してください。 このアルゴリズムは、文字列を文字列や数値から成る部分に分割した後、 数値部分は値順に、文字列部分はASCII順にソートします。 Daveは、この結果を「自然なソート順」と呼んでいます。

次の例は、sortComparer プロパティの一般的な使用方法を示します。

import { CollectionView, isString } from '@grapecity/wijmo';

// カスタムソート比較子を使用してCollectionViewを作成します
const view = new CollectionView(data, {
    sortComparer: (a: any, b: any) => {
        return isString(a) && isString(b)
            ? alphanum(a, b) // 文字列に使用するカスタム比較子
            : null; // 文字列以外にはデフォルトの比較子を使用します
    }
});

次の例は、 Intl.Collator を使用してソート順を制御する方法を示しています。

import { CollectionView, isString } from '@grapecity/wijmo';

// Intl.Collatorを使用してソートするCollectionViewを作成します
const collator = window.Intl ? new Intl.Collator() : null;
let view = new CollectionView(data, {
    sortComparer: (a, b) => {
        return isString(a) && isString(b) && collator
            ? collator.compare(a, b) // 文字列に使用するカスタム比較子
            : null; // 文字列以外にはデフォルトの比較子を使用します
    }
});

指定されている場合、この関数は、SortDescription、データ項目、および変換する値をパラメーターとして受け取り、 変換後の値を返す必要があります。

このプロパティはソートの動作をカスタマイズする手段を提供します。 たとえば、 FlexGrid コントロールはこのプロパティを使用して、 マップされた列を生の値ではなく表示値を基準にソートします。

以下のサンプルコードは、国コードの整数を含む'country'プロパティをソートするときに、 対応する国名を使用してソートされるようにします。

const countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');
view.sortConverter = (sd: SortDescription, item: any, value: any) => {
    return sd.property === 'countryMapped'
        ? countries[value]; // convert country id into name
        : value;
}

次の例では、2つの値を組み合わせています。 この場合、国でソートすると、ビューが都市ごとに分割されます。

view.sortConverter: (sd: SortDescription, item: any, value: any) => {
    if (sd.property == 'country') {
        value = item.country + '\t' + item.city;
    }
    return value;
}

このプロパティはデフォルトでSortNulls.Lastに設定されます。これにより、コレクションをソートすると、並べ替えの方向に関係なくNULL値が最後に表示されます。 この動作はExcelと同じです。

このプロパティのデフォルト値はfalseに設定されているため、

CollectionViewはどのデータ項目が変更されたかを追跡しません。 このプロパティがtrueに設定されている場合、CollectionView は、

データの変更を追跡し、itemsAdded、itemsRemoved、 itemsEdited の 各コレクションを介して変更を公開します。 変更の追跡は、変更が有効であることをユーザーが確認した後にサーバーを 更新する必要がある場合に役立ちます。

変更をコミットまたはキャンセルしたら、clearChanges メソッドを使用して、

itemsAdded、itemsRemoved、itemsEdited の各コレクションをクリアします。

CollectionView は、適切なCollectionView メソッド（editItem /commitEdit、 addNew /commitNew、remove）を使用して行われた変更だけを追跡します。

データに直接行われた変更は追跡されません。

安定したソートアルゴリズムは、同じキーを持つレコード間の相対的な順序を維持します。 たとえば、「Amount」フィールドを持つオブジェクトのコレクションを考えてみます。 このコレクションを「Amount」でソートする場合、安定したソートでは、 Amount値が同じレコード間で元の順序が保たれます。

このプロパティのデフォルトは false です。この場合は、 高速だが安定ではないJavaScriptの組み込みソートメソッドが CollectionView で使用されます。

useStableSort をtrueに設定すると、すべてのブラウザーで安定したソートが保証されますが、ソート時間が30%～50%も長くなります。

注意：Chromeはバージョン70以降、Firefoxバージョン3以降は安定したソートを提供します。 ES2019の場合 、ソートは安定している必要があります。 ES2018までのECMAScript第1版では、不安定になることが許可されていました。

useStableSortプロパティをtrueに設定すると、すべてのブラウザー（IE11も含む）で安定したソートが保証されますが、ソートにかかる時間が30％～50％増加します。