Angular-tree-component: How to set isExpanded status of added node to true

[snstarosciak]

Hey there,

I created a function that adds a node, updates the tree, does everything correctly, except by default it seems to want to not be expanded. If I try to add other nodes inside of that node, the nodes do not show up because the node is not expanded. I thought if I set isExpanded: true, then the node would automatically be expanded. I'm using angular2-tree-component 2.6.1.

Here is my function:

addSection() {
    this.items.push({
      id: 0,
      isExpanded: true,
      isSection: true,
      expanded: false,
      name: '[Section name needed]',
      children: []
    });

    // Update the tree model to reflect changes
    this.tree.treeModel.update();
  }

Do you have any thoughts?

Thanks in advance!

[GenaANTG]

Have the same problem. And need fix.

[benharrell]

try also setting - hasChildren: true

[snstarosciak]

I've tried adding the hasChildren: true and it still shows up collapsed when I run this function and add items to it :/

[benharrell]

Does it have any children? :)

[snstarosciak]

Well not when the node is first created, but when I drag another node into it, it does and it still looks collapsed :'(

[benharrell]

maybe try adding a child before you update. i'm def seeing this work using just regular old nodes array bound to the tree object. all i have to do is set

this.nodes.push( )
then
this.nodes=[].concat(this.nodes)

and as long as the new node has those 3 criteria met

haschildren
isexpanded
children

then it seems to show just fine.

On Jan 25, 2017, at 11:31 AM, Stevie Starosciak [e-mail] wrote:

Well not when the node is first created, but when I drag another node into it, it does and it still looks collapsed :'(

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or mute the thread.

[benharrell]

one more note, i've never had to use this call: this.tree.treeModel.update();

not sure why you need it?

[benharrell]

isExpanded: true,
expanded: false,

why do you have both of these with diff values?

[snstarosciak]

The this.tree.treeModel.update() function basically does the same as the this.nodes=[].concat(this.nodes) code. I even tried that code but retrofitted it into mine, and it does work, except it doesn't show the node as expanded.

The expanded: false field is actually for a custom piece of UI functionality that I have which is completely separate from the tree.

[benharrell]

for experimental purposes can you try adding a child in your code above? i'm thinking it won't expand unless you actually have a child

[benharrell]

also for giggles i would try changing your other property name from expanded to something unique....

[romanovma]

I also got into this issue and solved using expand() method:

let createdNode: TreeNode = this.tree.treeModel.getNodeById(id);

// passing isExpanded as node field doesnt work so call this method instead
createdNode.expand();

[snstarosciak]

Interesting. When I tried running this code, it's saying that createdNode is undefined:

addSection() {
    let item = {
      id: 54654654654654,
      isExpanded: true,
      isSection: true,
      expanded: false,
      name: '[Section name needed]',
      hasChildren: true,
      children: []
    };

    this.list.items.push(item);

    this.createItemForm(item);

    let createdNode: TreeNode = this.tree.treeModel.getNodeById(item.id);
    // Log to the node to see if it exists
    console.log('createdNode', createdNode);

    createdNode.expand();
    // Update the tree model to reflect changes
    this.list.items=[].concat(this.list.items);
  }

Am I doing something wrong here?

[benharrell]

for some reason I have never been able to make the getNodeById call to work. maybe that's the issue.

On Jan 30, 2017, at 9:00 AM, Stevie Starosciak [e-mail] wrote:

Interesting. When I tried running this code, it's saying that createdNode is undefined:

addSection() {
let item = {
id: 54654654654654,
isExpanded: true,
isSection: true,
expanded: false,
name: '[Section name needed]',
hasChildren: true,
children: []
};

this.list.items.push(item);

this.createItemForm(item);

let createdNode: TreeNode = this.tree.treeModel.getNodeById(item.id);
// Log to the node to see if it exists
console.log('createdNode', createdNode);

createdNode.expand();
// Update the tree model to reflect changes
this.list.items=[].concat(this.list.items);

}
Am I doing something wrong here?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or mute the thread.

[romanovma]

@snstarosciak you should update the tree model before you use its methods which means that first run:

// Update the tree model to reflect changes
    this.list.items=[].concat(this.list.items);

and then

let createdNode: TreeNode = this.tree.treeModel.getNodeById(item.id);
    // Log to the node to see if it exists
    console.log('createdNode', createdNode);

    createdNode.expand();

hope that helps

[snstarosciak]

@romanovma that actually did the trick :) Thankyou so much for the help! I've been trying to solve this for weeks haha.

[adamkleingit]

Hey guys, I'm glad you solved this on your own. I was on a long sickness leave and couldn't help.

The solution is what was proposed by @romanovma .

• change data
• call update()
• locate the node (by id, path, whatever)
• call methods on it

Basically isExpanded field is a tricky one. I only look at that field the first time the tree is rendered, or whenever async children are loaded.
The state of expanded nodes is saved inside the treeModel, and not on the nodes themselves.
I'm trying to avoid 2-way binding to properties of the nodes. It is not good practice to change the data that was given to the tree.