Wijmo 5 - Filtered DataMap

by Joel Parks

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>Dynamic DataMap</h1>

  <p>
    This grid overrides the <b>getDisplayValues</b> method of the
    "Cities" <b>DataMap</b> to show only cities in the row's country:</p>

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

CSS

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

JavaScript

onload = function() {

  // create data maps
  var parentCountryId;
  var listOfCountries = [
  	{ id: 0, name: 'US' },
	  { id: 1, name: 'Germany' },
	  { id: 2, name: 'UK' },
	  { id: 3, name: 'Japan' },
	  { id: 4, name: 'Italy' },
	  { id: 5, name: 'Greece' }
  ];
  var listOfCities = [
  	{ 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' },
    { id: 6, country: 2, name: 'London' },
    { id: 7, country: 2, name: 'Oxford' },
    { id: 8, country: 2, name: 'Bath' }, 
    { id: 9, country: 3, name: 'Tokyo' },
    { id: 10, country: 3, name: 'Sendai' }, 
    { id: 11, country: 3, name: 'Kobe' },
    { id: 12, country: 4, name: 'Rome' },
    { id: 13, country: 4, name: 'Florence' },
    { id: 14, country: 4, name: 'Milan' },
    { id: 15, country: 5, name: 'Athens' },
    { id: 16, country: 5, name: 'Santorini' },
    { id: 17, country: 5, name: 'Thebes' }
  ]
  var countryMap = new wijmo.grid.DataMap(listOfCountries, 'id', 'name');
  var cityMap = new wijmo.grid.DataMap(listOfCities, 'id', 'name');
  
  var gridInitialized = false;

	// 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,
    allowAddNew: true,
    columns: [
	    { binding: 'country', header: 'Country', dataMap: countryMap },
	    { binding: 'city', header: 'City', dataMap: cityMap },
	    { binding: 'downloads',...