CODEWITHSUNDEEP
angularangular7syncfusiontreegrid
user9040429
user9040429

Reputation: 720

Tree Grid JSON format Angular implementation

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.

Upvotes: 1

Views: 946

Answers (1)

vignesh vicky
vignesh vicky

Reputation: 91

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

Upvotes: 2

Related Questions