Next
Prev
Set Property
Unset Property

The property of a cell can be set by using the JavaScript API, addCellAttributeDetailAt(). This sample Grid demonstrates how to set the cell property using JavaScript. You can set the cell property dynamically using the button below the Grid.

var gridApp, gridRoot, dataGrid, collection;

function gridReadyHandler(id) {
  gridApp = document.getElementById(id);
  gridRoot = gridApp.getRoot();
  
  gridApp.setLayout(layoutStr);
  gridApp.setData(gridData);
  
  function layoutComplete() {
    dataGrid = gridRoot.getDataGrid();
    setCellSpanAttributes();
  }
  gridRoot.addEventListener("layoutComplete", layoutComplete);
}

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

  collection.addCellAttributeDetailAt(0, 0, 12, 1);
  collection.addCellAttributeDetailAt(0, 1, 3, 1, "subTotalStyle");
  collection.addCellAttributeDetailAt(3, 1, 3, 1, null, "#FFCC00");
  collection.addCellAttributeDetailAt(6, 3, 1, 1, null, "#00FF00", "$#,##0");
}

function setRowAttr() {
  if (collection == null)
    collection = gridRoot.getCollection();
    
  collection.addCellAttributeDetailAt(9, 3, 3, 1, "subTotalStyle", "#00FF00", "$#,##0");
  }

function setRowAttr() {
  if (collection == null)
    collection = gridRoot.getCollection();

  collection.removeCellAttributeAt(9, 3);
}

< addCellAttributeDetailAt (rowNo, colNo, rowSpan, colSpan, styleName, backgroundColor, formatString) >

rowNo This parameter is to set the row index.
colNo This parameter is to set the column index.
rowSpan This parameter is to set the number of rows to be merged (default : 1).
colSpan This parameter is to set the number of columns to be merged (default : 1).
styleName This parameter is to set the style name.
backgroundColor This parameter is to set the background color (RGB).
formatString This parameter is to set the format string.

© 2017 KoolChart. All rights reserved.