Expand all child nodes on a nodeClicked

[Mark]

Hi,

Maybe I'm missing the obvious but is it possible to expandAll children of a specific node from a nodeClicked callaback?

As a very simple example, if I have a tree which looks like:

id:1 Parent 1.

id:2, Pid: 1, Child A.

id 3, Pid: 1, Child B

id 4, Parent 2.

id 5, Pid 4, Child C

Id 6, Pid 4, Child D.

Id 7, Pid 6, Sub-Child E

If I click on any item, I want to expand all of the nested children - ie clicking on Parent 2, should open two layers of children in this example (id 4, 5, 6 and 7).

menuClicked(args) {
    const uuid = args.node.getAttribute('data-uid');

    let node = this.$refs.workspaceMenuTree.getNode(uuid);
    console.log(node);
    this.$refs.workspaceMenuTree.expandAll();

Calling expandAll() expands everything in the entire tree.

But if I pass in the node value, as per the example below, then it just seems to expand one layer, but no further - regardless of the passed in level....

this.$refs.workspaceMenuTree.expandAll([node.id],2, false);

Do I need to loop through all of the children manually - if so, how do I get to them as I can't see for looking in the documentation....

Thank you for your help,
Mark

[Indhumathy Loganathan]

Hi Mark,

Greetings from Syncfusion support.

In TreeView, there is no direct support for expanding the child node and its corresponding parent node. We need to manually loop through the nodes and pass the id in the expandAll and expandedNodes properties to perform the expand operation.

Kindly confirm the type of the datasource you are using for the TreeView component. Are you using a hierarchical data type for the TreeView at your end? Based on your confirmation, we will send you a sample to meet your requirements.

Regards,

Indhumathy L

[Mark]

Hi Indhumathy

Yes, it's hierarchical.

It may or may not help much but this is the code which builds up the tree:

const dynamic = props.workspace.menu.map(organisation => {
    return {
        id:   'or_'+organisation.id,
        name: organisation.name,
        expanded: true,
        child: [
            {
                id:    'tb_'+organisation.id,
                name:  'Template Library',
                child: [{
                    id: 'tc_'+organisation.id,
                    name: 'Catalogue'
                }].concat(organisation.owner.template_licenses.map(license => {
                    return {
                        id:   'tl_'+license.id,
                        name: license.template_listing.name
                    }
                }))
            },
            {
                id:    'as_'+organisation.id,
                name:  'Strategies',
                child: organisation.spaces.map(space => {
                    return {
                        id:     'sp_'+space.id,
                        name:   space.name,
                        child:  space.strategies.map(strategy => {
                            return {
                                id:     'st_'+strategy.id,
                                name:   strategy.name,
                                child:  strategy.streams.map(stream => {
                                    return {
                                        id:     'sr_'+stream.id,
                                        name:   stream.name,
                                        child:  stream.stages.map(stage => {
                                            return {
                                                id:     'sg_'+stage.id,
                                                name:   stage.name,
                                            }
                                        }),
                                    }
                                }),
                            }
                        }),
                    }
                }),
            }
        ]
    }
});

The component is defined as

<tree-view-component id='workspaceMenuTree' ref='workspaceMenuTree' :fields='fields' :nodeSelected='menuClicked'></tree-view-component>

And when a node is selected, the code calls:

menuClicked(args) {
    const uuid = args.node.getAttribute('data-uid');
    if (uuid === 'dashboard') {
        this.$inertia.get(route('dashboard'));
    }

    this.expandNode(uuid);

    const id   = uuid.split('_');
    let   dest = null;

    switch (id[0]) {
        case 'tb': dest = null; break;
        case 'tc': dest = "template-listing.catalogue"; break;
        case 'tl': dest = "template-license.show"; break;
        case 'or': dest = "organisation.show"; break;
        case 'sp': dest = "space.show"; break;
        case 'as': dest = "strategy.index"; break;//need to pass oid BROKEN!!!
        case 'st': dest = "strategy.show"; break;
        case 'sr': dest = "strategy-stream.show"; break;
        case 'sg': dest = "strategy-stage.show"; break;
    }

    if (dest) {
        this.$inertia.get(route(dest, {id: id[1]}));
    }
},

And it's in the menuClicked function where I want to expand all of the CHILD nodes below the item which has been clicked.

I do also have a second requirement where I want to ensure that a node is selected programmatically - and ensure it is visible and all of the child nodes are visible - ie if they are not currently expanded, ensure that everything expands so it and its children are seen. 

Will your example help with that too, please?

Thank you for your help - it's very much appreciated!

Keep well,

Mark

[Indhumathy Loganathan]

Hi Mark,

Currently, DataManager only has support for filtering at the first level of the tree nodes and doesn’t support filtering on hierarchical data source. So it is difficult to loop through and identify the Child nodes. So we need some additional time to check the feasibility of achieving your requirement. We will update you on or before July 21, 2022. We appreciate your patience.

Regards,

Indhumathy L

[Mark]

Hi Indhumathy,

Thank you for your update on this.  I've been away for a few days so just catching up with everything.  I look forward to any updates on a solution.

Thank you,

Mark

[Indhumathy Loganathan]

Hi Mark,

Sorry for the delayed response.

We have achieved your requirement of expanding all the child level parent nodes of the selected node using the nodeSelected event. We have passed all the retrieved node id values into the expandAll method to expand those nodes. Refer to the below code snippet.

    nodeSelected: function (args) {

      var nodeId = [];

      nodeId.push(args.nodeData.id);

      //Retrieve all the child nodes which has childrens

      var nodes = args.node.querySelectorAll(".e-has-child");

      for (var i = 0; i < nodes.length; i++) {

        nodeId.push(nodes[i].getAttribute("data-uid"));

      }

      console.log(nodeId);

      var treeObj = document.getElementById("treeview").ej2_instances[0];

      //Expand all the nodes.

      treeObj.expandAll(nodeId);

    },

Also, set the loadOnDemand property as false to filter all the child level nodes when their parent is in a collapsed state.

Sample: https://codesandbox.io/s/jolly-mccarthy-pmvcrn?file=/src/App.vue:2134-2630

Please check the attached sample and get back to us if you need any further assistance.

Regards,

Indhumathy L