Demo - DataMaps

HTML

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

  <h1>
    DataMaps
  </h1>
  <p>
    In many situations, you may want columns to map values so 
    cells display a value that is different from what is 
    actually stored in the grid.</p>
  <p>
    For example, you may have a 'rating' column with values
    ranging from zero to three, and you would like to display
    the strings 'Low', 'Medium', or 'High' instead.</p>
  <p>
    Or maybe you have a 'customer' column that contains the
    customer ID, and you would like to display the customer 
    name instead.</p>
  <p>
    You could accomplish both tasks using the <b>formatItem</b>
    event, but the <b>FlexGrid</b> provides a better alternative:
    <b>DataMaps</b>. If you set a column's <b>dataMap</b> property
    to an instance of a <b>DataMap</b>, the grid will use it to:</p>
  <ul>
    <li>Look up display values for each data item, and</li>
    <li>Provide a drop-down list with valid items when editing
    the cells.</li>
  </ul>
  <p>
    For example, the grid below has a 'Customer' column with a 
    <b>DataMap</b> that associates customer names and IDs.
    The data source contains customer IDs, but the grid shows
    their names instead, and provides a drop-down list for 
    selecting the customer for each item.</p>
  <p>
    The...

CSS

.wj-flexgrid {
  max-height: 200px;
  margin: 12px 0;
}

JavaScript

onload = function() {

  // create some random data
  var countries = 'US,Germany,UK,Japan,Sweden,Norway,Denmark'.split(',');
  var customers = [
  	{ id: 0, name: 'Paul Perkins', address: '123 Main St' }, 
    { id: 1, name: 'Susan Smith', address: '456 Grand Ave' }, 
    { id: 2, name: 'Joan Jett', address: '789 Broad St' }, 
    { id: 3, name: 'Don Davis', address: '321 Shattuck Ave' }, 
	];
  var data = [];
  for (var i = 0; i < countries.length; i++) {
    data.push({
      id: i,
      country: countries[i],
      customer: customers[i % customers.length].id,
      active: i % 5 != 0,
      downloads: Math.round(Math.random() * 200000),
      sales: Math.random() * 100000,
      expenses: Math.random() * 50000
    });
  }

	// create customer data map
  var customerMap = new wijmo.grid.DataMap(customers, 'id', 'name');
  
  // show the data in a grid
  var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
    showAlternatingRows: false,
    autoGenerateColumns: false,
    columns: [
      { binding: 'customer', header: 'Customer', width: '1.5*', dataMap: customerMap },
    	{ binding: 'country', header: 'Country', width: '*', dataMap: countries },
      { binding: 'downloads', header: 'Downloads', width: '*', format: 'n0' },
      { binding: 'sales', header: 'Sales', width: '*', format: 'n0' },
      { binding: 'expenses', header: 'Expenses', width: '*', format: 'n0' }
    ],
    itemsSource: data,
  });

	// show customers as well
	var theGridCustomers = new wijmo.grid.FlexGrid('#theGridCustomers', {
		itemsSource: customers,
    rowEditEnded: function() {
    	theGrid.refresh(); // update customer names on the main grid
    }
	})
}