How to redraw jstree tree with new data?

Question

So, my question. I initialized my tree with some data:

$('#tree').jstree({
    'core' : {
        'data' : [
            'Simple root node',
            {
                'id' : 'node_2',
                'text' : 'Root node with options',
                'state' : { 'opened' : true, 'selected' : true },
                'children' : [ { 'text' : 'Child 1' }, 'Child 2']
            }
        ]
    });

But after some actions, I want to redraw tree with new data. I try to use refresh and redraw methods from API, but it unsuccessfully.

Can you give me advice, how to refresh tree (without destroy -> create new instance (it works, but it will affect the performance))?

There are two common jQuery plugins called jsTree. This question is for the one found here: http://www.jstree.com/ and looks like it's v3.0 syntax. I also want to blow away a tree I've loaded and replace it with a new tree that consists of just a root node.. Have not had much luck tinkering with create or create_node to start creating a new tree. I get no errors in JS but am not seeing any tree change being rendered. So, very interested in any feedback to this question too since it would be the exact same question I'd ask. — Neil Cresswell, Mar 16 '14 at 22:25
What finally worked for me (was not seeing replaced tree, even with a 'refresh' command,) was including the check_callback parameter in the core reference and setting it to true. Then I could see my replaced tree. Will post an answer with these details. — Neil Cresswell, Mar 16 '14 at 22:48

score 19 · Answer 1 · edited Aug 23 '16 at 09:47

19

At version 3 you can reload the tree :

$('#treeId').jstree(true).settings.core.data = newData;
$('#treeId').jstree(true).refresh();

edited Aug 23 '16 at 09:47

Fishcake

10,496
7
44
72

answered May 11 '16 at 12:39

faxiubite

191
1
3

I hope the OP hasn't been waiting all this time for that. – Strawberry May 11 '16 at 12:58
5

Probably not but it certainly helped me. – FernandoZ Aug 01 '16 at 23:35

score 9 · Answer 2 · edited Oct 16 '14 at 13:18

9

refresh() will refresh the tree to it's initial state, which means that newly created nodes are deleted

What you want is redraw(true)

edited Oct 16 '14 at 13:18

Tasos K.

7,979
7
39
63

answered Oct 16 '14 at 12:43

user3926752

91
1
1

Neil Cresswell · Answer 3 · 2014-03-16T22:58:19.790

7

Try including the check_callback parameter in your core settings, (including the initial load) and ensure it is set to true. Then you should be able to see any changes made. Without this, I've found that I'm not seeing the replacement data, just the original data.

$('#tree').jstree({
'core' : {
    'check_callback' : true,
    'data' : [
        'Simple root node',
        {
            'id' : 'node_2',
            'text' : 'Root node with options',
            'state' : { 'opened' : true, 'selected' : true },
            'children' : [ { 'text' : 'Child 1' }, 'Child 2']
        }
    ]
});

That handled the refresh part for me, but depending on what you're doing, you could also call $('#tree').jstree('refresh');.

edited Mar 16 '14 at 22:58

answered Mar 16 '14 at 22:51

Neil Cresswell

1,145
8
20

6

I try to include 'check_callback': true, but in unsuccesfully for me – Mar 17 '14 at 07:18
1

You might want to include all your code, including a JS fiddle then in case the issue is with how you're changing the data rather than how you're refreshing maybe? Also, to answer the secondary question, destroying is less efficient but not really noticeable time-wise from a user perspective, so if that works for you, you might want to stick to it if this turns out to not be easily resolvable. – Neil Cresswell Mar 17 '14 at 16:54

score 4 · Answer 4 · edited Mar 01 '21 at 08:48

4

You need this

$('#tree').jstree(true).refresh(false, true);

refresh params:skip_loading?: boolean, forget_state?: any params:

skip_loading=false

mean: You want see loading indicator

forget_state=true: forget previous state (selections, data, etc)

edited Mar 01 '21 at 08:48

TarangP

2,711
5
20
41

answered Feb 26 '21 at 20:12

aagincic

41
1

score 1 · Answer 5 · answered Aug 25 '22 at 13:35

1

In 2022, v3.3.x this is the answer, old api does not work anymore

  $('#jstree_icon').jstree(true).destroy();

answered Aug 25 '22 at 13:35

hoogw

4,982
1
37
33

It worked, I also wrapped it with try{}catch{} in case it is not loaded. – Adel Mourad Apr 06 '23 at 11:39

How to redraw jstree tree with new data?

5 Answers5

Linked