# Best way to update a TreeList in the node's config screen

**URL:** <https://discourse.nodered.org/t/best-way-to-update-a-treelist-in-the-nodes-config-screen/14046>\
**Category:** Developing Nodes\
**Created:** [6 August 2019 10:09 UTC](https://discourse.nodered.org/t/best-way-to-update-a-treelist-in-the-nodes-config-screen/14046 "2019-08-06T10:09:12Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [6 August 2019 10:09 UTC](https://discourse.nodered.org/t/best-way-to-update-a-treelist-in-the-nodes-config-screen/14046/1 "2019-08-06T10:09:12Z")

</div>

Hi folks,

Would like to use the [TreeList](https://nodered.org/docs/api/ui/treeList/) widget in one of my nodes. As the documentation suggests, the current functionality is rather _limited_. For example there are no functions for dynamically adding/removing children in the tree.

Just wondering now what is the best way to accomplish this. For example when I look at the [code](https://github.com/node-red/node-red/blob/master/packages/node_modules/%40node-red/nodes/core/core/60-link.html#L30) of the Link-node, I see that the view is **redrawed** very frequently:

```auto
treeList = $("<div>")
            .css({width: "100%", height: "100%"})
            .appendTo(".node-input-link-row")
            .treeList({})
            .on('treelistitemmouseover',function(e,item) {
                if (item.node) {
                    item.node.highlighted = true;
                    item.node.dirty = true;
                    RED.view.redraw();
                }
            });

...

treeList.treeList('data', flows);

```

When I want to add/remove children in the tree, do I have to implement it with the following steps?

1. When the user clicks the 'add' or 'remove' button, I have to update my `treeAsJsonString` variable.
2. Then I update the tree widget content via `treeList.treeList('data', treeAsJsonString);`.
3. Then I need to call `RED.view.redraw`?

Can `RED.view.redraw` be called to show small updates, without messing up the performance? It is not clear to me whether it redraws the entire view, or it does only update the deltas somehow ...

Thanks !!!  
Bart

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [6 August 2019 12:25 UTC](https://discourse.nodered.org/t/best-way-to-update-a-treelist-in-the-nodes-config-screen/14046/2 "2019-08-06T12:25:43Z")

</div>

Hi @BartButenaers

TreeList gets a lot more features in 1.0 that make adding/removing items easier without having to replace the whole structure.

With the current code you do need to call the 'data' function to replace the whole thing.  
But you don't use `RED.view.redraw()` - that is nothing to do with the TreeList. That is redrawing the flow in the editor, which the example you've copied does because it highlights a node in the workspace when you mouse over the corresponding item in the treeList.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [6 August 2019 13:06 UTC](https://discourse.nodered.org/t/best-way-to-update-a-treelist-in-the-nodes-config-screen/14046/3 "2019-08-06T13:06:54Z")

</div>

> [@knolleary](#):
>
> TreeList gets a lot more features in 1.0 that make adding/removing items easier without having to replace the whole structure.

Thanks Nick, good to know! Then I'm absolute sure I don't need to search further for a third party jQuery tree widget. And that way I can motivate people to install the 1.0, at least if they are interested in my new node 🤔

> [@knolleary](#):
>
> that is nothing to do with the TreeList. That is redrawing the flow in the editor,

Ah ok, then I can forget the redrawing for my use case...