Tree Grid JSON format Angular implementation

Question

I am trying tutorial of displaying hierarchical data in table. It works fine with sample data given in tutorial, but when I am trying with the below JSON object either its giving all expanded elements without expand and collapse arrow or showing just first element:

[{
  "id": 1,
  "shapeID": "M-1",
  "hierarchyID": "1",
  "origin": "M",
  "level": 0,
  "children": [
    {
      "id": 2,
      "shapeID": "M-1.1",
      "hierarchyID": "1.1",
      "origin": "M",
      "level": 1,
      "parent_id": "1",
      "child_id": "1",
      "children": [
        {
          "id": 3,
          "shapeID": "M-1.1.1",
          "hierarchyID": "1.1.1",
          "origin": "M",
          "level": 2,
          "parent_id": "1.1",
          "child_id": "1",
          "children": [
            {
              "id": 4,
              "shapeID": "M-1.1.1.1",
              "hierarchyID": "1.1.1.1",
              "origin": "M",
              "level": 3,
              "parent_id": "1.1.1",
              "child_id": "1"
            }, {
              "id": 5,
              "shapeID": "M-1.1.1.2",
              "hierarchyID": "1.1.1.2",
              "origin": "M",
              "level": 3,
              "parent_id": "1.1.1",
              "child_id": "2"
            }, {
              "id": 6,
              "shapeID": "M-1.1.1.3",
              "hierarchyID": "1.1.1.3",
              "origin": "M",
              "level": 3,
              "parent_id": "1.1.1",
              "child_id": "3"
            }, {
              "id": 7,
              "shapeID": "M-1.1.1.4",
              "hierarchyID": "1.1.1.4",
              "origin": "M",
              "level": 3,
              "parent_id": "1.1.1",
              "child_id": "4"
            }, {
              "id": 8,
              "shapeID": "M-1.1.1.5",
              "hierarchyID": "1.1.1.5",
              "origin": "M",
              "level": 3,
              "parent_id": "1.1.1",
              "child_id": "5"
            }, {
              "id": 9,
              "shapeID": "M-1.1.1.6",
              "hierarchyID": "1.1.1.6",
              "origin": "M",
              "level": 3,
              "parent_id": "1.1.1",
              "child_id": "6"
            }, {
              "id": 10,
              "shapeID": "M-1.1.1.7",
              "hierarchyID": "1.1.1.7",
              "origin": "M",
              "level": 3,
              "parent_id": "1.1.1",
              "child_id": "7"
            }, {
              "id": 11,
              "shapeID": "M-1.1.1.8",
              "hierarchyID": "1.1.1.8",
              "origin": "M",
              "level": 3,
              "parent_id": "1.1.1",
              "child_id": "8"
            }, {
              "id": 12,
              "shapeID": "M-1.1.1.9",
              "hierarchyID": "1.1.1.9",
              "origin": "M",
              "level": 3,
              "parent_id": "1.1.1",
              "child_id": "9"
            }, {
              "id": 13,
              "shapeID": "M-1.1.1.10",
              "hierarchyID": "1.1.1.10",
              "origin": "M",
              "level": 3,
              "parent_id": "1.1.1",
              "child_id": "10"
            }
          ]
        },
        {
          "id": 14,
          "shapeID": "M-1.1.2",
          "hierarchyID": "1.1.2",
          "origin": "M",
          "level": 2,
          "parent_id": "1.1",
          "child_id": "2",
          "children": [
            {
              "id": 15,
              "shapeID": "M-1.1.2.1",
              "hierarchyID": "1.1.2.1",
              "origin": "M",
              "level": 3,
              "parent_id": "1.1.2",
              "child_id": "1"
            }, {
              "id": 16,
              "shapeID": "M-1.1.2.2",
              "hierarchyID": "1.1.2.2",
              "origin": "M",
              "level": 3,
              "parent_id": "1.1.2",
              "child_id": "2"
            }, {
              "id": 17,
              "shapeID": "M-1.1.2.3",
              "hierarchyID": "1.1.2.3",
              "origin": "M",
              "level": 3,
              "parent_id": "1.1.2",
              "child_id": "3"
            }
          ]
        },
        {
          "id": 18,
          "shapeID": "M-1.1.3",
          "hierarchyID": "1.1.3",
          "origin": "M",
          "level": 2,
          "parent_id": "1.1",
          "child_id": "3",
          "children": [
            {
              "id": 19,
              "shapeID": "M-1.1.3.1",
              "hierarchyID": "1.1.3.1",
              "origin": "M",
              "level": 3,
              "parent_id": "1.1.3",
              "child_id": "1"
            }, {
              "id": 20,
              "shapeID": "M-1.1.3.2",
              "hierarchyID": "1.1.3.2",
              "origin": "M",
              "level": 3,
              "parent_id": "1.1.3",
              "child_id": "2"
            }
          ]
        }
      ]
    }
  ]
}]

At html side I am using following code :

<ejs-treegrid [dataSource]='data' [treeColumnIndex]='1' childMapping='children'>
  <e-columns>
    <e-column field='id' headerText='id' textAlign='Right' width=70></e-column>
    <e-column field='hierarchyID' hierarchyID='hierarchyID' textAlign='Right' width=70></e-column>
    <e-column field='shapeID' headerText='shapeID' textAlign='Right' width=70></e-column>
</ejs-treegrid>

I am not getting clue why its not working with my JSON object as desired.

I'am not sure, but your json give me an error. You has to remove the "," in the last propertie of the group.e.g. remove the "," at last of the property ""child_id" of the "id=4": {"id": 4,"shapeID": "M-1.1.1.1","hierarchyID": "1.1.1.1","origin": "M","level": 3,"parent_id": "1.1.1","child_id": "1" , <--remove this comma }, — Eliseo
– Eliseo, Commented Jan 13, 2019 at 20:13
I have corrected it, but still I am just getting the first element without expand/collapse icon — user9040429
– user9040429, Commented Jan 14, 2019 at 4:58

vignesh vicky · Accepted Answer · 2019-01-16 10:17:36Z

In the given JSON object we found that you have a field name called level. We have used level as a keyword in our EJ2 TreeGrid source. So, if the dataSource has a property named level then some conflicts may occur. Hence we suggest you to use different name for level field from the dataSource. If you still wish to use the same column value as level, then we suggest you to create a virtual column in the load event and show those column values in the treegrid.

Please refer the below code example.

[html page]

<ejs-treegrid [dataSource]='data' [treeColumnIndex]='1' childMapping='children' (load)='load($event)'>
  <e-columns>
    <e-column field='id' headerText='id' textAlign='Right' width=70></e-column>
    <e-column field='hierarchyID' headerText='hierarchyID' width=70></e-column>
    <e-column field='shapeID' headerText='shapeID' textAlign='Right' width=70></e-column>
  </e-columns>
</ejs-treegrid>

[ts page]

import { Component, OnInit } from '@angular/core';
import { CustomerData } from './jsontreegriddata';

@Component({
    selector: 'control-content',
    templateUrl: 'localdata.html'
})
export class LocalDataComponent implements OnInit {
    public data: Object[] = [];
    public pageSettings: Object;

    ngOnInit(): void {
        this.data = CustomerData;
        this.pageSettings = { pageSize: 10 };
   }

    load (e: any) {    
      treegrid.ej2_instances[0].columns.push({field:"treegridlevel",headerText: "Level", width: 70});     
      for(var i=0; i<this.data.length; i++){
        this.data[i].treegridlevel = this.data[i].level;
        delete this.data[i].level;
        if(this.data[i].hasOwnProperty("children")){
          for(var j=0;j<this.data[i].children.length;j++){
            this.data[i].children[j].treegridlevel = this.data[i].children[j].level;
            delete this.data[i].children[j].level;
          }
        }
      }
    }
}

In the above code example we have assigned the level values for one level. Similarly, you can assign values for other values. We have prepared an online sample for your reference, please refer the below link for the sample.

Sample : https://stackblitz.com/edit/angular-fq2t3s-qxeww8?file=localdata.html

Collectives™ on Stack Overflow

Tree Grid JSON format Angular implementation

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related