Demo - FlexGrid Advanced Features

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/themes/wijmo.theme.material.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.1.0/css/flag-icon.css">
<div class="container">
  <h1>
    FlexGrid Advanced Features
  </h1>
  <p>
    The FlexGrid control is small, fast, robust, and full-featured.
    This example shows a material-themed grid with
    <b><span id="rowCount"></span></b> rows and links that allow
    you to explore some of the grid's advanced features.
  </p>
  <div class="row">
    <div class="col-xs-8">
      <div id="theGrid"></div>
    </div>
    <div id="links" class="col-xs-4">
      <a id="customCellsOn" href="">Customize Cell Content</a>
      <a id="customCellsOff" href="">Plain Cell Content</a>
      <p></p>
      <a id="freezeCol" href="">Freeze first column</a>
      <a id="freezeRow" href="">Freeze first row</a>
      <a id="freezeOff" href="">Unfreeze all</a>
      <p></p>
      <a id="autoSizeColumns" href="">Auto-Size columns</a>
      <a id="starSizeColumns" href="">Star-Size Columns</a>
      <p></p>
      <a id="saveLayout" href="">Save column layout</a>
      <a id="loadLayout" href="">Load column layout</a>
      <a id="resetLayout" href="">Reset column layout</a>
      <p></p>
      <a id="allHeaders" href="">Show All Headers</a>
      <a id="columnHeaders" href="">Show Column Headers</a>
      <a id="noHeaders" href="">Show No Headers</a>
      <p></p>
      <a id="mergedHeaderOn" href="">Add Merged Headers</a>
      <a id="mergedHeaderOff" href="">Remove Merged Headers</a>
      <p></p>
     ...

CSS

.wj-flexgrid {
  height: 350px;
}
.wj-flexgrid .wj-cells .wj-cell:not(.wj-frozen-col),
.wj-flexgrid .wj-colheaders .wj-cell:not(.wj-frozen-col) {
  border-right: none;
}
.wj-flexgrid .wj-cell .wj-btn.wj-btn-glyph {
  opacity: .5;
}

.wj-cell.merged-headers {
  text-align: left;
}
.wj-cell.bad-value:not(.wj-state-selected):not(.wj-state-multi-selected) {
  color: red;
}
.wj-cell.good-value:not(.wj-state-selected):not(.wj-state-multi-selected) {
  color: green;
}

#links a {
  display: block;
  font-size: 90%;
}

.hidden {
  display: none;
}

body {
  font-size: 16px;
  margin-bottom: 48pt;
}

JavaScript

onload = function() {

  // create the grid
  var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
    stickyHeaders: true,
    autoGenerateColumns: false,
    showAlternatingRows: false,
    showSelectedHeaders: 'All',
    deferResizing: true,
    itemsSource: getData(10000),
    columns: [
    	{ header: 'ID', binding: 'id', width: 80, isReadOnly: true },
      { header: 'Date', binding: 'date', format: 'MMM d, yyyy' },
      { header: 'Country', binding: 'country', dataMap: getCountries() },
      { header: 'Product', binding: 'product', dataMap: getProducts() },
      { header: 'Active', binding: 'active', width: 80 },
      { header: 'Downloads (k)', binding: 'transactions.downloads', format: 'n2,', aggregate: 'Sum' },
      { header: 'Sales (k)', binding: 'transactions.sales', format: 'c2,', aggregate: 'Sum' },
      { header: 'Expenses (k)', binding: 'transactions.expenses', format: 'c2,', aggregate: 'Sum' }
    ]
  });

	// initialize options
  customCellsOn(theGrid);
  validationOn(theGrid);
	localStorage.defaultLayout = theGrid.columnLayout;
	localStorage.columnLayout = theGrid.columnLayout;

  // allow users to enter countries and products that are not on the maps
  theGrid.getColumn('country').dataMap.isEditable = true;
  theGrid.getColumn('product').dataMap.isEditable = true;

  // show row count
  document.getElementById('rowCount').textContent = wijmo.Globalize.format(theGrid.rows.length, 'n0');

  // handle link clicks
  document.getElementById('links').addEventListener('click', function(e) {
    e.preventDefault();
    var fn = window[e.target.id];
    if (wijmo.isFunction(fn)) {
      fn(theGrid);
      var code = document.getElementById('code');
      code.textContent = fn.toString();
      code.classList.remove('hidden');
    }
  });
}

// sample data
function getCountries() {
  return [
    'US', 'Canada', 'Mexico', 'Brazil',
    'Germany', 'UK', 'France', 'Italy', 'Spain', 'Portugal',
      'Japan', 'China', 'Korea'
  ];
}
function...