データマップは、グリッドに自動検索機能を提供します。たとえば、 顧客のIDの代わりに顧客名、RGB値の代わりに色名を 表示できます。

以下のコードは、グリッドを製品のコレクションに連結してから、DataMap をグリッドの'CategoryID'列に割り当てて、グリッドにID自体ではなくカテゴリ名を表示します。

グリッドは、編集にもデータマップを利用します。 wijmo.input モジュールをロードした場合は、データマップされた列の編集時に、マップの値を含むドロップダウンリストが表示されます。

import { FlexGrid, Column } from '@mescius/wijmo.grid';

// グリッドを製品に結合します
let flex = new FlexGrid({
    itemsSource: products
});

// IDの代わりにカテゴリ名を表示するようにCategoryID列をマップします
let col = flex.getColumn('CategoryID');
col.dataMap = new DataMap(categories, 'CategoryID', 'CategoryName');

一般に、データマップは列全体に適用されます。ただし、別の列の値に基づいて、 セルに使用するオプションを制限することもできます。たとえば、"Country"列と"City"列がある場合は、 現在の国に基づいて都市を制限することがよくあります。 このような「動的」データマップを実装する方法は、次の2つあります。

1. DataMap が単なる文字列のリストである場合は、グリッドが編集モードになる 前に変更を加えます。 この場合、セルには表示される文字列が含まれ、 マップを変更しても同じ列の他のセルには影響しません。 次のサンプルに例を示します。 .
2. DataMap が実際のマップの場合（キー値をセル内に格納し、対応する文字列を表示する）は、 ドロップダウンに表示する値を制限するためのフィルタを適用します。 DataMap には同じキーと値が格納されたままなので、 同じ列の他のセルはフィルタの影響を受けません。 次のサンプルに例を示します。 .

場合によっては、列挙を表す DataMap を作成することができます。 上記を実現するには、次のコードを使用できます。

// 指定された列挙型のDataMapを構築します
function getDataMap(enumClass) {
    let pairs = [];
    for (let key in enumClass) {
        var val = parseInt(key);
        if (!isNaN(val)) {
            pairs.push({ key: val, name: enumClass[val] });
        }
    }
    return new DataMap(pairs, 'key', 'name');
}

DataMapは、2つの異なる方法でキーを処理できます。 この機能は、serializeKeysプロパティによって制御されます。 デフォルトでは、キーの値が処理前に文字列に変換されます。 つまり、異なる値は、文字列表現が等しい場合、同じキー値を生成します。 この動作は、優先する動作となります。 キーが複雑なオブジェクトまたは複雑なオブジェクトの配列である場合は、 このモードを変更する必要があります。 詳細については、serializeKeysプロパティのドキュメントを参照してください。