Demo - FlexGrid

by Troy Taylor

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/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>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.filter.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.gauge.min.js"></script>
<div class="container">

  <h1>
    FlexGrid
  </h1>

  <div>
    <p>
      The FlexGrid automatically aligns content when the <b>align</b> property of a Column is not set; numbers are right-aligned, boolean values are centered, and all others are left-aligned. In order to mix up the alignment on specific cells in a column,
      we need to dynamically update the format of the cell. We can do this using the <b>itemFormatter</b> function.
    </p>
  </div>
  <div>
    <p>
      The <b>Downloads(k)</b> column has a centered Column Header and right-aligned content in the cells.</p>
  </div>

  <div id="gridCols">
  </div>

</div>

CSS

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

JavaScript

onload = function() {

  var firstCountry = 'US,Canada,Mexico'.split(',');
  var secondCountry = 'UK,Germany,Spain'.split(',');
  var firstData = [];
  var secondData = [];
  var movedRows = [];
  for (i = 0; i < 3; i++) {
    firstData.push({
      id: i, country: firstCountry[i], active: true
    });
    secondData.push({
      id: i, country: secondCountry[i], active: false
    });
  }

  var firstView = new wijmo.collections.CollectionView(firstData);
  var secondView = new wijmo.collections.CollectionView(secondData);

  var firstDiv = document.getElementById('firstGrid');
  var secondDiv = document.getElementById('secondGrid');


  var firstGrid = new wijmo.grid.FlexGrid(firstDiv, { 
    columns: [
      { binding: 'id', header: 'Country ID' },
      { binding: 'country', header: 'Country Name' },
      { binding: 'active', header: 'Active' },
    ],
    autoGenerateColumns: false,
    itemsSource: firstView,
  });
  var secondGrid = new wijmo.grid.FlexGrid(secondDiv, { 
    columns: [
      { binding: 'id', header: 'Country ID' },
      { binding: 'country', header: 'Country Name' },
      { binding: 'active', header: 'Active' },
    ],
    autoGenerateColumns: false,
    itemsSource: secondView,
          });

}