Demo - Cell Templates

by Mamoon Mushtaque

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>
    Cell Templates</h1>
  <p>
    You can use Wijmo's <b>format</b> function to implement a 
    basic template handling mechanism.</p>
  <p>
    The grid below handles the <b>formatItem</b> event to 
    generate the content for cells in the "Template" column
    using a template element defined in markup:</p>    

  <div id="theGrid">
  </div>
  
  <div class="panel panel-warning">
    <div class="panel-heading">
      If you are using Angular, Wijmo's interop layer provides
      extensive support for cell templates. For details, please
      see the 
      <a href="https://demos.wijmo.com/5/SampleExplorer/SampleExplorer/Sample/CellTemplateIntro" target="_blank">CellTemplateIntro</a> sample.
    </div>
  </div>
</div>

CSS

.wj-flexgrid {
  max-height: 350px; 
  margin-top: 10px;
}
.wj-cell img {
  width: 30px;
}
body {
	margin-bottom: 24pt;
}

JavaScript

onload = function() {

	// template for "Template" cells
	var theTemplate = '<button class="btn btn-default" name="{country}">' +
      '<img src="https://flagpedia.net/data/flags/mini/{abb}.png"/> ' +
      'Click Me!' +
    '</button>';

	// grid with template
	var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
   	autoGenerateColumns: false,
    columns: [
    	{ binding: 'country', header: 'Country' },
      { binding: 'template', header: 'Template', width: 130, isReadOnly: true },
      { binding: 'sales', header: 'Sales', format: 'n2' },
      { binding: 'expenses', header: 'Expenses', format: 'n2' }
    ],
  	itemsSource: getData(),
    showAlternatingRows: false,
		formatItem: function(s, e) {
    	if (e.panel == s.cells && s.columns[e.col].binding == 'template') {
      debugger;
      	var item = s.rows[e.row].dataItem,
      			html = '<input type="radio" name="radio">';  /*wijmo.format(theTemplate, item);*/
  			e.cell.innerHTML = html;
      }
    },
    
	});
  
  // make rows taller to accommodate buttons
  theGrid.rows.defaultSize = 45;

	// handle button clicks
  theGrid.hostElement.addEventListener('click', function(e) {
  debugger;
  	var target = wijmo.closest(e.target, 'button');
  	if (target instanceof HTMLButtonElement && target.name) {
    	alert('Thanks for clicking "' + target.name + '"');
    }
  });
  
	// create some random data
  function getData() {
    var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
        abb = 'us,de,gb,jp,it,gr'.split(','),
        data = [];
		for (var i = 0; i < countries.length; i++) {
    	data.push({
      	country: countries[i],
        abb: abb[i],
        sales: Math.random() * 10000,
        expenses: Math.random() * 5000
			});
		}
    return data;
  }
}