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;
}

.test {
  border-right: 1px solid gray;
  padding-right: 10px;
}

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

JavaScript

onload = function() {

	var columnHeaders = [];
  var test = false;
  var sortedColumn;
  var ascending = true;
  var tempHTML;

  // 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) {
      	if(!test) {
          e.cell.innerHTML += '<button class="sort-btn">*</button>';
        } else {
        	if(e.col == 1) {
          	if(ascending) {
            	e.cell.innerHTML = s.columns[e.col].header + '<button class="sort-btn"><span class="wj-glyph-up"></span></button>';
            } else {
            	e.cell.innerHTML = s.columns[e.col].header + '<button class="sort-btn"><span class="wj-glyph-down"></span></button>';
            }
          } else {
          	e.cell.innerHTML = e.cell.innerHTML;
          }
        }
        columnHeaders.push(e.cell);
      }
      //tempHTML = null;
    },
    sortedColumn: (s, e) => {
    	console.log("columnHeaders");
    }
  });

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
      let asc = false;
      console.log('clicked sort button on', col.header);
      console.log(col);
      if(col.currentSort == "+") {
      	ascending = true;
      } else {
      	ascending = false;
      }
      theGrid.collectionView.sortDescriptions.splice(0,0, new wijmo.collections.SortDescription(col.binding, ascending));
      e.cancel = true;
      test = true;
      //console.log(columnHeaders);
      var innerHTML = columnHeaders[col._idx].innerHTML;
      var splitHTML = innerHTML.split('<');
     ...