Wijmo FlexGrid Split Column Header

by Joel Parks

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/wijmo.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.grid.min.js"></script>
<div class="container">

  <h1>Styling Wijmo 5 Controls</h1>

  <p>
    This is a <b>FlexGrid</b> control with five items:
  </p>
  <div id="grid5" class="grid"></div>

CSS

.grid {
    height: auto;
    max-height: 350px;
}

JavaScript

onload = function () {

    // generate some random data
    function getData(count) {
        var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
            data = [];
        for (var i = 0; i < count; i++) {
            data.push({
                id: i,
                country: countries[i % countries.length],
                downloads: Math.round(Math.random() * 20000),
                sales: Math.random() * 10000,
                expenses: Math.random() * 5000
            });
        }
        return data;
    }

    // create grids
    var g5 = new wijmo.grid.FlexGrid('#grid5', {
    	itemsSource: getData(5),
      itemFormatter: function(panel, r, c, cell) {
      	if(panel.cellType == wijmo.grid.CellType.ColumnHeader) {
        	cell.innerHTML = cell.innerHTML + `<img src="https://demos.wijmo.com/5/angular2/flexgridintro/flexgridintro/resources/US.png">`;
        }
      }
    });
}