CODEWITHSUNDEEP
angularprimeng
Baked Inhalf
Baked Inhalf

Reputation: 3735

Angular 4 - Propagate Selection Up in PrimeNG Tree not working

The propagateSelectionUp setting is not selecting the above node / parent when data is populated from a json file. There is a property "parent" of typ TreeNode, but i'm not sure how to add that in the json file.

I have printed the node object to the console to be able to discover methods and properties, and saw that the "node.parent" is undefined... is there a method for setting the parent?

<p-tree [value]="filesTree11" layout="horizontal" selectionMode="checkbox" [(selection)]="selectedFile3" [propagateSelectionUp]="true" [propagateSelectionDown]="false" (click)="test()"></p-tree>

Upvotes: 0

Views: 3007

Answers (2)

Enrico Barbieri
Enrico Barbieri

Reputation: 39

I had the same issue using the p-tree horizontally. The quickest way I found to solve the problem is to store the reference to the parent node in the data property of the node

private buildTreeNode(..., parent?: TreeNode): TreeNode  {
  // Do stuff
  const node = {
    // ... set your node properties here
    data: {
      // Your other data stuff goes here
      parent: parent, /*<-- THIS SAVES ME THE DAY*/
    }
  } as TreeNode;
  // Do other stuff
  return node;
}

And then use it to navigate backwards

// Assume onDelete is called from HTML and the deleted element is passed as parameter
onDelete(node: TreeNode): void {
  if (node.data.parent) {
    const index = node.data.parent.children?.indexOf(node);
    if (index !== undefined) {
      node.data.parent.children?.splice(index, 1);
    }
  } else {
    // You deleted the root node
  }
}

Upvotes: 0

B748
B748

Reputation: 35

I also ran into the node.parent == null issue with layout="horizontal" today. I don't think it's intended to be that way.

Probably you've got your own way around it by now. If not (or whoever might need it later): Here are two ways of setting the parent-node:

  1. Quick-n-dirty: You could insert another tree-component into your .html file which acesses the same nodes as your horizontal tree. Then hide it using style:

    <p-tree> [value]="filesTree11" [style]="{'display': 'none'}"</p-tree>.

    This said, it's an ugly and certainly not permanent solution. But for proof-of-concept or testing I don't see why not...

  2. The thorough approach: Iterate and set the parent property recursively through the nodes just after assigning the json data to filesTree11 by calling this.processTreeNodes(filesTree11, null):

    private processTreeNodes(treeNode: TreeNode[], parent: TreeNode) {
    for (const node of treeNode) {
        if (parent != null) {
            node.parent = parent;
        }
        if (node.children.length > 0) {
            this.processTreeNodes(node.children, node);
     }
}

    To verify if node.parent has been set, you could call this function after the one above:

    private checkTreeNodes(treeNode: TreeNode[]) {
  for (const node of treeNode) {
    node.parent != null ?
        console.log('>> ' + node.parent.label + ' > ' + node.label) :
        console.log('>> ' + 'null');
    if (node.children.length > 0) {
      this.checkTreeNodes(node.children);
    }
  }
}

    The "manual" approach has the advantage of letting you set a couple of additional properties, like expanded, data, type, ...

Upvotes: 1

Related Questions