jsTree - Populate Tree Dynamically using AJAX/C#Web Method

Question

I have a div which I would like to fill with a jsTree:

I get the "Loading" icon where the tree is meant to display, however, there would seem to be a javascript error, even though one is not thrown.

I load my folder structure from an AJAX Request as follows. The Documents.aspx/GetFolders Web Method returns a List containing FolderId, ParentId & Folder Name. I have debugged the web method and it is passing the correct results to the jsTree "data" function.

$.ajax({
   type: "POST",
   url: 'Documents.aspx/GetFolders',
   contentType: "application/json; charset=utf-8",
   success: function (data) {
      data = data.d;

      $("#tree").jstree({
         "core": {
            "themes": {
               "responsive": true
            },
            "data": function () {
               var items = [];
               items.push({ 'id': "jstree_0", 'parent': "#", 'text': "Documents" });
               $(data).each(function () {
                  items.push({ 'id': "jstree_" + this.DocumentFolderId, 'parent': "jstree_" + this.ParentId, 'text': "" + this.Name });
               });
               return items;
            }
         },
         "types": {
            "default": {
               "icon": "fa fa-folder icon-lg"
            },
         },
         "plugins": ["contextmenu", "dnd", "state", "types"]
      });
   },
   error: function () {
      toastr.error('Error', 'Failed to load folders<span class=\"errorText\"><br/>There was a fatal error. Please contact support</span>');
   }
});

After debugging the code, it seems the data is being retrieved correctly and is returning the object array as intended.

Is there are any problem with the above (or is there somewhere else I should be looking)? Or is there a better method of achieving its intended purpose?

Peter Liaros · Accepted Answer · 2015-02-19 05:57:55Z

10

I think I have finally found the answer! :)

"core": {
   "themes": {
      "responsive": true
   },
   "data": {
      type: "POST",
      url: "Documents.aspx/GetFolders",
      contentType: "application/json; charset=utf-8",
      success: function (data) {
         data.d;
         $(data).each(function () {
            return { "id": this.id };
         });
      }
   },
}

Server side, you need to return the data in the array format required, i.e:

[{id = "node0", parent = "#", text = "Documents"},
{id = "node1", parent = "node0", text = "Public"},
{id = "node2", parent = "node0", text = "Restricted"}]

answered Feb 19, 2015 at 5:57

Peter Liaros

1611 gold badge3 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Andy Over a year ago

When I tried this is just shows "Loading..." on jstree with the spinner. My ajax script returns a 200 (OK) status so I know it is loading the source data. Any ideas why this may be happening?

uvylight · Accepted Answer · 2019-06-27 02:53:14Z

1

Just in case anyone has the "loading..." issue, this format fixed it for me when returning data.

[{"id":"node0", "parent":"#", "text":"Documents"},
{"id":"node1", "parent":"node0", "text":"Public"},
{"id":"node2", "parent":"node0", "text":"Public"}]

answered Jun 27, 2019 at 2:53

uvylight

1,1091 gold badge6 silver badges3 bronze badges

Collectives™ on Stack Overflow

jsTree - Populate Tree Dynamically using AJAX/C#Web Method

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related