fancytree folder depth limited - is there an option

Question

I was going to build a component based on jquery's fancytree but the folder depth is stuck at 3 no matter what I do to my source data. Is there some special Tree Option feature I have been unable to spot which will prevent the limitation?

Thanks in advance. Kevin

Code I was using was:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
  <title>Fancytree - Example</title>
  <script src="../lib/jquery.js" type="text/javascript"></script>
  <script src="../lib/jquery-ui.custom.js" type="text/javascript"></script>
  <link href="../src/skin-xp/ui.fancytree.css" rel="stylesheet" type="text/css">
  <script src="../src/jquery.fancytree.js" type="text/javascript"></script>
  <script type="text/javascript">
   var DT = $.ui.fancytree;
  $.ui.fancytree.debug("Using fancytree " + $.ui.fancytree.version);
  $("#foldertree").fancytree({
   source: {
    url: "data.json"
  },
  lazyload: function(e, data){

    data.result = $.ajax({
      url: "data.json",
      dataType: "json"
    });
   }
  });
// call methods on multiple instances
 $("div:ui-fancytree").fancytree("foo", "after init");
 });
</script>
</head>
<body class="example">
<div id="foldertree" data-source="ajax" class="">
</div>
    <!-- (Irrelevant source removed.) -->
   </body>
</html>

The sample of data I was using (I have changed many times) but added it below for completion. My point is that I have been unable to drill down beyond 3 folders and cant see anywhere any tree option for removing a folder depth.

[
{"key": "top", "title": "Products", "folder": true, "children": [
    {"key": "under1", "title": "A-E", "folder": true, "children": [
        {"key": "under2", "title": "Parts 0-9", "folder": true ,          "children:": [
                {"key": "under3", "title": "F-M", "folder": true, "children": [
                  {"key": "under4", "title": "F-M", "folder": true, "children": [
                      {"key": "under5", "title": "F-M", "folder": true, "children": [
                          {"key": "under6", "title": "F-M", "folder": true, "children": [

                        ]}
                    ]}
                ]}
            ]}
        ]}
    ]}
]},
{"key": "11", "title": "Samples", "folder": true, "children": [
    {"key": "20", "title": "FG and H", "folder": true, "children": [
        {"key": "30", "title": "Parts 0-9", "folder": true , "children:": [
                {"key": "40", "title": "F-M", "folder": true, "children": [
                    {"key": "42", "title": "Sub-item 1.3.1", "folder": true, "children": [
                        {"key": "43", "title": "Sub-item 1.3.2"}
                    ]},
                    {"key": "44_1", "title": "Sub-item 1.3.2"}
            ]}
        ]}
    ]}
]}
]

score 0 · Answer 1 · answered Jan 12 '14 at 15:27

It is my data. I used a block of json from another example and added an extra folder depth and it works fine which goes some way to showing that there is not a limiter in this case. The data I used is below.

[
{"title": "Item 1"},
{"title": "Folder 2", "isFolder": true, "key": "folder2", "expand": true,
    "children": [
        {"title": "Sub-item 2.1",
            "children": [
                        {"title": "Sub-item 2.1.1",
                            "children": [
                                        {"title": "Sub-item 2.1.1.1",
                                        "children": [
                                        {"title": "Sub-item 2.1.1.1.1"},
                                        {"title": "Sub-item 2.1.1.2.2"},
                                        {"title": "Sub-item 2.1.1.1.3"},
                                        {"title": "Sub-item 2.1.1.2.4"}
                                    ]

                                        },
                                        {"title": "Sub-item 2.1.2.2"},
                                        {"title": "Sub-item 2.1.1.3"},
                                        {"title": "Sub-item 2.1.2.4"}
                                    ]
                            },
                        {"title": "Sub-item 2.1.2"},
                        {"title": "Sub-item 2.1.3"},
                        {"title": "Sub-item 2.1.4"}
                    ]
            },
        {"title": "Sub-item 2.2"},
        {"title": "Sub-item 2.3 (lazy)", "isLazy": true }
    ]
},
{"title": "Folder 3", "isFolder": true, "key": "folder3",
    "children": [
        {"title": "Sub-item 3.1",
            "children": [
                        {"title": "Sub-item 3.1.1"},
                        {"title": "Sub-item 3.1.2"},
                        {"title": "Sub-item 3.1.3"},
                        {"title": "Sub-item 3.1.4"}
                    ]
            },
        {"title": "Sub-item 3.2"},
        {"title": "Sub-item 3.3"},
        {"title": "Sub-item 3.4"}
    ]
},
{"title": "Lazy Folder 4", "isFolder": true, "isLazy": true, "key": "folder4"},
{"title": "Item 5"}

]

score 0 · Answer 2 · answered Nov 11 '15 at 23:01

I am using Fancytree to load a large data (about 23 MB) too and it works fine with more than 3 depths. One thing I have notice from your example and data is that you use lazyload option but not all your data has that isLazy = true. Give it a try!

Also you might want to check if the tree is throwing errors when lazy loading data. F12 on your browser.

fancytree folder depth limited - is there an option

2 Answers2