FlexGrid with Transposed Views

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://test-9c0be.firebaseapp.com/wijmo/styles/wijmo.css">
<script src="https://test-9c0be.firebaseapp.com/wijmo/controls/wijmo.js"></script>
<script src="https://test-9c0be.firebaseapp.com/wijmo/controls/wijmo.input.js"></script>
<script src="https://test-9c0be.firebaseapp.com/wijmo/controls/wijmo.grid.js"></script>
<script src="https://test-9c0be.firebaseapp.com/wijmo/controls/wijmo.grid.filter.js"></script>
<script src="https://test-9c0be.firebaseapp.com/wijmo/controls/wijmo.olap.js"></script>
<div class="container">
  <h1>
    FlexGrid with Transposed Views
  </h1>
  <p>
    We sometimes get requests about <b>transposed</b> grids.</p>
  <p>
    In <b>regular</b> grids, each item is represented by a
    <b>row</b> with columns that represent the item properties.</p>
  <p>
    In <b>transposed</b> grids, each item is represented by a
    <b>column</b> with rows that represent the item properties.</p>
  <p>
    This sample shows how you can create FlexGrid controls with
    transposed views. Most of the work is done by a "transpose" 
    method that creates a new array with proxy objects that 
    represent a transposed view of the original data. 
    The "transpose" method accepts an optional list of properties
    to show in each row and how they should be displayed/edited.</p>
  <p>
    The proxy objects create a live connection between the original
    and transposed items, so if you edit an object in one list, the
    other is updated automatically.</p>

  <h3>
    Small Data
  </h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>
        Regular View
      </h4>
      <div id="theGridSmall"></div>
    </div>
    <div class="col-xs-6">
      <h4>
        Transposed View
      </h4>
      <div id="theGridSmallT"></div>
      <label>
        autoGenerateRows
        <input id="autoSmall" type="checkbox">
      </label>
 ...

CSS

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

.bold-row {
  font-weight: bold;
  font-size: 110%;
}

#theGridTVT {
  max-height: 2000px;
}

#theGridTVT .wj-rowheaders .wj-cell {
  text-transform: uppercase;
  font-size: 80%;
}

#theGridTVT .wj-cell {
  padding: 12px;
  border-bottom: none;
}

#theGridTVT .wj-cell span.rating {
  font-size: 200%;
  color: #e7711b;
}

#theGridTVT img {
  height: 100%;
}

body {
  margin-bottom: 48pt;
}

JavaScript

onload = function() {

  // grids bound to small data source
  var theGridSmall = new wijmo.grid.FlexGrid('#theGridSmall', {
    showAlternatingRows: false,
    showSelectedHeaders: 'All',
    autoGenerateColumns: false,
    columns: getColumnInfoSmall(),
    itemsSource: getDataSmall()
  });
  var theGridSmallT = new wijmo.grid.FlexGrid('#theGridSmallT', {
    showAlternatingRows: false,
    showSelectedHeaders: 'All',
    itemsSource: transpose(theGridSmall.itemsSource, getColumnInfoSmall())
  });
  transposeGrid(theGridSmallT);
  document.getElementById('autoSmall').addEventListener('click', function(e) {
    var rowInfo = e.target.checked ? null : getColumnInfoSmall();
    theGridSmallT.itemsSource = transpose(theGridSmall.itemsSource, rowInfo);
  })

  // grids bound to big data source
  var theGridBig = new wijmo.grid.FlexGrid('#theGridBig', {
    showAlternatingRows: false,
    showSelectedHeaders: 'All',
    autoGenerateColumns: false,
    columns: getColumnInfoBig(),
    itemsSource: getDataBig()
  });
  var theGridBigT = new wijmo.grid.FlexGrid('#theGridBigT', {
    showAlternatingRows: false,
    showSelectedHeaders: 'All',
    itemsSource: transpose(theGridBig.itemsSource, getColumnInfoBig())
  });
  transposeGrid(theGridBigT);
  document.getElementById('autoBig').addEventListener('click', function(e) {
    var rowInfo = e.target.checked ? null : getColumnInfoBig();
    theGridBigT.itemsSource = transpose(theGridBig.itemsSource, rowInfo);
  })

  // grids bound to TV data source
  var theGridTV = new wijmo.grid.FlexGrid('#theGridTV', {
    showAlternatingRows: false,
    showSelectedHeaders: 'All',
    selectionMode: 'Row',
    autoGenerateColumns: false,
    columns: getColumnInfoTV(),
    itemsSource: getDataTV(),
  });
  var theGridTVT = new wijmo.grid.FlexGrid('#theGridTVT', {
    showAlternatingRows: false,
    showSelectedHeaders: 'All',
    headersVisibility: 'Row',
    selectionMode: 'Row',
    isReadOnly: true,
    formatItem: function(s, e)...