Enterprise: SohoTreeComponent - Children property is undefined when tree is multi select.

[mdevale]

Describe the bug
When getting tree dataset, children property of tree node who has children's before assigning dataset to tree is undefined when tree is multi select.

To Reproduce
Steps to reproduce the behavior:

1. Do the changes as described in additional context
2. Run the project
3. Browse tree-source page in tree control
4. See console output

Expected behavior
If tree node has children then children property of that node should not be undefined.

Version

• ids-enterprise-ng: v5.0.0
• ids-enterprise: v4.15.0

Screenshots

Platform

• OS Version: Windows 10
• Browser Name - chrome
• Browser Version - Version 72.0.3626.109 (Official Build) (64-bit)

Additional context

1. Put below code in tree-source.demo.ts to make tree multi select.
   treeOptions: SohoTreeOptions = { hideCheckboxes: true, selectable: 'multiple' };

ngOnInit() { this.tree.options = this.treeOptions; }

1. Define ngAfterViewInit in tree-source.demo.ts as below
   ngAfterViewInit() { const data = this.demoData.getRootTreeNodes(); console.log('Assigned Dataset: ' + JSON.stringify(data)); this.tree.dataset = data; console.log('Dataset from tree: '); console.log(this.tree.dataset); }

2. Change ROOT_NODE in tree-data.demo.ts as below
   private ROOT_NODE: SohoTreeNode = { 'id': 'Root ' + this.id++, 'open': true, 'text': 'Node 1', 'children': [ { 'id': 'Node 1' + '/1', 'text': 'Leaf ' + this.id++ }, { 'id': 'Node 1' + '/2', 'text': 'Node ' + this.id++, 'children': [] } ] };

[tmcconechy]

@mdevale Can you just attach a zip with the tree-service.demo.ts updated and ready to drop in? I cant seem to make the code you mentioned compile.

[mdevale]

@tmcconechy PFA.

tree-source.demo.zip

[tmcconechy]

Im not too sure whats happening here but i see the point. I do get this error...

ERROR in src/app/tree/tree-service.demo.ts(39,23): error TS2339: Property 'demoData' does not exist on type 'TreeServiceDemoComponent'.

But it somehow still runs. Also i was thinking this might be a EP issue so tried this example in EP

  var sampleData = [{
    'id': 'Root 2 ',
    'open': true,
    'text': 'Node 1',
    'children': [
        {
          'id': 'Node 1' + '/1',
          'text': 'Leaf 1'
        },
        {
          'id': 'Node 1' + '/2',
          'text': 'Node 2',
          'children': []
        }
      ]
    }];

  //Can refer to the data set here
  $('#json-tree').tree({dataset: sampleData});
  console.log($('#json-tree').data('tree').settings.dataset)

Notice i pull the setttings.dataset. I cant seem to get this example to run and test that in NG. Maybe that helps tho if you change the example to use this.tree.options.dataset if you want to pull the data that way?

[mdevale]

Yes issue with EP. After loading tree, children property is there in dataset after statement self.syncDataset(); but after self.initSelected() children property does not exist in dataset. Please see attached screenshot.

Before self.initSelected():

After self.initSelected():

Issue with self.syncNode(a); statement in setNodeStatus() method which is being called from initSelected() method. If we comment this line, it works fine but i am not sure is this correct resolution?
Children also not available in this.tree.options.dataset

[mdevale]

@tmcconechy you can pull the fork "mdevale/enterprise-ng" and run. Then browse tree-dynamic page and click on Expand All button. See console output. "Node Two" has children's but you can't see in tree dataset.

[tmcconechy]

I think the problem might be in syncNode (which is called view initSelected) as you said. We shouldnt comment out the line, should try and make sure syncNode will copy the children over as well. Maybe something here..

    // Children
    const ul = nodeJQ.next();
    if (ul[0] && ul[0].tagName.toLowerCase() === 'ul') {
      entry.children = [];

      const items = [].slice.call(ul.children('li').toArray());
      items.forEach((li) => {
        entry.children.push(self.syncNode(li.querySelector('a')));
      });
    }

Can you move this to EP please @clepore ?

[mdevale]

it is copying children but it is deleted in subsequent code to code snippet mentioned by you in above comment.

// Merge json data var jsonData = nodeJQ.data('jsonData'); if (jsonData) { delete jsonData.selected; delete jsonData.children; entry = $.extend({}, jsonData, entry); }

[tmcconechy]

Ok makes sense - then maybe we just move the copy to after that action so it gets copied on. Did you want to make a PR?

[mdevale]

This is also not resolving the issue.

[mdevale]

Found one more scenario. If tree is not multi select, on expanding node it's children property get's undefined. Please find attached screenshot. Steps to reproduce:

1. Browse tree-children page from my fork "mdevale/enterprise-ng"
2. Expand node "Node 2.2" by clicking on folder icon
3. Click on "Log Dataset" button.
4. See console. Node 2.2 has children but Node 2.2 doesn't have children property in tree dataset.

Before expanding node Node 2.2

After expanding node Node 2.2

[tmcconechy]

@deep7102 wonder if your recent fix fixes this. Can you test this and let me know?

[jbrcna]

QA Passed
v4.29.0-dev
https://master-enterprise.demo.design.infor.com/components/tree/test-children-data.html

https://master-enterprise.demo.design.infor.com/components/tree/test-children-data-select-multiple.html

[hemantg05]

I had another issue with regular tree component while using ids-enterprise-ng v7.1.0(ids-enterprise v4.28.0). When a node is selected, its children disappear from tree.dataset. This issue seems to be resolved with this bug fix.

My issue:

1. Select a node which has children.
2. Inspect the tree.dataset

Expected Behaviour: The selected node should have children in the tree.dataset.
Actual Behaviour: The selected node's children disappear in tree.dataset after the node was selected.

QA may add a test for this scenario to verify in their testing.

cc @karinthulin