Next
Update
Prev
Divert Rows Only
Expand All
Close All

KoolGrid can represent hierarchical data structures. <HierarchicalData> must be defined in the Layout to represent hierarchical data structures. This example demonstrates how to display the JSON data as a hierarchical representation.

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

[Data]
  var gridData = [
  {
    "Year": "2013",
    "Quarter": "T O T A L",
    "Seoul": 846568,
    "Tokyo": 748824,
    "Singapore": 717834,
    "NewYork": 676387,
    "LA": 780781,
    "Washington": 857351,
    "Revenue": 4627745,
    "children": [
    {
      "Year": "1/4",
      "Quarter": "1/4 SUM",
      "Seoul": 140034,
      "Tokyo": 167482,
      "Singapore": 217086,
      "NewYork": 178502,
      "LA": 174033,
      "Washington": 245098,
      "Revenue": 1122235,
      "Percent": 100,
      "children": [
      {
        "Quarter": "1/4",
        "Month": 1,
        "Seoul": 109520,
        "Tokyo": 40454,
        "Singapore": 82477,
        "NewYork": 47424,
        "LA": 103225,
        "Washington": 61161,
        "Revenue": 444260,
        "Percent": 40
      },
    {
...	                    

© 2017 KoolChart. All rights reserved.