Expand/collapse of specific nodes programatically

[SciManJD]

Hi! I want to control from the expanding/collapsing of specific nodes from my javascript code. There is an expand option, but I couldn't expand a collapsed node by setting it to true. Can you give me a short example how to do this, please?

[geekhybrid]

Hi @SciManJD,

The expand property was originally designed to support adding nodes to the tree in an expanded state. It currently doesn't support two way binding. Fortunately, it can be easily added.

I will publish a minor patch in a few hours to enable two way binding to the expanded field.

Cheers,

[geekhybrid]

Done. Available in 2.0.3. The expanded property is now two-way reactive.

[SciManJD]

Thank you so much... I will test it as soon as possible and I will give a feedback.

[SciManJD]

I updated to v2.0.3. But I see a difference than the older version. Now all nodes are collapsed, but I use the option expandAll="true". Is this expected? Also it seems that the node selection doesn't work.

[geekhybrid]

Hi @SciManJD

expandAll is no longer supported. It had a conflicting philosophy. It could be true and certain nodes were false. We will now be sticking with the expanded field of a node.

There is an event on the component that can be used to hook up to selection too. This breaks earlier versions that used a prop. 😔 sorry. Rather than the consumer watching for a selected object via a prop, they can use an event to know the exact selection.

Sample.

<vue3-tree-vue :items="items"
          :isCheckable="false"
          @onSelect="onItemSelected" />

[SciManJD]

Ok, I will reorganize my logic according to the expanding/collapsing the device tree nodes. But what I mentioned now is that when I build the tree all nodes are closed (expected), but the chevrons for expanding/collapsing are inverted ('-' when the node is closed and '+' when the node is opened). Is this correct so? Actually I already use this event to catch the selection. But not I get an exception, because before the object that was given as a parameter to onItemSelected() contains a property 'item' that contains the selected node's properties and not the object contains directly the node's properties without 'item'. I fixed this and the selection works fine again.

[geekhybrid]

Oh I see what you mean.

Maybe there is a silly bug with the collapsed/expanded icons. I'll have a look.

Yes the method argument changed slightly from the previous version. New event handlers give just the item and not an object with an item field.

Thanks for making the change.

[SciManJD]

It looks that if the items are added to the tree and set as expanded, the chevrons are ok, but if they are collapsed (by default) the chevrons are exchanged.

[SciManJD]

There is one more thing that I discovered. When I expand all nodes by the property 'expaned' from my code, all seems to the ok. But if then I collapse a node manually, its 'expanded' property is still set to 'true'. That way, when I want to expand all nodes by my code, these manually collapsed nodes are no longer expanded.

[SciManJD]

When I expand/collapse the nodes programmatically, the chevrons don't change.

[geekhybrid]

I think this has now been fixed in 2.0.5. Please re-open if otherwise.

[SciManJD]

There are still some problems:

• The nodes that are expanded from the beginning have correct chevron (sign '-'), but the collapsed have the same sign (also sign '-', instead of '+'.
• When I expand and collapse manually the nodes (by clicking on the chevrons), the sign is changing. But if I expand and collapse the nodes by the code (using the property 'expanded') the chevrons don't change.

[geekhybrid]

Hi, I just made a simple link to a playground. You can update the code there with the issue you just described. https://playcode.io/1615141

[SciManJD]

Now I know the problem... and I have to say... sorry, it was my mistake. I completely forgot that my chevrons are programmed as a separated component, because there is a special logic inside to color them differently, depending on some states... And in my component I didn't use the property 'expanded', but I'm listening for a mouse click on the chevron. Therefore the control from the code didn't change the chevrons. When I recognized this, I fixed my component and now it works just fine. So I have to say again, sorry for the misleading information and thank you for the great job and your effort to help...

[geekhybrid]

Now I know the problem... and I have to say... sorry, it was my mistake. I completely forgot that my chevrons are programmed as a separated component, because there is a special logic inside to color them differently, depending on some states... And in my component I didn't use the property 'expanded', but I'm listening for a mouse click on the chevron. Therefore the control from the code didn't change the chevrons. When I recognized this, I fixed my component and now it works just fine.

So I have to say again, sorry for the misleading information and thank you for the great job and your effort to help...

👏 Cheers mate.

[SciManJD]

The expand/collapse by the property 'expanded' works fine, but I have another issue. I cannot say that this is a bug. Maybe my code needs to the adjusted, but I cannot find the reason for it. When I expand/collapse the nodes manually (by clicking to the corresponding chevrons), then the selection of a node works fine (only one node is selected). But If I expand the whole tree from my code (using the property 'expanded', then every node that I select stays selected forever. So I can select all nodes by sequential clicking on them (I mean that they are at least colored as selected). The 'onSelect' event works fine. Can you guess what could be wrong here?

[geekhybrid]

@SciManJD please update the code so your use case can be reproduced.

https://playcode.io/1615141

[SciManJD]

Unfortunately, I cannot reproduce it outside of my application. By the way, I use my own style.css. Initially it was based on the original one, but now I see that it is quite different. Probably this makes the problem. I have to find out how to adapt it.

[SciManJD]

After further investigation, I see that the css-file is not a problem. But I found that the property 'selected' exists when I simply control of the nodes via the chevrons (manually). When I expand all nodes from my code (I set the property 'expanded' to true), then the property 'selected' is undefined. I extended my code so now when I set the property 'extended', I also set the property 'selected' to false. In this case the property always exists. On the event 'onSelect' I print the state of 'selected'. If the node wasn't already selected, I see value 'false'. But when it was already selected before and I select it again, the property 'selected' is 'true'. It looks that the selected of the other nodes if a new node is selected is never cleared. This explains what I see. But how my code can cause this behavior?

[geekhybrid]

I imagine there is a way to create a mini use case to reproduce this. As it is quite hard to imagine.

Selected is a field that is set internally. Currently, I do not think it has a two way binding. This means if you set it externally, you have the responsibility to diselect other nodes.

[SciManJD]

I found the reason, but it is difficult to make a simple example. The problem comes, because I'm trying to translate the names of the nodes on different languages by the i18n plug-in. When I do this, I create a new object. I copy the nodes with the spread operator and modify them (I reconstruct the tree) and it seems that that was some properties are lost. Is this possible? That's why I see the the property 'selected' is undefined. But the strange thing is that this worked fine with the older version and this problem came after the changes concerning the expand/collapse via 'expanded'. I continue with my experiments, but probably you can guess why this makes a problem now. I will think how to change my code, but it won't be easy.

[geekhybrid]

Hi,

That helps, but not much I'm afraid.

1. Do you need to reconstruct the whole object graph to localise the name field ?

2. Not sure how it worked previously but deconstructing the entire object graph outside the component might have unintended effects + lose reactivity etc.

[SciManJD]

Thanks for the notes. I know that the reconstructing the object is not a good idea, but I couldn't find a better way to make translations of the node names. I tried to fix my functions. When I avoid this copy of the object all works fine with the device tree. But now I have problems with the translations. If I directly modify the names of the nodes, next time I cannot change the language, because the plug-in cannot recognize the changed names. I'm searching solution, but it is not easy.

[SciManJD]

I fixed the problems. I don't use spread command anymore, but just modify the object. It wasn't easy change, but so far I don't see further problems.