Wijmo FlexSheet

non-editable cells

by Joel Parks

HTML

<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.filter.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.sheet.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<p>
 This FlexSheet sample uses the <b>beginningEdit</b> event to apply Read-Only cells in the "Downloads" column.
 </p>
 <p>
 Use the ListBox selection to select 2 adjacent cells in the following manner:
 </p>
   <ol>
     <li>Try selecting a <b>Country</b>  cell and a <b>Downloads</b>  cell (A2 & B2) then press the backspace|delete key</li>
     <li>Try selecting a <b>Downloads</b>  cell and a <b>Sales</b> cell (B3 & C3) then press the backspace|delete key</li>
   </ol>
 <p> 
 The second step will delete data on the cell that is supposed to be Read-Only. If the last cell selected in editable, all other selected cells in the cell range will be deleted as well.
 </p>
 <div id="flexSheet" style="height:300px;"></div>
 </div>

JavaScript

var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
    data = [];
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');

// create and add a new sheet the control
var sheet = new wijmo.grid.sheet.Sheet();
sheet.name = "New Sheet";
flexSheet.sheets.push(sheet);
//flexSheet.columns[1].isReadOnly = true;
flexSheet.getColumn('downloads').isReadOnly = true;

flexSheet.beginningEdit.addHandler(function (s, e) {
  var col = s.columns[e.col];
  if (col.binding == 'downloads') {
  //   e.cancel = true;
  }
});