Click here to Skip to main content
15,867,568 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
My controller




[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public JsonResult GetAllNodes()
        {

            List<Employee> pEmployee = new List<Employee>();
            Employee tEmployee = new Employee();
            tEmployee.EMP_ID = 1;
            tEmployee.EMP_NAME = "steve";
            tEmployee.PARENT_EMP_ID = 0;
            pEmployee.Add(tEmployee);

            tEmployee = new Employee();
            tEmployee.EMP_ID = 2;
            tEmployee.EMP_NAME = "Joe";
            tEmployee.PARENT_EMP_ID = 1;
            pEmployee.Add(tEmployee);


            tEmployee = new Employee();
            tEmployee.EMP_ID = 3;
            tEmployee.EMP_NAME = "Eric";
            tEmployee.PARENT_EMP_ID = 1;
            pEmployee.Add(tEmployee);

            tEmployee = new Employee();
            tEmployee.EMP_ID = 4;
            tEmployee.EMP_NAME = "Henry";
            tEmployee.PARENT_EMP_ID = 0;
            pEmployee.Add(tEmployee);

            tEmployee = new Employee();
            tEmployee.EMP_ID = 5;
            tEmployee.EMP_NAME = "Katie";
            tEmployee.PARENT_EMP_ID = 4;
            pEmployee.Add(tEmployee);

            tEmployee = new Employee();
            tEmployee.EMP_ID = 6;
            tEmployee.EMP_NAME = "george";
            tEmployee.PARENT_EMP_ID = 4;
            pEmployee.Add(tEmployee);

            tEmployee = new Employee();
            tEmployee.EMP_ID = 7;
            tEmployee.EMP_NAME = "Renai";
            tEmployee.PARENT_EMP_ID = 0;
            pEmployee.Add(tEmployee);

            tEmployee = new Employee();
            tEmployee.EMP_ID = 8;
            tEmployee.EMP_NAME = "Marc";
            tEmployee.PARENT_EMP_ID = 7;
            pEmployee.Add(tEmployee);

            tEmployee = new Employee();
            tEmployee.EMP_ID = 9;
            tEmployee.EMP_NAME = "John";
            tEmployee.PARENT_EMP_ID = 7;
            pEmployee.Add(tEmployee);

            tEmployee = new Employee();
            tEmployee.EMP_ID = 10;
            tEmployee.EMP_NAME = "Andrew";
            tEmployee.PARENT_EMP_ID = 0;
            pEmployee.Add(tEmployee);

            return Json(pEmployee, JsonRequestBehavior.AllowGet);
         //   return pEmployee;
        }


View



<script type="text/javascript">


    $(document).ready(function () {
        $.getJSON("Employee/GetAllNodes", function (result) {
            alert(result);
            alert(JSON.stringify(result));
            $("#treeViewDiv").jstree({
                "plugins": ["themes", JSON.stringify(result)]
            });
        });
    });
</script>




Now the issue is that when result comes from controller ,it doesnt bind to jstree.How to bind the data to jstree.
Posted
Updated 31-Mar-17 2:14am

1 solution

It's has been almost 2 years since I managed to use jstree in a project (and I used a "tree data structure" instead of a List), but try dropping the stringify part and simply doing:
JavaScript
$("#treeViewDiv").jstree({
    "plugins": ["themes", result]
});


or if that is not valid (I can't remember right now), go for the more structured approach (so the options you might want to specify become more readable):
JavaScript
$("#treeViewDiv").jstree({
    "json_data": { "data": result },
    "plugins": ["themes", "json_data"]
});


Soren Madsen
 
Share this answer
 
Comments
Member 10435696 22-Feb-14 5:08am    
I am using ur 2nd solution..Bt issue still exists.I am getting this from controller in my 'result'..
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Now this doesnt bind to my jstree
SoMad 22-Feb-14 5:49am    
Does it work when your controller only returns a single Employee object instead of the list?

Soren Madsen
Member 10435696 24-Feb-14 1:50am    
no then also it doesnt work.In case of single employee,it gives
[object Object]
and this also doesnt bind
Member 10435696 26-Feb-14 5:47am    
I have done some changes to my view but still it doesnt work..Any help will be appreciated
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: 'POST',
url: 'Employee/GetAllNodes',
contentType: "application/json; charset=utf-8",
dataType: 'json',
data: "{}",
success: function(msg) {
alert((msg));
$('#treeViewDiv').jstree({
"json_data": { "data":msg},
"plugins": ["themes", "json_data"]
});
}
, timeout: 60000
});
});

</script>


and in my controller i have changed last 2 lines


var jsonData = new JavaScriptSerializer().Serialize(pEmployee);

return Json(jsonData);


bt jstree doesnt bind
SoMad 26-Feb-14 18:03pm    
Sorry about not getting back to you, but I got caught up in some other things. I have not worked with jstree using AJAX calls. If you switch back to what you had before, I think I can help you.

I realized that the problem is that you are not translating the data objects into the format expected by jstree. This was one of the things I had trouble with as well and, but since my data was not structured as a list of object, but as a "tree data type" (a root node object with a title and a list of child nodes objects, etc.), I figured you might have picked up the method of just passing in the list directly from somewhere. As far as I know, that will not work.

The expected format of the node is shown below. Since you are in the early stages, you can try to simply set the 'text' field for all the nodes. I can give you a sample of the function I have that converts my objects to the format expected by jstree. Unfortunately I don't have the code with me right now, so I have to add that here when I get home 5-6 hours from now.

// Expected format of the node (there are no required fields)
{
id : "string" // will be autogenerated if omitted
text : "string" // node text
icon : "string" // string for custom
state : {
opened : boolean // is the node open
disabled : boolean // is the node disabled
selected : boolean // is the node selected
},
children : [] // array of strings or objects
li_attr : {} // attributes for the generated LI node
a_attr : {} // attributes for the generated A node
}


Soren Madsen

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900