Search code examples
javascriptangulartypescriptnpmngx-treeview

ngx-treeview showing wrong tree structure. Where is wrong?

I am following the same JSON format as given in ngx-treeview. The JSON file:

[
  {
    "internalDisabled": false,
    "internalChecked": false,
    "internalCollapsed": false,
    "text": "JOURNEY",
    "value": 1
  },
  {
    "internalDisabled": false,
    "internalChecked": false,
    "internalCollapsed": false,
    "text": "INVENTORY ASSURANCE",
    "value": 2
  },
  {
    "internalDisabled": false,
    "internalChecked": true,
    "internalCollapsed": false,
    "text": "SENSOR ASSURANCE",
    "value": 3
  },
  {
    "internalDisabled": false,
    "internalChecked": false,
    "internalCollapsed": false,
    "text": "AVAILABILITY ASSURANCE",
    "value": 4
  },
  {
    "internalDisabled": false,
    "internalChecked": false,
    "internalCollapsed": false,
    "text": "ACTIONABLE",
    "value": 5,
    "internalChildren": [
      {
        "internalDisabled": false,
        "internalChecked": false,
        "internalCollapsed": false,
        "text": "Invalid Sensor Values",
        "value": 11
      },
      {
        "internalDisabled": false,
        "internalChecked": false,
        "internalCollapsed": false,
        "text": "Management View",
        "value": 12
      },
      {
        "internalDisabled": false,
        "internalChecked": false,
        "internalCollapsed": false,
        "text": "Actionable",
        "value": 13
      },
      {
        "internalDisabled": false,
        "internalChecked": false,
        "internalCollapsed": false,
        "text": "Informational",
        "value": 14
      }
    ]
  },
  {
    "internalDisabled": false,
    "internalChecked": false,
    "internalCollapsed": false,
    "text": "COMPLIANCE",
    "value": 6
  },
  {
    "internalDisabled": false,
    "internalChecked": false,
    "internalCollapsed": false,
    "text": "EXPENDITURE",
    "value": 7
  },
  {
    "internalDisabled": false,
    "internalChecked": false,
    "internalCollapsed": false,
    "text": "PROJECT",
    "value": 8
  },
  {
    "internalDisabled": false,
    "internalChecked": false,
    "internalCollapsed": false,
    "text": "REPORT",
    "value": 9
  },
  {
    "internalDisabled": false,
    "internalChecked": false,
    "internalCollapsed": false,
    "text": "ADMIN",
    "value": 10,
    "internalChildren": [
      {
        "internalDisabled": false,
        "internalChecked": false,
        "internalCollapsed": false,
        "text": "Access & Authorization",
        "value": 15,
        "internalChildren": [
          {
            "internalDisabled": false,
            "internalChecked": false,
            "internalCollapsed": false,
            "text": "List Roles",
            "value": 20
          },
          {
            "internalDisabled": false,
            "internalChecked": false,
            "internalCollapsed": false,
            "text": "User Role Mapping",
            "value": 21
          },
          {
            "internalDisabled": false,
            "internalChecked": false,
            "internalCollapsed": false,
            "text": "List User Role Mapping",
            "value": 22
          },
          {
            "internalDisabled": false,
            "internalChecked": false,
            "internalCollapsed": false,
            "text": "Menu Authorization to Role-Function ",
            "value": 23
          },
          {
            "internalDisabled": false,
            "internalChecked": false,
            "internalCollapsed": false,
            "text": "Site Management",
            "value": 24
          }
        ]
      },
      {
        "internalDisabled": false,
        "internalChecked": false,
        "internalCollapsed": false,
        "text": "Master Data Management",
        "value": 16,
        "internalChildren": [
          {
            "internalDisabled": false,
            "internalChecked": false,
            "internalCollapsed": false,
            "text": "Function Master",
            "value": 25
          },
          {
            "internalDisabled": false,
            "internalChecked": false,
            "internalCollapsed": false,
            "text": "Feature Master",
            "value": 26
          },
          {
            "internalDisabled": false,
            "internalChecked": false,
            "internalCollapsed": false,
            "text": "Site to State Mapping",
            "value": 27
          },
          {
            "internalDisabled": false,
            "internalChecked": false,
            "internalCollapsed": false,
            "text": "Unit Cost (EB & DG)",
            "value": 28
          },
          {
            "internalDisabled": false,
            "internalChecked": false,
            "internalCollapsed": false,
            "text": "R4G States",
            "value": 29
          }
        ]
      },
      {
        "internalDisabled": false,
        "internalChecked": false,
        "internalCollapsed": false,
        "text": "Escalation Matrix",
        "value": 17
      },
      {
        "internalDisabled": false,
        "internalChecked": false,
        "internalCollapsed": false,
        "text": "Facility Management",
        "value": 18,
        "internalChildren": [
          {
            "internalDisabled": false,
            "internalChecked": false,
            "internalCollapsed": false,
            "text": "Create Facility",
            "value": 30
          },
          {
            "internalDisabled": false,
            "internalChecked": false,
            "internalCollapsed": false,
            "text": "Create Sub Facility",
            "value": 31
          },
          {
            "internalDisabled": false,
            "internalChecked": false,
            "internalCollapsed": false,
            "text": "Partial Variance",
            "value": 32
          }
        ]
      },
      {
        "internalDisabled": false,
        "internalChecked": false,
        "internalCollapsed": false,
        "text": "Create New Role",
        "value": 19
      }
    ]
  }
]

This is what I made. But the expected Display tree is:

UI of Tree View

According to my JSON data ACTIONABLE checkbox should be parent but it is showing under AVAILABILITY ASSURANCE.

It creates confusion to User and me also.

Solution

  • If you are using ngx-treeview of npmjs https://www.npmjs.com/package/ngx-treeview?activeTab=readme

    then format your JSON like this: 

    const itCategory = new TreeviewItem([{
    "text": "JOURNEY",
    "value": 1
}, {
    "text": "INVENTORY ASSURANCE",
    "value": 2
}, {
    "text": "SENSOR ASSURANCE",
    "value": 3
}, {
    "text": "AVAILABILITY ASSURANCE",
    "value": 4
}, {
    "text": "ACTIONABLE",
    "value": 5,
    "children": [{
            "text": "Invalid Sensor Values",
            "value": 11
        },
        {
            "text": "Management View",
            "value": 12
        },
        {
            "text": "Actionable",
            "value": 13
        },
        {
            "text": "Informational",
            "value": 14
        }
    ]
}, {
    "text": "COMPLIANCE",
    "value": 6
}, {
    "text": "EXPENDITURE",
    "value": 7
}, {
    "text": "PROJECT",
    "value": 8
}, {
    "text": "REPORT",
    "value": 9
}, {
    "text": "ADMIN",
    "value": 10,
    "children": [{
            "text": "Access & Authorization",
            "value": 15,
            "children": [{
                    "text": "List Roles",
                    "value": 20
                },
                {
                    "text": "User Role Mapping",
                    "value": 21
                },
                {
                    "text": "List User Role Mapping",
                    "value": 22
                },
                {
                    "text": "Menu Authorization to Role-Function ",
                    "value": 23
                },
                {
                    "text": "Site Management",
                    "value": 24
                }
            ]
        },
        {
            "text": "Master Data Management",
            "value": 16,
            "children": [{
                    "text": "Function Master",
                    "value": 25
                },
                {
                    "text": "Feature Master",
                    "value": 26
                },
                {
                    "text": "Site to State Mapping",
                    "value": 27
                },
                {
                    "text": "Unit Cost (EB & DG)",
                    "value": 28
                },
                {
                    "text": "R4G States",
                    "value": 29
                }
            ]
        },
        {
            "text": "Escalation Matrix",
            "value": 17
        },
        {
            "text": "Facility Management",
            "value": 18,
            "children": [{
                    "text": "Create Facility",
                    "value": 30
                },
                {
                    "text": "Create Sub Facility",
                    "value": 31
                },
                {
                    "text": "Partial Variance",
                    "value": 32
                }
            ]
        },
        {
            "text": "Create New Role",
            "value": 19
        }
    ]
}])

    Further, set the configuration as

    {
   hasAllCheckBox: true,
   hasFilter: false,
   hasCollapseExpand: false,
   decoupleChildFromParent: false,
   maxHeight: 500
}

    Hopefully, this should work for you.