FlexSheet Performace

by Mike Lu

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20153.117/styles/wijmo.min.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20153.117/styles/themes/wijmo.theme.office.css">
<script src="http://cdn.wijmo.com/5.20153.117/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.20153.117/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.20153.117/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20153.117/controls/wijmo.grid.filter.min.js"></script>
<script src="http://cdn.wijmo.com/5.20153.117/controls/wijmo.grid.sheet.min.js"></script>
<div class="container">
  <button class="btn btn-default" onclick="addSheets(true)">Add Sheet with deferUpdate</button>
  <button class="btn btn-default" onclick="addSheets()">Add Sheet without DeferUpdate</button>
  <div id="theFlexSheet" class="flexSheet"></div>
  <div id="result"></div>
</div>

CSS

.flexSheet {
  height: 400px;
  border: 2px solid #e0e0e0;
  margin: 6px;
}

JavaScript

var sheet, lineCount = 300, columnCount = 50, sheetCount = 25,
	startTime, docChangedTimeout, resulted = false;

// add sheets for the felxsheet
function addSheets(deferAdd){
  var data = getData(lineCount, columnCount);
  if (sheet){
    sheet.dispose();
  }
  sheet = new wijmo.grid.sheet.FlexSheet('#theFlexSheet', {
    columns: getColumnData(columnCount)
  });
  startTime = new Date();
  resulted = false;
  if (deferAdd){
    sheet.deferUpdate(function(){
      for (var i = 1; i <= sheetCount; i++){
        sheet.addBoundSheet('sheet' + i, data);
      }
      sheet.selectedSheetIndex = 0;
    });
  } else {
  	for (var i = 1; i <= sheetCount; i++){
      sheet.addBoundSheet('sheet' + i, data);
    }
    sheet.selectedSheetIndex = 0;
  }
}

// get data source for the flexsheet
function getData(lineCount,columnCount) {
  var data = [];
  for (var i = 1; i < lineCount; i++) {
    var str = '{';
    str = str + '\"ID\":' + (i);
    for (var j = 1; j < columnCount; j++) {
      str = str + ',\"Title' + j + '\" :' + '\"Data' + j + '_' + i + '\"';
    }
    str = str + '}';
    var obj = JSON.parse(str);
    data.push(obj);
  }
  var str2 = {
    Title1:'=count(A2:A50)',
    Title2:'=average(A2:A50)',
    Title3:'=max(A2:A50)',
    Title4:'=min(A2:A50)',
    Title5:'=sum(A2:A50)',
  }		
  data.push(str2);
  var cv = new wijmo.collections.CollectionView(data);
  return cv;
}

// get column for the flexhseet
function getColumnData(i) {
  var columndata = [];
  columndata.push(
    { binding: 'ID', header: 'ID', dataType: 'Number' }
  );
  for (var j = 1; j < i; j++) {
    columndata.push({
      binding: 'Title' + j,
      header: 'Title' + j,
      width: 200,
      dataType: 'String'
     });
	}
  return columndata;
}

document.addEventListener('DOMSubtreeModified', function () {
  if (docChangedTimeout) clearTimeout(docChangedTimeout);
  docChangedTimeout = setTimeout(function () {
    // measure elapsed time when DOM stops changing for a while
    if (!resulted){
...