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: 27px;
  border: none;
  border-left: 1px solid rgba(0, 0, 0, 0.3);
  margin: 0 -6px 0 6px;
  width: 30px;
}

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

JavaScript

onload = function() {

	var ascending;
  // 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) {
        let split = e.cell.innerHTML.split(';');
        if(split.length > 1) {
        	e.cell.innerHTML = split[0] + ';<button class="sort-btn">' + split[1] + '</button>'
        } else {
        	e.cell.innerHTML += '<button class="sort-btn">*</button>';
        }
      }
    }
  });

theGrid.hostElement.addEventListener('click', e => {
  let target = e.target,
  		ht = theGrid.hitTest(e),
      col = ht.getColumn();
  if (ht.panel == theGrid.columnHeaders) {
  	let btn = wijmo.closest(target, 'button');
		if (btn) {
  		// handle clicks on the custom sort button
      // flip/add sort?
      // theGri
      let asc = true;
      if(col.currentSort == '+') {
      	asc = false;
      }
      theGrid.collectionView.sortDescriptions.splice(0,0, new wijmo.collections.SortDescription(col.binding, asc));
		} else {
  		// handle clicks on the header cell
      for(var i = theGrid.collectionView.sortDescriptions.length - 1; i >= 0; i--){
      	if(theGrid.collectionView.sortDescriptions[i].property == col.binding) {
        	theGrid.collectionView.sortDescriptions.splice(i, 1);
        }
      }
    }
  }
})
  
  // 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;
  }
}