ASP.NET MVC Controls
DataMap Class
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.

// 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.

Constructor

Properties

Methods

Events

Constructor

constructor

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

Initializes a new instance of the DataMap class.

Parameters
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 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

sortByDisplayValues

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

Type
boolean

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
  • dataItem: any 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[]

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

onMapChanged(e?: EventArgs): void

Raises the mapChanged event.

Parameters
Returns
void

Events

mapChanged

Occurs when the map data changes.

Arguments
EventArgs

 

 


Copyright © GrapeCity, inc. All rights reserved.

Product Support Forum |  Documentation Feedback