Data maps provide the grid with automatic look up capabilities. For example, you may want to display a customer name instead of his ID, or a color name instead of its RGB value.

The code below binds a grid to a collection of products, then assigns a DataMap to the grid's 'CategoryID' column so the grid displays the category names rather than the raw IDs.

The grid takes advantage of data maps also for editing. If the wijmo.input module is loaded, then when editing data-mapped columns the grid will show a drop-down list containing the values on the map.

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

// bind grid to products
let flex = new FlexGrid({
    itemsSource: products
});

// map CategoryID column to show category name instead of ID
let col = flex.getColumn('CategoryID');
col.dataMap = new DataMap(categories, 'CategoryID', 'CategoryName');

In general, data maps apply to whole columns. However, there are situations where you may want to restrict the options available for a cell based on a value on a different column. For example, if you have "Country" and "City" columns, you will probably want to restrict the cities based on the current country.

There are two ways you can implement these "dynamic" data maps:

1. If the DataMap is just a list of strings, you can change it before the grid enters edit mode. In this case, the cells contain the string being displayed, and changing the map won't affect other cells in the same column. This fiddle demonstrates: show me.
2. If the DataMap is a real map (stores key values in the cells, shows a corresponding string), then you can apply a filter to restrict the values shown in the drop-down. The DataMap will still contain the same keys and values, so other cells in the same column won't be disturbed by the filter. This fiddle demonstrates: show me.

In some cases, you may want to create a DataMap to represent an enumeration. This can be done with the following code:

// build a DataMap for a given enum
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 can treat keys in two different ways, this functionality is controlled by the serializeKeys property. By default, key values are converted to strings before processing, that is different values will produce the same key value if their string representations are equal. This is usually the preferred behavior. You maw need to change this mode if your keys are complex objects or arrays of complex objects. See the serializeKeys property documentation for more details.