Wijmo (PureJS) - Changing Sorting Order

Dynamic datamap that changes the city dropdown based on the value of the country dropdown.

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 countryMap = new wijmo.grid.DataMap(getCountries(), 'id', 'name');	

	// create and bind the grid
  var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
  	autoGenerateColumns: false,
    columns: [
	    { binding: 'country', header: 'Month', dataMap: countryMap },
	    { binding: 'downloads', header: 'Downloads' },
	    { binding: 'sales', header: 'Sales' }
		],
    itemsSource: getData()
	});
  
  /*var col = theGrid.columns.getColumn('country');
  col.dataMap = new wijmo.grid.DataMap(categories, 'country', 'countryName');*/

  // create some random data
  function getData() {
	  var countries = getCountries(),
      data = [];
	  for (var i = 0; i < countries.length; i++) {
	    data.push({
	      country: countries[i].id,
	      downloads: Math.round(Math.random() * 20000),
	      sales: Math.random() * 10000,
	      expenses: Math.random() * 5000
	    });
	  }
    return data;
  }
  
  //theGrid.columns[0].collectionView.items[1].country = "Jimbo";
  //theGrid.columns[0].collectionView.items[4].country = "Jimjam";
  //console.log(theGrid.columns[0].collectionView.items[1].country);
  //console.log(theGrid.columns.getColumn('country'));
  
  //var nCol = theGrid.columns.getColumn('country');
  //nCol.dataMap = new wijmo.grid.DataMap(getCountries(), 'name', 'id');
  //console.log(nCol.dataMap);
  
  console.log(theGrid.columnLayout);
  
	function getCountries() {
  	return [
	  	{ id: 0, name: 'Jan' },
	    { id: 1, name: 'Feb' },
	    { id: 2, name: 'Mar' },
	    { id: 3, name: 'Apr' },
	    { id: 4, name: 'May' },
	    { id: 5, name: 'Jun' }
		];
	}
}