Purejs FlexSheet Customize Cell

by Joel Parks

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="http://prerelease.componentone.com/wijmo5/latest/styles/wijmo.min.css">
<script src="http://prerelease.componentone.com/wijmo5/latest/controls/wijmo.min.js"></script>
<script src="http://prerelease.componentone.com/wijmo5/latest/controls/wijmo.input.min.js"></script>
<script src="http://prerelease.componentone.com/wijmo5/latest/controls/wijmo.grid.min.js"></script>
<script src="http://prerelease.componentone.com/wijmo5/latest/controls/wijmo.grid.filter.min.js"></script>
<script src="http://prerelease.componentone.com/wijmo5/latest/controls/wijmo.grid.sheet.min.js"></script>
<div id="flexSheet" style="height:300px;"></div>

JavaScript

var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
			data = [],
			bigList = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece'];
			
		for (var i = 0; i < countries.length; i++) {
			data.push({
				country: countries[i],
				downloads: Math.round(Math.random() * 20000),
				sales: Math.round(Math.random() * 10000),
				expenses: Math.round(Math.random() * 5000)
			});
		}
		// create the FlexSheet control
		var flexSheet = new wijmo.grid.sheet.FlexSheet('#flexSheet', {
				itemFormatter: function(panel, r, c, cell){
					var editRange = panel.grid.editRange;
					if(panel.cellType == wijmo.grid.CellType.Cell && editRange && editRange.row === r && editRange.col === c) {				
						if(panel.grid.columns[c].header === 'Country'){
							cell.childNodes[0].style.display = 'none';
							cell.style.overflow = 'visible';
							var cmbRoot = document.createElement('div');
							var cmb = new wijmo.input.ComboBox(cmbRoot, {
								itemsSource: countries,
								selectedItem: panel.grid.getCellData(r, c, false)
							});
              cell.appendChild(cmbRoot);
							cmb.focus();
							var editEndingEH = function(s, e){
								panel.grid.cellEditEnding.removeHandler(editEndingEH);
								if(!e.cancel){
									panel.setCellData(e.row, e.col, cmb.selectedItem);
                  e.cancel = true;
									cmb.dispose();
								}
							}
							panel.grid.cellEditEnding.addHandler(editEndingEH);
						}
					}
				}
		});

		// create and add a new sheet the control
		var sheet = new wijmo.grid.sheet.Sheet();
		sheet.name = "New Sheet";
		sheet.itemsSource = data;
		flexSheet.sheets.push(sheet);