Demo - FlexGrid formatItem

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 formatItem
  </h1>
  <p>
    Use the FlexGrid's <b>formatItem</b> event to customize the content
    of any cell. In this example, we are using it to show a rectangle
    filled with a color that can be edited by the user.
  </p>
  <div id="theGrid"></div>

CSS

body {
  margin-bottom: 24pt;
}

.wj-cell .sample {
  width: 3em;
  height: 100%;
  padding: 4px;
  border: 1px solid black;
}

JavaScript

var grid = new wijmo.grid.FlexGrid('#theGrid', {

	// specify the columns we want to show
  autoGenerateColumns: false,
  columns: [
		{ binding: 'id', header: 'ID', isReadOnly: true},
		{ binding: 'color', header: 'Color', dataMap: getColors() }, // data map with drop-down list
		{ binding: 'sample', header: 'Sample', isReadOnly: true} // custom column
  ],
  
  // use the formatItem event to show the content of the "sample" column
  formatItem: function(s, e) {
		if (e.panel == s.cells && s.columns[e.col].binding == 'sample') {
    	var item = s.rows[e.row].dataItem,
      		tpl = '<div class="sample" style="background:{color}"></div>';
      e.cell.innerHTML = wijmo.format(tpl, item);
    }
  },
  
  // populate the grid
  itemsSource: getData()
});

grid._refreshOnEdit = false; // <<<<<<<<<<<<

function getColors() {
	return 'Red,Orange,Yellow,Green,Blue,Violet,Purple'.split(',');
}
function getData() {
  return getColors().map(function(color, index) {
		return {
    	id: index + 1, 
      color: color
    }
  });
}