Wijmo (PureJS) - DataMaps Hide Dropdown Value

by Joel Parks

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.filter.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.gauge.min.js"></script>
<div class="container">

  <h1>Dynamic DataMap</h1>

  <p>
    This grid changes the data map for the "City" column
    depending on the row being edited:</p>
  <div id="theGrid"></div>
</div>

JavaScript

onload = function() {

	// USED TO DETERMINE WHAT LIST IS USED
  // EXCLUDEDCITY DETERMINES WHAT CITY IS LEFT OUT OF THE LIST
	var excludedCity = "Washington";
  if(excludedCity == "Washington")
  	USCityList = ['Miami', 'Seattle', 'Baltimore', 'Philadelphia', 'Boston'];
  else if(excludedCity == "Miami")
  	USCityList = ['Washington', 'Seattle'];
  else
  	USCityList = ['Washington', 'Miami'];

	// create the grid
	var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
    selectionMode: 'Row',
    autoGenerateColumns: false,
    columns: [
    	{ binding: 'country', header: 'Country', dataMap: getCountries() },
      { binding: 'city', header: 'City', dataMap: getCities() },
      { binding: 'downloads', header: 'Downloads' },
      { binding: 'sales', header: 'Sales' }
		],
    itemsSource: getData(),   
    
    // 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 = USCityList;
            break;
          case 'UK':
            col.dataMap = ['London', 'Oxford', 'Bath'];
            break;
          case 'Japan':
            col.dataMap = ['Tokyio', 'Sendai', 'Kobe'];
            break;
          case 'Greece':
            col.dataMap = ['Athens', 'Santorini', 'Thebes'];
            break;
          case 'Germany':
            col.dataMap = ['Bonn', 'Munich', 'Kiel'];
            break;
          case 'Italy':
            col.dataMap = ['Rome', 'Florence', 'Milan'];
            break;
          default:
            col.dataMap = ['Unknown Country!'];
            break;
        }
      }
    }
	});

  // some random data
  function getCountries() {
    return 'US,Germany,UK,Japan,Italy,Greece'.split(',');
  }
  function getCities() {
    return 'Washington,Bonn,London,Tokyo,Rome,Athens'.split(',');
  }
  function getData() {
    var countries = getCountries(),
     ...