Dynamic DataMaps

In some situations, you may want to change the data map used with a column depending on the value of another column. For example, you may want the drop-down in the 'City' column to show only cities in the country that is selected in the current row.

This is not as simple as it may seem, because the maps are used by all cells, not just by the ones being edited. So changing the map values will change the whole grid.

There are two ways to handle this:

• Customized DataMaps: You can override the DataMap's getDisplayValues method to get only values that apply to the current context.

  For example:

  // create data map
  var cityMap = new wijmo.grid.DataMap(getCities(), 'id', 'name');
  // override cityMap's getDisplayValues method to get cities that
  // correspond to the current item
  cityMap.getDisplayValues = function(dataItem) {
    var arr = [],
    cities = getCities(),
    country = theGrid.collectionView.currentItem.country;
    for (var i = 0; i < cities.length; i++) {
      var city = cities[i];
      if (city.country == country) {
        arr.push(city.name);
      }
    }
    return arr;
  };

• String-Only DataMaps: If your data maps contain only array strings, then it is not used as a real map. The cells actually contain the strings stored in the grid, and in this case it is safe to switch data maps before editing cells.

  For example:

  // update cities data map depending on country
  beginningEdit: function(s, e) {
    var col = s.columns[e.col];
    if (col.binding == 'city') {
      switch (s.rows[e.row].dataItem.country) {
        case 'US':
          col.dataMap = ['Washington', 'Miami', 'Seattle'];
          break;
        case 'UK':
          col.dataMap = ['London', 'Oxford', 'Bath'];
          break;
        // ... other countries ...
        default:
          col.dataMap = ['Unknown Country!'];
          break;
      }
    }
  });