Next
Update
Prev
Change Total

The sample Grid demonstrates how to create a summary row by using <SpanSummaryCollection>. Click on the Layout tab and find how <SpanSummaryCollection> is defined.

var gridApp, gridRoot, dataGrid, collection;
					
function gridReadyHandler(id) {
  gridApp = document.getElementById(id);
  gridRoot = gridApp.getRoot();

  gridApp.setLayout(layoutStr);
  gridApp.setData(gridData);
		
  var layoutCompleteHandler = function(event) {
    dataGrid = gridRoot.getDataGrid();
  }

  gridRoot.addEventListener("layoutComplete", layoutCompleteHandler);
}

function updateSummaryRow() {
  if (collection == null)
    collection = gridRoot.getCollection();
  if (collection == null) {
    alert("The collection object cannot be found.");
    return;
  }

  //Calculate the Percentage
  var clen = collection.getLength();
  var rowCount = 0;
  var allTotal = 0;
		
  for (var i = clen - 1; i >= 0; i--) {
    var row = gridRoot.getItemAt(i);
    if ( typeof row.constructor._super === "object" ) {
      if (row["Year"] == "Grand Total") {
        allTotal = row["Seoul"];
        break;
      }
    }
  }
		
  for (var i = 0; i < clen; i++) {
    var row = gridRoot.getItemAt(i);
    if ( typeof row.constructor._super === "object" ) {
      if (row["Year"] != "Grand Total") {
        var se = row["Seoul"];
        if (se.toString().indexOf("%") < 0)
          row["Seoul"] = (se / allTotal * 100).toFixed(2) + "%";
        }
      }
    }
		
    dataGrid.invalidateList();
}

function formatSeoul(item, value, column) {
  var str = value.toString();
  if (str.indexOf("%") < 0 && str.indexOf(","))
    return addCommas(value);
  else
    return value;
}

function addCommas(nStr) {
  nStr += '';
  x = nStr.split('.');
  x1 = x[0];
  x2 = x.length > 1 ? '.' + x[1] : '';
  var rgx = /(\d+)(\d{3})/;
  while (rgx.test(x1)) {
    x1 = x1.replace(rgx, '$1' + ',' + '$2');
  }
  
  return x1 + x2;
}

© 2017 KoolChart. All rights reserved.