Expand / Collapse

Initial collapse

Initially, you can collapse the IDs you do not want to show by assigning an array (or by pushing values) to collapsedIds:

familyTree.collapsedIds = [8, 9, 12, 13];
familyTree.collapsedIds.push(11);

Code example:

Edit in BALKAN Code

Load on expand

You can load nodes on demand when the user clicks the expand/collapse button.

Here, node 4 references a parent with ID 5, but no node with ID 5 exists in the data array:

[
    {id: 1, spouseIds: [2], motherId: 3, fatherId: 4},
    {id: 2},
    {id: 3},
    {id: 4, fatherId: 5},
]

We can add the node on expand button click, using the onDemand method:

familyTree.onDemand(function(args) {
    familyTree.addFamilyMembers([{ id: args.ids[0], name: 'loaded on demand' }]).draw();
});

Code example:

Edit in BALKAN Code

See Templates for customizing the Expand / Collapse buttons.