Next
Update
Prev
Divert Rows Only
Expand All
Close All

KoolGrid can represent hierarchical data structures with spanning cells. <SpanHierarchicalData> must be defined in the Layout to represent hierarchical data structures with spanning cells. This example demonstrates how to display the JSON data as a hierarchical representation with spanning cells and setting the cell property.

...
<dataProvider>
  <SpanHierarchicalData source="{$gridData}" />
</dataProvider>
...

[Data]
  "Year": "2013",
  "Quarter": "T O T A L",
  "Seoul": 846568,
  "Tokyo": 748824,
  "Singapore": 717834,
  "NewYork": 676387,
  "LA": 780781,
  "Washington": 857351,
  "Revenue": 4627745,
  "Year_attr": {
    "backgroundColor": "#FFFFFF"
  },
  "Quarter_attr": {
    "colSpan": 2,
    "styleName": "allTotalHeaderStyle"
  },
  "_rattr": {
    "styleName": "allTotalStyle",
    "backgroundColor": "#FFFF00"
  },
  "children": [
  {
    "Year": "1/4",
    "Quarter": "1/4 SUM",
    "Seoul": 140034,
    "Tokyo": 167482,
    "Singapore": 217086,
    "NewYork": 178502,
    "LA": 174033,
    "Washington": 245098,
    "Revenue": 1122235,
    "Percent": 100,
    "Year_attr": {
      "backgroundColor": "#FFFFFF"
    },
    "Quarter_attr": {
      "colSpan": 2,
      "styleName": "subTotalStyle"
    },
    "_rattr": {
      "backgroundColor": "#FFCC33"
    },
    "children": [
    {
      "Quarter": "1/4",
      "Month": 1,
      "Seoul": 109520,
      "Tokyo": 40454,
      "Singapore": 82477,
      "NewYork": 47424,
      "LA": 103225,
      "Washington": 61161,
      "Revenue": 444260,
      "Percent": 40,
      "Quarter_attr": {
      "rowSpan": 3
    }
  },
...	                    

© 2017 KoolChart. All rights reserved.