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))?

Answer 1

At version 3 you can reload the tree :

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

Answer 2

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

What you want is redraw(true)

Answer 3

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');.