Wijmo 5 - Filtered DataMap

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/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>
<div class="container">

  <h1>DataMap isEditable</h1>

  <p>
 The below example has two columns editable via inline dropdown. In the "Bad" example, the DataMap has isEditable = false, but users can focus into the City cell editor and manually type in non-datamap values.
 </p>
 <p>
 In the "Good" dropdown, the DataMap has differing key/value field, and does not allow typing in non-datamap values.
 </p>

  <div id="theGrid"></div>
</div>

CSS

.wj-flexgrid {
  max-height: 250px;
}

JavaScript

onload = function() {

  // create data maps
  var countryMap = new wijmo.grid.DataMap(getCountries(), 'id', 'name');
  var cityMap = new wijmo.grid.DataMap(getCities(), 'name', 'name');
  cityMap.isEditable = false;
  var cityMap2 = 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;
  };

	// create and bind the grid
  var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
  	autoGenerateColumns: false,
    columns: [
	    { binding: 'city', header: 'City Bad', dataMap: cityMap },
      { binding: 'cityid', header: 'City Good', dataMap: cityMap2 }
		],
    itemsSource: getData()
	});

  // create some random data
  function getData() {
	  var countries = getCountries(),
    	cities = getCities(),
      data = [];
	  for (var i = 0; i < cities.length; i++) {
	    data.push({
	      country: cities[i].country,
	      city: cities[i].name,
        cityid: cities[i].id,
	      downloads: Math.round(Math.random() * 20000),
	      sales: Math.random() * 10000,
	      expenses: Math.random() * 5000
	    });
	  }
    return data;
  }
	function getCountries() {
  	return [
	  	{ id: 0, name: 'US' },
	    { id: 1, name: 'Germany' },
	    { id: 2, name: 'UK' },
	    { id: 3, name: 'Japan' },
	    { id: 4, name: 'Italy' },
	    { id: 5, name: 'Greece' }
		];
	}
  function getCities() {
  	return [
  		{ id: 0, country: 0, name: 'Washington' },
    	{ id: 1, country: 0, name: 'Miami' },
    	{ id: 2, country: 0, name: 'Seattle' },
    	{ id: 3, country: 1, name: 'Bonn' },
    	{ id: 4, country: 1, name: 'Munich' },
    	{ id: 5, country: 1, name: 'Berlin' },
   ...