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

Developing Nodes
1

Hi folks,

Would like to use the 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 of the Link-node, I see that the view is redrawed very frequently:

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

2

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.

1 Like
3

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 :thinking:

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