Jstree - Add nodes to tree by user input (button click)

Question

I have a ASP.NET MVC 4.0 project using JsTree. The JsTree is being populated thought a model that returns a JSON.

Now my problem is this, i have a huge tree that makes the user experience pretty bad. What i need is to load a few items (let'say 20), and have a button that when clicked by the user add's the next 20 records to the tree.

I have been searching in Google JsTree documentation and SO, but i haven't found a example that works for me.

Can anyone help me?

Thanks in advanced.

Ok, some break trought. I kind of got this working. In my view the user input call this function:

function getNextRecords() {

var new_data = { "attr": { "ID": "999999999999", "NodeText": "999999999999" },
    "data": "999999999999",
    "children": [{
        "attr": { "ID": "ACT99", "NodeText": "969994222" },
        "data": "969994222 - PPP",
        "children": [{
            "attr": { "ID": "TRFps800", "rel": "disabled" },
            "data": "Voz com unlimited 800 fidelização até 01/11/2019",
            "state": "open"
        }],
        "state": "open"
    }], "state": "open"
};

var retDom = $.jstree._reference("#demoTree")._parse_json(new_data, -1, true);
$("#demoTree").jstree("move_node", retDom, -1, "inside", false, false, true);

}

This is working fine, expect that the parse json creates a "ul" instead of a "li" any ideas in how to change that?

Isn't ajax loading good enough for you? You can load whole 'branch' in one go. Or I guess you can load part of the branch and with another load of the same branch load more. — Radek, Oct 01 '12 at 22:58
Hi Radek, the ajax is not good enough because i have thousands of child's in the root node, and i'm already using progressive_render, that according to the documentation only the visible (open nodes) parts of the returned JSON are converted to DOM nodes, any hidden parts are saved away and parsed ondemand. The second part "load part of the branch and with another load of the same branch load more" is exactly what i'm trying to do but i have not yet succeeded, is it possible to have an example? Thank you :) — NelsonFerro, Oct 03 '12 at 09:23

score 2 · Accepted Answer · answered Oct 10 '12 at 14:16

OK, i finally got this working, this is the final version of my Function i hope this helps someone.

function getNextRecords() {

var new_data = { "attr": { "ID": "999999999999", "NodeText": "999999999999" },
    "data": "999999999999",
    "children": [{
        "attr": { "ID": "ACT99", "NodeText": "969994222" },
        "data": "969994222 - PPP",
        "children": [{
            "attr": { "ID": "TRFps800", "rel": "disabled" },
            "data": "Voz com unlimited 800 fidelização até 01/11/2019",
            "state": "open"
        }], "state": "open"
    }], "state": "open"
};

    var ref = $("li ul:first")
    var retDom = $.jstree._reference("#demoTree")._parse_json(new_data, ref, true);
      $("#demoTree").jstree("move_node", retDom, ref, "first", false, false, true);

}

This add a new child after the first UL.

score 0 · Answer 2 · answered Oct 03 '12 at 22:57

0

The second part "load part of the branch and with another load of the same branch
load more" is exactly what i'm trying to do but i have not yet succeeded, is it
possible to have an example?

Such task must be taken care of on server side. Take is this way: jsTree only displays whatever is passed to it. So you make a decision what to load in a first go and you can have a button (to reload the whole tree or a branch only) to load more or replace whatever was loaded. Don't forget the logic has (almost) nothing to do with jsTree.

answered Oct 03 '12 at 22:57

Radek

13,813
52
161
255

1

So, what you are saying is something like, on the button click make a call to a function in the controller with a series of parameters (last node id loaded, number of nodes to get) get a new JSON with all the information received and load a new tree with all the new info and old? If i do that the DOM will become to heavy for the user experience. Or is possible just to add the new nodes? Is possible to have an example? Thanks :) – NelsonFerro Oct 04 '12 at 10:26
i saw this solution but my json is totally replace by the new one: var tree = $.jstree._reference('my_tree'); var settings = tree.get_settings(); settings.json_data.data = new_data; tree._set_settings(settings); tree.refresh(-1); Any idea in how to append? – NelsonFerro Oct 04 '12 at 16:32
How? It has nothing to do with jsTree. It is about the server side. jsTree makes ajax call to get the data and server replies. So you need to change your code on server side (mainly). – Radek Oct 04 '12 at 22:52
1

ok, i believe that i'm nothing explaing my self properly. @Radek, i saw this question that sums up what i need, unfortunately it was unanswered. http://stackoverflow.com/questions/9410038/jstree-progressive-render-with-ajax-render-nodes-from-an-array – NelsonFerro Oct 08 '12 at 15:55
OK, so it is more about rendering than anything else. I'd say that the question is if it's about jsTree or dom or the browser. – Radek Oct 08 '12 at 21:34
i just edited the question, i think i'm on the right path, the json is hard coded because i don't yet have access to the web-server. – NelsonFerro Oct 09 '12 at 11:05

Jstree - Add nodes to tree by user input (button click)

2 Answers2