Wijmo FlexSheet (282)

non-editable cells wijmo build 282

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20171.282/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20171.282/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.20171.282/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.20171.282/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20171.282/controls/wijmo.grid.filter.min.js"></script>
<script src="http://cdn.wijmo.com/5.20171.282/controls/wijmo.grid.sheet.min.js"></script>
<div class="container">
<p>
 This FlexSheet sample uses the <b>beginningEdit</b> event to apply Read-Only cells in the "Downloads" column.
 </p>
 <p>
 The Read-Only cells are only in the odd-numbered rows.
 </p>
 <p>This sample uses build<b> #282</b></p>
 <div id="flexSheet" style="height:300px;"></div>
 </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';
					console.log(cell);
          var cmbRoot = document.createElement('div');
          cell.appendChild(cmbRoot);
					var cmb = new wijmo.input.ComboBox(cmbRoot, {
						itemsSource: countries,
						selectedItem: panel.grid.getCellData(r, c, false)
					});
          cmb.focus();
					var editEndingEH = function(s, e){
						panel.grid.cellEditEnding.removeHandler(editEndingEH);
						if(!e.cancel){
            	e.cancel = true;
							panel.setCellData(e.row, e.col, cmb.selectedItem);
							
						}
					}
					panel.grid.cellEditEnding.addHandler(editEndingEH);
          
				}
			}
			/*var column = s.columns.getColumn('country');
			if(column && !column.dataMap){
				column.dataMap = buildDataMap(bigList);
			}*/
		},
});

// 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);

/*flexSheet.beginningEdit.addHandler(function (s, e) {
  var col = s.columns[e.col];
  if (col.binding == 'country') {
		var rc = e.panel.grid.getCellBoundingRect(e.row, e.col);
		var cell = document.elementFromPoint(rc.left + rc.width / 2, rc.top +...