CODEWITHSUNDEEP
jqueryjstree
bbqchickenrobot
bbqchickenrobot

Reputation: 3709

jstree - load entire tree in one call

I'm using this: 

$('#topicTree').jstree({ 
        "json_data" : {
            "ajax" : {
                url : serviceUrl
            }
    },
    "plugins" : ["themes", "json_data", "ui", "crrm", "hotkeys"]
});

but when I click a node it refires the ajax request and retrieves and fills the node with the entire top level tree node again. I know there is an on demand or lazy loading feature, but I"m trying to avoid that if possible. I've also used the following: 

$("#tree").jstree({
    "plugins" : ["themes", "json_data", "ui", "crrm", "hotkeys"],
    "json_data" : {
        "ajax" : {
            "type": 'GET',
            "url": function (node) {
                //debugger;
                var nodeId = "";
                var url = "";
                if (node == -1)
                {
                    url = "/ajax/gettopics/";
                }
                return url;
            },
            "success": function (data) {
                //debugger;
                return data;
            },
            "error":function(data) {
                //debugger;
                alert("error loading tree!");
            }
        }
    }
}).bind("loaded.jstree", function (event, data) {
    //alert("TREE 2 IS LOADED!");
});

Upvotes: 0

Views: 1886

Answers (1)

bbqchickenrobot
bbqchickenrobot

Reputation: 3709

Ok, so found out the issue... my DTO that is serialized to Json is case sensitive. The devil is in the details - I switched the naming convention from:

public class JsTreeJsonNode
{
    public string data { get; set; }
    public Dictionary<string, string> attr { get; set; }
    public string state { get; set; }
    public List<JsTreeJsonNode> Children { get; set; } 
}

to 

public class JsTreeJsonNode
    {
        public string data { get; set; }
        public Dictionary<string, string> attr { get; set; }
        public string state { get; set; }
        public List<JsTreeJsonNode> children { get; set; } 
    }

That capital 'C' in children really caused some turmoil. Grrr...

When the children dict is populated the ajax request is not fired unless it is returned as null or empty (zero members) which works out well for my scenario.

Upvotes: 1

Related Questions