Fancytree root has not beed rendered

Question

I have got a fancytree like that:

var tree: Fancytree.Fancytree;

var options: any = <Fancytree.FancytreeOptions>{
    clickFolderMode: 1,
    source: $.ajax({
        url: ..., // some url to source
        type: "POST",
    }),
    extensions: ["dnd"],
    dnd: {
        autoExpandMS: 1000,
        preventVoidMoves: true,
        dragStart: function (node) {
            ...
        },
        dragStop: function (node) {
            ...
        },
        dragEnter: function (node, sourceNode) {
            ...
        },
        dragOver: function (node, sourceNode, hitMode) {
            ...
        },
        dragDrop: function (node, sourceNode, hitMode) {
            ...
        },
        revert: true
    },
    init: function (isReloading, isError) {
        ...
    }
};

tree = $('#tree3').fancytree(options);

My data which is loading to tree source looks like:

res = {
    ContentEncoding: null,
    ContentType: null,
    Data: {
        activate: false,
        children: {
            [0]: {
                activate: false,
                children: null,
                expand: false,
                extraClasses: null,
                focus: false,
                hideCheckbox: false,
                href: null,
                icon: null,
                isFolder: false,
                isLazy: false,
                key: "2",
                layerId: "node2",
                noLink: false,
                @select: false,
                title: "I am node 2",
                tooltip: null,
                @type: Layer,
                unselectable: false
            },
            [1] : {
                ...
            },
            [2] : {
                ...
            },
            ...
        },
        expand: true,
        extraClasses: null,
        focus: false,
        hideCheckbox: false,
        href: null,
        icon: null,
        isFolder: true,
        isLazy: false,
        key: "1",
        layerId: null,
        noLink: false,
        @select: false,
        title: "root",
        tooltip: null,
        @type: Group,
        unselectable: false
    },
    JsonRequestBehavior: DenyGet,
    MaxJsonLength: ...,
    RecursionLimit: null
}

res is type of System.Web.Mvc.JsonResult.

But when my tree had been rendered I saw something like that:

|
--- I am node 2
|
--- I am node 3
|
--- I am node 4
|
...

but I expect to see tree like this:

root
    |
    --- I am node 2
    |
    --- I am node 3
    |
    --- I am node 4
    |
    ...

I have to say that I have this tree in two versions. First of them is dynatree. This dynatree working good. It have this same source and this same data.

I made decision that I want to change dynatree to fancytree.

My jquery code are not removing tree root or are not disabling it so I have a feeling that it might be a problem with my tree configuration. I'm thinking that it might be problem into tree options or the data format or some parameters are wrong? I really don't know.

If I try to check root node after my tree has been inited I can see something like that:

So this tree have a root - just only not rendered it.

Any sugestions?

---

I have to add something. I am not waiting for ready tip. I am still looking for answer for my bug and I tried something a while moment ago.

I replaced a tree source from dynamic ajax post to static json which is answer for this ajax post. Just like that:

From:

source: $.ajax({
        url: ..., // some url to source
        type: "POST",
    }),

This is fancytree in HTML - there is not a root node:

To static:

source: [
    {
        "title": "root",
        "layerId": null,
        "isFolder": true,
        "key": "1",
        "expand": true,
        "isLazy": false,
        "tooltip": null,
        "href": null,
        "icon": null,
        "extraClasses": null,
        "noLink": false,
        "activate": false,
        "focus": false,
        "select": false,
        "hideCheckbox": false,
        "unselectable": false,
        "type": 0,
        "children": [
            { 
                "title": "I am node 2", 
                "layerId": "node2", 
                "isFolder": false, 
                "key": "2", 
                "expand": false, 
                "isLazy": false, 
                "tooltip": null, 
                "href": null, 
                "icon": null, 
                "extraClasses": null, 
                "noLink": false, 
                "activate": false, 
                "focus": false, 
                "select": false, 
                "hideCheckbox": false, 
                "unselectable": false, 
                "type": 1,
                "children": null 
            },
            { ... },
            { ... },
            { ... },
            { ... }
        ]
    }

and my tree has been rendered as I expect that - with root.

This is fancytree in HTML - with root node:

I'm so confused. What does it mean for me? It is something wrong with my way to post for data?

---

I changed way to get data from:

source: $.ajax({
            url: ..., // some url to source
            type: "POST",
        }),

to:

source: {
            url: ..., // some url to source
            type: "POST",
        },

it doesn't matter for me because I still have this bug but I want to say that I don't need use additional $.ajax statement - jquery.fancytree.js does it.

Answer 1

Fancytree maintains an invisible root node. If you pass a list of children, they will appear as top-level nodes.

In order to create one visible top-level node, you should pass one node with a list of children (how would you define its title and other properties otherwise?):

[
  {
    "title": "My root",
    "children": [
      {"title": "I am node 2", ...},
      {"title": "I am node 3", ...},
      ...
    ]
  }
]