Hierarchical Data

Posted by: hoang.nguyen on 2 January 2018, 7:15 pm EST

    • Post Options:
    • Link

    Posted 2 January 2018, 7:15 pm EST

    I have found an example on Hierarchical Data in Trees and Hierarchical Data:

    http://demos.wijmo.com/5/angular/flexgridintro/flexgridintro/

    I have create a page to display my Employee hierarchical data but I cannot display any more than level 0 (top level).

    Below are my json file, screenshot, and my ionic files. Please run “npm install” before running it.

    [{

    “level”: 0,

    “partnerNumber”: “P4828”,

    “fullName”: “Employee 1”,

    “roleName”: “Director of IT”,

    “manager”: “Employee 0”,

    “TeamMembers”: [

    {

    “TeamMembers”: {

    “level”: 1,

    “partnerNumber”: “P9588”,

    “fullName”: “Employee 2”,

    “roleName”: “Bus Intell Manager”,

    “manager”: “Employee 1”,

    “TeamMembers”: [

    {

    “TeamMembers”: {

    “level”: 2,

    “partnerNumber”: “P2645”,

    “fullName”: “Employee 3”,

    “roleName”: “Sr. Software Developer”,

    “manager”: “Employee 2”,

    “TeamMembers”:

    }

    },

    {

    “TeamMembers”: {

    “level”: 2,

    “partnerNumber”: “P2820”,

    “fullName”: “Employee 4”,

    “roleName”: “Sr. Bus Intel Architect”,

    “manager”: “Employee 2”,

    “TeamMembers”:

    }

    }

    ]

    }

    },

    {

    “TeamMembers”: {

    “level”: 1,

    “partnerNumber”: “P9633”,

    “fullName”: “Employee 5”,

    “roleName”: “IT Mgr-Infrastructure”,

    “manager”: “Employee 1”,

    “TeamMembers”: [

    {

    “TeamMembers”: {

    “level”: 2,

    “partnerNumber”: “P9367”,

    “fullName”: “Employee 6”,

    “roleName”: “System Admin II- Security”,

    “manager”: “Employee 5”,

    “TeamMembers”:

    }

    },

    {

    “TeamMembers”: {

    “level”: 2,

    “partnerNumber”: “P3165”,

    “fullName”: “Employee 7”,

    “roleName”: “Network Admin III”,

    “manager”: “Employee 5”,

    “TeamMembers”:

    }

    },

    {

    “TeamMembers”: {

    “level”: 2,

    “partnerNumber”: “P3637”,

    “fullName”: “Employee 8”,

    “roleName”: “System Admin III”,

    “manager”: “Employee 5”,

    “TeamMembers”:

    }

    },

    {

    “TeamMembers”: {

    “level”: 2,

    “partnerNumber”: “P2393”,

    “fullName”: “Employee 9”,

    “roleName”: “Network Admin II”,

    “manager”: “Employee 5”,

    “TeamMembers”:

    }

    }

    ]

    }

    },

    {

    “TeamMembers”: {

    “level”: 1,

    “partnerNumber”: “P3140”,

    “fullName”: “Employee 10”,

    “roleName”: “IT Apps Mgr II”,

    “manager”: “Employee 1”,

    “TeamMembers”: [

    {

    “TeamMembers”: {

    “level”: 2,

    “partnerNumber”: “P8686”,

    “fullName”: “Employee 11”,

    “roleName”: “IT Apps Mgr I”,

    “manager”: “Employee 10”,

    “TeamMembers”: [

    {

    “TeamMembers”: {

    “level”: 3,

    “partnerNumber”: “P3242”,

    “fullName”: “Employee 12”,

    “roleName”: “IT App Support Spec”,

    “manager”: “Employee 11”,

    “TeamMembers”:

    }

    },

    {

    “TeamMembers”: {

    “level”: 3,

    “partnerNumber”: “P4100”,

    “fullName”: “Employee 13”,

    “roleName”: “Sr. IT Sharepoint Arc”,

    “manager”: “Employee 11”,

    “TeamMembers”:

    }

    },

    {

    “TeamMembers”: {

    “level”: 3,

    “partnerNumber”: “P4675”,

    “fullName”: “Employee 14”,

    “roleName”: “Sr. Data Base Admin”,

    “manager”: “Employee 11”,

    “TeamMembers”:

    }

    },

    {

    “TeamMembers”: {

    “level”: 3,

    “partnerNumber”: “P2318”,

    “fullName”: “Employee 15”,

    “roleName”: “Bus Intell Developer”,

    “manager”: “Employee 11”,

    “TeamMembers”:

    }

    },

    {

    “TeamMembers”: {

    “level”: 3,

    “partnerNumber”: “P7081”,

    “fullName”: “Employee 16”,

    “roleName”: “Bus Intell Developer”,

    “manager”: “Employee 11”,

    “TeamMembers”:

    }

    }

    ]

    }

    },

    {

    “TeamMembers”: {

    “level”: 2,

    “partnerNumber”: “P6515”,

    “fullName”: “Employee 17”,

    “roleName”: “IT App Support Spec”,

    “manager”: “Employee 10”,

    “TeamMembers”:

    }

    }

    ]

    }

    },

    {

    “TeamMembers”: {

    “level”: 1,

    “partnerNumber”: “P3372”,

    “fullName”: “Employee 18”,

    “roleName”: “IT Support Manager”,

    “manager”: “Employee 1”,

    “TeamMembers”: [

    {

    “TeamMembers”: {

    “level”: 2,

    “partnerNumber”: “P3671”,

    “fullName”: “Employee 19”,

    “roleName”: “IT Support Specialist”,

    “manager”: “Employee 18”,

    “TeamMembers”:

    }

    },

    {

    “TeamMembers”: {

    “level”: 2,

    “partnerNumber”: “P4199”,

    “fullName”: “Employee 20”,

    “roleName”: “IT Support Specialist”,

    “managerNumber”: “44372”,

    “TeamMembers”:

    }

    },

    {

    “TeamMembers”: {

    “level”: 2,

    “partnerNumber”: “P4425”,

    “fullName”: “Employee 21”,

    “roleName”: “IT Support Specialist”,

    “manager”: “Employee 18”,

    “TeamMembers”:

    }

    },

    {

    “TeamMembers”: {

    “level”: 2,

    “partnerNumber”: “P4473”,

    “fullName”: “Employee 22”,

    “roleName”: “IT Supp Splst - Mobile”,

    “manager”: “Employee 18”,

    “TeamMembers”:

    }

    },

    {

    “TeamMembers”: {

    “level”: 2,

    “partnerNumber”: “P4968”,

    “fullName”: “Employee 23”,

    “roleName”: “IT Support Specialist”,

    “manager”: “Employee 18”,

    “TeamMembers”:

    }

    },

    {

    “TeamMembers”: {

    “level”: 2,

    “partnerNumber”: “P2388”,

    “fullName”: “Employee 24”,

    “roleName”: “IT Support Specialist”,

    “manager”: “Employee 18”,

    “TeamMembers”:

    }

    },

    {

    “TeamMembers”: {

    “level”: 2,

    “partnerNumber”: “P2564”,

    “fullName”: “Employee 25”,

    “roleName”: “IT Support Specialist”,

    “manager”: “Employee 18”,

    “TeamMembers”:

    }

    },

    {

    “TeamMembers”: {

    “level”: 2,

    “partnerNumber”: “P2832”,

    “fullName”: “Employee 26”,

    “roleName”: “IT Support Specialist”,

    “manager”: “Employee 18”,

    “TeamMembers”:

    }

    }

    ]

    }

    },

    {

    “TeamMembers”: {

    “level”: 1,

    “partnerNumber”: “P3378”,

    “fullName”: “Employee 27”,

    “roleName”: “IT PM III”,

    “manager”: “Employee 1”,

    “TeamMembers”:

    }

    },

    {

    “TeamMembers”: {

    “level”: 1,

    “partnerNumber”: “P2130”,

    “fullName”: “Employee 28”,

    “roleName”: “Sr. Software Architect”,

    “manager”: “Employee 1”,

    “TeamMembers”:

    }

    }

    ]

    }]

    Please advice what I am missing. Thank you very much.

  • Posted 2 January 2018, 7:21 pm EST

  • Posted 2 January 2018, 7:36 pm EST

    If I modified my html:

    <wj-flex-grid #flex

    class=“custom-flex-grid”

    [itemsSource]=“dataCollection”

    [childItemsPath]=“‘TeamMembers’”>

    <wj-flex-grid-column
      [binding]="'partnerNumber'"
      >
    </wj-flex-grid-column>
    
    <wj-flex-grid-column
      [binding]="'fullName'"
      >
    </wj-flex-grid-column>
    
    <wj-flex-grid-column
      [binding]="'roleName'"
      >
    </wj-flex-grid-column>
    
    <wj-flex-grid-column
      [binding]="'manager'"
      >
    </wj-flex-grid-column>
    

    Where cild-path is now a string, I can see first row with data and next six rows with empty data

  • Posted 3 January 2018, 1:21 am EST

    Hi Hoang,

    You need to correct your JSON format. Please refer to the following JSON data for the same:

    [  
       {  
          "level":0,
          "partnerNumber":"P4828",
          "fullName":"Employee1",
          "roleName":"Director of IT",
          "manager":"Employee 0",
          "TeamMembers":[  
             {  
                "level":1,
                "partnerNumber":"P9586",
                "fullName":"Employee 2",
                "roleName":"Bus Intell Manager",
                "manager":"Employee 1",
                "TeamMembers":[  
                   {  
                      "level":2,
                      "partnerNumber":"P2646",
                      "fullName":"Employee 3",
                      "roleName":"Sr. Software Developer",
                      "manager":"Employee 2",
                      "TeamMembers":[   ]
                   },
                   {  
                      "level":2,
                      "partnerNumber":"P2647",
                      "fullName":"Employee 3",
                      "roleName":"Sr. Software Developer",
                      "manager":"Employee 2",
                      "TeamMembers":[     ]
                   }
                ]
             },
             {  
                "level":1,
                "partnerNumber":"P9588",
                "fullName":"Employee 3",
                "roleName":"Bus Intell Manager",
                "manager":"Employee 1",
                "TeamMembers":[  
                   {  
                      "level":2,
                      "partnerNumber":"P2645",
                      "fullName":"Employee 3",
                      "roleName":"Sr. Software Developer",
                      "manager":"Employee 2",
                      "TeamMembers":[    ]
                   }
                ]
             }
          ]
       }
    ]
    

    You need to remove extra TeamMembers:{ } from child items.

    ~Manish

  • Posted 3 January 2018, 2:20 pm EST

    Thank you Manish very much. It is working great. Next question is how do I change the grid background and foreground color? How do I change the collapse and expand arrow pointer?

    for cell background I have tried:

    .wj-cell:not(.wj-header):not(.wj-group):not(.wj-alt):not(.wj-state-selected):not(.wj-state-multi-selected) {
        background-color: #DDEBF7;
        color: #333333;
      }
      .wj-alt:not(.wj-header):not(.wj-group):not(.wj-state-selected):not(.wj-state-multi-selected) {
        background-color: #FFFFFF;
        color: #333333;
      }
    

    but it does not work.

  • Posted 4 January 2018, 2:04 am EST

    Hi Hoang,

    You need to add !important with the CSS properties. This may not be work if you have included any wijmo built in theme for your project.

    Alternatively, you may use the itemFormatter for changin background and font color for specific cell and default cell.

    The expand and collapse icon may be changed using wjFlexGridCellTemplate. As the cell template is used the default icon gets removed and you may use custom icon.

    If you would like to change it programatically, please refer to the following fiddle for the same: http://jsfiddle.net/mkgupta911/2jcmjmkz/25/

    ~Manish

  • Posted 4 January 2018, 4:17 pm EST

    Thank you Manish. Per your fiddle, I can programatically change any wj-glyph. I am using and

    I was wondering if we have a way to set this one up in css instead of doing it inside itemFormatter.

    Thank you sir very much.

  • Posted 5 January 2018, 12:50 am EST

    Hi Hoang,

    You may also accomplished using CSS instead of itemFormatter. For this, you need to make some changes in CSS with adding Custom CSS Class to FlexGrid.

    Please refer to the Trees and Hierarchical Data section at the following demo sample:

    http://demos.wijmo.com/5/Angular2/FlexGridIntro/FlexGridIntro/

    ~Manish

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels