ASP.NET Core MVC Controls | ComponentOne
In This Topic
    DataMap Class
    In This Topic
    File
    wijmo.grid.js
    Module
    wijmo.grid

    Represents a data map for use with a column's dataMap property.

    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.

    Constructor

    Properties

    Methods

    Events

    Constructor

    constructor

    constructor(itemsSource: any, selectedValuePath?: string, displayMemberPath?: string): DataMap
    

    Initializes a new instance of the DataMap class.

    Parameters
    Optional

    The name of the property that contains the keys (data values).

    The name of the property to use as the visual representation of the items.

    Returns
    DataMap

    Properties

    collectionView

    Gets the ICollectionView object that contains the map data.

    Type
    ICollectionView

    displayMemberPath

    Gets the name of the property to use as the visual representation of the item.

    Type
    string

    isEditable

    Gets or sets a value that indicates whether users should be allowed to enter values that are not present on the DataMap.

    In order for a DataMap to be editable, the selectedValuePath and displayMemberPath must be set to the same value.

    Type
    boolean

    selectedValuePath

    Gets the name of the property to use as a key for the item (data value).

    Type
    string

    serializeKeys

    Gets or sets a value indicating whether key values are converted to strings before use.

    The default value is true.

    This property is set to true by default, which means that for example the keys 123 (number) and ‘123’ (string), two Date objects defining the same date/time, and two different arrays of primitive values (like [1,2,3]), are treated as the equal key pairs and mapped to the same value.

    If to set this property to false, the keys equality will be determined as in the native Map class, that is using the triple-equality (===) operator. This mode is useful if your keys are objects or arrays of objects. Note that in this case DataMap uses the native browser’s Map implementation. Some old mobile browsers, as well as IE9/10, don’t implement the Map interface. In this case DataMap will use its own array based implementation, which can bring serious performance penalties in case of big data arrays.

    Type
    boolean

    sortByDisplayValues

    Gets or sets a value that determines whether grid controls should use mapped (display) or raw (key) values when sorting data in columns that use this DataMap.

    The default value for this property is true.

    Type
    boolean

    Methods

    getDataItem

    getDataItem(key: K): V
    

    Gets the item that corresponds to a given key.

    Parameters
    • key: K

      The key of the item to retrieve.

    Returns
    V

    getDisplayValue

    getDisplayValue(key: K): string
    

    Gets the display value that corresponds to a given key.

    Parameters
    • key: K

      The key of the item to retrieve.

    Returns
    string

    getDisplayValues

    getDisplayValues(dataItem?: V): string[]
    

    Gets an array with all of the display values on the map.

    Parameters
    • dataItem: V
    Optional

    Data item for which to get the display items. This parameter is optional. If not provided, all possible display values should be returned.

    Returns
    string[]

    getFilteredItems

    getFilteredItems(dataItem?: V): any[]
    

    Gets an array with all of the items that is filtered.

    Parameters
    • dataItem: V Optional

      Data item for which to filter. This parameter is optional. If not provided, all items of the collection view should be returned.

    Returns
    any[]

    getKeyValue

    getKeyValue(displayValue: string, html?: boolean): K
    

    Gets the key that corresponds to a given display value.

    Parameters
    • displayValue: string

      The display value of the item to retrieve.

    • html: boolean Optional

      Whether to convert the lookup values from HTML to plain text.

    Returns
    K

    getKeyValues

    getKeyValues(): K[]
    

    Gets an array with all of the keys on the map.

    Returns
    K[]

    onMapChanged

    onMapChanged(e?: EventArgs): void
    

    Raises the mapChanged event.

    Parameters
    Returns
    void

    Events

    mapChanged

    Occurs when the map data changes.

    Arguments
    EventArgs