Demo - FlexGrid

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>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<div class="container">
  <h1>
    FlexGrid
  </h1>
  <div id="theGrid"></div>
</div>

CSS

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

.wj-cell .sort-btn {
  float: right;
  height: 100%;
  border: none;
  border-left: 1px solid rgba(0, 0, 0, 0.3);
  margin: 0 -6px 0 6px;
}

.header {
  display: inline-block;
  width: 150px;
  text-align: right;
  font-weight: normal;
}

JavaScript

onload = function() {

	var columnHeaders = [];

  // default grid
  var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
    allowSorting: false,
    showMarquee: true,
    alternatingRowStep: 0,
    selectionMode: 'MultiRange',
    itemsSource: getData(),
    
    formatItem: (s, e) => {
    	if (e.panel == s.columnHeaders) {
      	e.cell.innerHTML += '<button class="sort-btn">*</button>';
        columnHeaders.push(e.cell);
      }
    }
  });

theGrid.hostElement.addEventListener('click', e => {
  let target = e.target,
  		ht = theGrid.hitTest(e),
      col = ht.getColumn();
  if (ht.panel == theGrid.columnHeaders) {
		if (target instanceof HTMLButtonElement &&
        wijmo.hasClass(target, 'sort-btn')) {
  		// handle clicks on the custom sort button
      // flip/add sort?
      // theGri
      console.log('clicked sort button on', col.header);
      console.log(columnHeaders);
		} else {
  		// handle clicks on the header cell
      console.log('clicked header on', col.header);
    }
  }
})
  
  // create some random data
  function getData() {
	  var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
  		  data = [];
  	for (var i = 0; i < 200; i++) {
	    data.push({
	      id: i,
	      country: countries[i % countries.length],
	      active: i % 5 != 0,
	      downloads: Math.round(Math.random() * 200000),
	      sales: Math.random() * 100000,
	      expenses: Math.random() * 50000
	    });
	  }
    return data;
  }
}