v5.20192.631
|

DataMap Class

Represents a data map for use with a column's Column.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.

// bind grid to products
var flex = new wijmo.grid.FlexGrid();
flex.itemsSource = products;
// map CategoryID column to show category name instead of ID
var col = flex.columns.getColumn('CategoryID');
col.dataMap = new wijmo.grid.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) {
     var pairs = [];
     for (var key in enumClass) {
         var val = parseInt(key);
         if (!isNaN(val)) {
             pairs.push({ key: val, name: enumClass[val] });
         }
     }
     return new wijmo.grid.DataMap(pairs, 'key', 'name');
}

Hierarchy

  • DataMap

Constructors

constructor

  • new DataMap(itemsSource: any, selectedValuePath?: string, displayMemberPath?: string): DataMap
  • Initializes a new instance of the DataMap class.

    Parameters

    • itemsSource: any

      An array or ICollectionView that contains the items to map.

    • Optional selectedValuePath: string

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

    • Optional displayMemberPath: string

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

    Returns DataMap

Properties

collectionView

collectionView: ICollectionView

Gets the ICollectionView object that contains the map data.

displayMemberPath

displayMemberPath: string

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

isEditable

isEditable: boolean

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.

selectedValuePath

selectedValuePath: string

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

sortByDisplayValues

sortByDisplayValues: boolean

Gets or sets a value that determines whether to use mapped (display) or raw values when sorting the data.

Methods

getDisplayValue

  • getDisplayValue(key: any): any
  • Gets the display value that corresponds to a given key.

    Parameters

    • key: any

      The key of the item to retrieve.

    Returns any

getDisplayValues

  • getDisplayValues(dataItem?: any): string[]
  • Gets an array with all of the display values on the map.

    Parameters

    • Optional dataItem: any

      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[]

getKeyValue

  • getKeyValue(displayValue: string): any
  • Gets the key that corresponds to a given display value.

    Parameters

    • displayValue: string

      The display value of the item to retrieve.

    Returns any

getKeyValues

  • getKeyValues(): string[]
  • Gets an array with all of the keys on the map.

    Returns string[]

onMapChanged

Events

mapChanged

mapChanged: Event

Occurs when the map data changes.