Set Property
Unset Property

The property of an entire row can be set by using the JavaScript API, addRowAttributeDetailAt(). This sample Grid demonstrates how to set the row property using JavaScript. Total 5 rows (from 1st row to 5th row) are set at the time when the Grid is first laid out, and you can set the property of the 6th row dynamically using the button below the Grid.

var gridApp, gridRoot, dataGrid, collection;

function gridReadyHandler(id) {
  gridApp = document.getElementById(id);
  gridRoot = gridApp.getRoot();
  function layoutComplete() {
    dataGrid = gridRoot.getDataGrid();
  gridRoot.addEventListener("layoutComplete", layoutComplete);

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

  collection.addRowAttributeDetailAt(0, "allTotalHeaderStyle");
  collection.addRowAttributeDetailAt(1, null, "#FFE048");
  collection.addRowAttributeDetailAt(2, null, "#FFFFFF", "$#,##0");
  collection.addRowAttributeDetailAt(3, null, "#FF0000", null, false);
  collection.addRowAttributeDetailAt(4, null, "#00FF00", null, true, 40);

function setRowAttr() {
  if (collection == null)
    collection = gridRoot.getCollection();
  collection.addRowAttributeDetailAt(5, "allTotalHeaderStyle", "#FFCC00", "$#,##0", false, 40);

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


< addRowAttributeDetailAt (rowNo, styleName, backgroundColor, formatString, editable, rowHeight) >

rowNo This parameter is to set the row index.
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.
editable Whether or not to allow editing the cell (true or false).
rowHeight This parameter is to set the row height (unit : pixel).

© 2017 KoolChart. All rights reserved.