$('#jstree_demo_div2').jstree({
'core': {
'data': {
"url": "tree.ashx?id=" + _id,
"dataType": "json" // needed only if you do not supply JSON headers
}
},
"checkbox": {
'visible': true,
'keep_selected_style': false,
},
"plugins": ["wholerow", "checkbox"]
});
I need to change the url (or the variable _id will change) and then refresh data.
But there seems to have a cache problem.
I monitored the HTTP request, the request param _id didn't change.
I've tried
'core': {
'data': {
"url": "tree.ashx?id=" + _id,
"cache":false, //←←←←
"dataType": "json" // needed only if you do not supply JSON headers
}
},
and it didn't work.
BTW, my jsTree.js version is 3.0.8.
I am using the following code to test your use case. It's refreshing the jstree without collapsing the whole tree.
<!DOCTYPE html>
<html>
<head>
<title>JSTree</title>
<link rel="stylesheet" href="dist/themes/default/style.css" />
<script src="dist/libs/jquery.js"></script>
<script src="dist/jstree.js"></script>
<script>
var arrayCollection;
$(function() {
arrayCollection = [
{"id": "animal", "parent": "#", "text": "Animals"},
{"id": "device", "parent": "#", "text": "Devices"},
{"id": "dog", "parent": "animal", "text": "Dogs"},
{"id": "lion", "parent": "animal", "text": "Lions"},
{"id": "mobile", "parent": "device", "text": "Mobile Phones"},
{"id": "lappy", "parent": "device", "text": "Laptops"},
{"id": "daburman", "parent": "dog", "text": "Dabur Man", "icon": "/"},
{"id": "dalmatian", "parent": "dog", "text": "Dalmatian", "icon": "/"},
{"id": "african", "parent": "lion", "text": "African Lion", "icon": "/"},
{"id": "indian", "parent": "lion", "text": "Indian Lion", "icon": "/"},
{"id": "apple", "parent": "mobile", "text": "Apple IPhone 6", "icon": "/"},
{"id": "samsung", "parent": "mobile", "text": "Samsung Note II", "icon": "/"},
{"id": "lenevo", "parent": "lappy", "text": "Lenevo", "icon": "/"},
{"id": "hp", "parent": "lappy", "text": "HP", "icon": "/"}
];
$('#jstree').jstree({
'core': {
'data': arrayCollection
},
"checkbox": {
'visible': true,
'keep_selected_style': false
},
"plugins": ["wholerow", "checkbox"]
});
});
function resfreshJSTree() {
$('#jstree').jstree(true).settings.core.data = arrayCollection;
$('#jstree').jstree(true).refresh();
}
function addNokia() {
var nokia = {"id": "nokia", "parent": "mobile", "text": "Nokia Lumia", "icon": "/"};
arrayCollection.push(nokia);
resfreshJSTree();
}
function deleteDalmatian() {
arrayCollection = arrayCollection
.filter(function(el) {
return el.id !== "dalmatian";
});
resfreshJSTree();
}
</script>
</head>
<body>
<input type="button" onclick="addNokia()" value="Add Nokia"/>
<input type="button" onclick="deleteDalmatian()" value="Delete Dalmatian"/>
<div id="jstree"></div>
</body>
</html>
Note:
After opening the above page in a browser, Open all the nodes and child nodes of the jstree.
Click on Add Nokia button.
It will add Nokia Lumia node to Mobile Phones node without collapsing
the tree to root node.
Similarly click on Delete Dalmaitian button.
And it will delete Dalmatian node from Dogs node and refreshes the
tree to display the new structure without collapsing to root node.
Related
Apologies for the vague question, I'm not too sure how to completely phrase what I'm wanting to do, which hasn't helped my searching for solutions at all! I'm pretty new to javascript and vega-lite but am trying to upskill. As such I'm working on COVID19 data made available by the New Zealand Ministry of Health, and looking at how I can visualise the data. If interested here is my rough site thus far: https://sirselim.github.io/covid_analysis/
I'm trying to define all days that have been in lockdown here in NZ, since the 26th March 2020, and display these in a different colour, see below for my current solution which is I believe 95% of the way there:
So I have essentially what I want being displayed, however I am manually defining the dates in the scale element, which doesn't seem like the correct way to do things. I would have thought I should be able to define a date range and it would apply the formatting to dates that fall in the defined range. The other, smaller, tweak I would like to make is not listing the dates in the legend but just have [blue] no lockdown and [orange] lockdown.
Here's the code:
<!DOCTYPE html>
<html>
<head>
<title>Embedding Vega-Lite</title>
<script src="https://cdn.jsdelivr.net/npm/vega#5.10.1"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite#4.9.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed#6.5.2"></script>
</head>
<body>
<div id="vis"></div>
<script type="text/javascript">
var yourVlSpec = {
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"width": 580,
"height": 200,
"padding": 5,
"description": "simple vega-lite chart with linked data",
"title": "Confirmed COVID cases in NZ DHBs",
"data": {
"url": "https://raw.githubusercontent.com/sirselim/covid_analysis/master/data//NZCOVID_confirmed_formatted.json"
},
"transform": [{
"sort": [{"field": "Date of report"}],
"window": [{"op": "count", "field": "count", "as": "cumulative_count"}],
"frame": [null, 0]
}],
"mark": {
"type": "bar",
"tooltip": true
},
"encoding": {
"x": {
"field": "Date of report",
"type": "nominal"
},
"y": {
"field": "cumulative_count",
"type": "quantitative"
},
"color": {
"value": "steelblue",
"condition": {
"test": {
"field": "Date of report",
"range": [
"2020-03-26",
"2020-04-30"
]
},
"field": "Date of report",
"title": "Days in lockdown",
"type": "nominal",
"scale": {
"domain": [
"2020-03-26",
"2020-03-27",
"2020-03-28",
"2020-03-29",
"2020-03-30",
"2020-03-31",
"2020-04-01"
],
"range": [
"#FFA500",
"#FFA500"
]
}
}
}
}
};
vegaEmbed('#vis', yourVlSpec);
</script>
</body>
</html>
Thank you in advance to anyone with some insight!
If you're using a test condition for the color, you can specify the values you want directly, rather than defining them indirectly via a custom scale.
For example (vega editor):
{
"title": "Confirmed COVID cases in NZ DHBs",
"data": {
"url": "https://raw.githubusercontent.com/sirselim/covid_analysis/master/data//NZCOVID_confirmed_formatted.json"
},
"transform": [
{
"sort": [{"field": "Date of report"}],
"window": [{"op": "count", "field": "count", "as": "cumulative_count"}],
"frame": [null, 0]
}
],
"mark": {"type": "bar", "tooltip": true},
"encoding": {
"x": {"field": "Date of report", "type": "nominal"},
"y": {"field": "cumulative_count", "type": "quantitative"},
"color": {
"value": "steelblue",
"condition": {
"test": {"field": "Date of report", "gt": "2020-03-26"},
"value": "orange"
}
}
},
"width": 580,
"height": 200
}
I have a problem while using fancytree.
After checking one or more items, drag and drop, the font color of the moved item has been changed
$(function() {
// Attach the fancytree widget to an existing <div id="tree"> element
// and pass the tree options as an argument to the fancytree() function:
$("#tree").fancytree({
extensions: ["dnd5", "multi", "table"],
checkbox: true,
// debugLevel: 1,
source: [{
"title": "Books",
"expanded": true,
"folder": true,
"children": [{
"title": "Art of War",
"type": "book",
"author": "Sun Tzu",
"year": -500,
"qty": 21,
"price": 5.95
},
{
"title": "The Hobbit",
"type": "book",
"author": "J.R.R. Tolkien",
"year": 1937,
"qty": 32,
"price": 8.97
},
{
"title": "The Little Prince",
"type": "book",
"author": "Antoine de Saint-Exupery",
"year": 1943,
"qty": 2946,
"price": 6.82
},
{
"title": "Don Quixote",
"type": "book",
"author": "Miguel de Cervantes",
"year": 1615,
"qty": 932,
"price": 15.99
}
]
},
{
"title": "Music",
"folder": true,
"children": [{
"title": "Nevermind",
"type": "music",
"author": "Nirvana",
"year": 1991,
"qty": 916,
"price": 15.95
},
{
"title": "Autobahn",
"type": "music",
"author": "Kraftwerk",
"year": 1974,
"qty": 2261,
"price": 23.98
},
{
"title": "Kind of Blue",
"type": "music",
"author": "Miles Davis",
"year": 1959,
"qty": 9735,
"price": 21.90
},
{
"title": "Back in Black",
"type": "music",
"author": "AC/DC",
"year": 1980,
"qty": 3895,
"price": 17.99
},
{
"title": "The Dark Side of the Moon",
"type": "music",
"author": "Pink Floyd",
"year": 1973,
"qty": 263,
"price": 17.99
},
{
"title": "Sgt. Pepper's Lonely Hearts Club Band",
"type": "music",
"author": "The Beatles",
"year": 1967,
"qty": 521,
"price": 13.98
}
]
},
{
"title": "Electronics & Computers",
"expanded": true,
"folder": true,
"children": [{
"title": "Cell Phones",
"folder": true,
"children": [{
"title": "Moto G",
"type": "phone",
"author": "Motorola",
"year": 2014,
"qty": 332,
"price": 224.99
},
{
"title": "Galaxy S8",
"type": "phone",
"author": "Samsung",
"year": 2016,
"qty": 952,
"price": 509.99
},
{
"title": "iPhone SE",
"type": "phone",
"author": "Apple",
"year": 2016,
"qty": 444,
"price": 282.75
},
{
"title": "G6",
"type": "phone",
"author": "LG",
"year": 2017,
"qty": 951,
"price": 309.99
},
{
"title": "Lumia",
"type": "phone",
"author": "Microsoft",
"year": 2014,
"qty": 32,
"price": 205.95
},
{
"title": "Xperia",
"type": "phone",
"author": "Sony",
"year": 2014,
"qty": 77,
"price": 195.95
},
{
"title": "3210",
"type": "phone",
"author": "Nokia",
"year": 1999,
"qty": 3,
"price": 85.99
}
]
},
{
"title": "Computers",
"folder": true,
"children": [{
"title": "ThinkPad",
"type": "computer",
"author": "IBM",
"year": 1992,
"qty": 16,
"price": 749.90
},
{
"title": "C64",
"type": "computer",
"author": "Commodore",
"year": 1982,
"qty": 83,
"price": 595.00
},
{
"title": "MacBook Pro",
"type": "computer",
"author": "Apple",
"year": 2006,
"qty": 482,
"price": 1949.95
},
{
"title": "Sinclair ZX Spectrum",
"type": "computer",
"author": "Sinclair Research",
"year": 1982,
"qty": 1,
"price": 529
},
{
"title": "Apple II",
"type": "computer",
"author": "Apple",
"year": 1977,
"qty": 17,
"price": 1298
},
{
"title": "PC AT",
"type": "computer",
"author": "IBM",
"year": 1984,
"qty": 3,
"price": 1235.00
}
]
}
]
},
{
"title": "More...",
"folder": true,
"lazy": true
}
],
activate: function(event, data) {},
lazyLoad: function(event, data) {
data.result = [{
"title": "Sub item",
"lazy": true
}, {
"title": "Sub folder",
"folder": true,
"lazy": true
}]
},
renderColumns: function(event, data) {
var node = data.node,
$tdList = $(node.tr).find(">td");
$tdList.eq(1).text(node.key);
$tdList.eq(2).text(!!node.folder);
},
dnd5: {
preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
preventRecursiveMoves: true, // Prevent dropping nodes on own descendants
autoExpandMS: 1000,
multiSource: true, // drag all selected nodes (plus current node)
// focusOnClick: true,
// refreshPositions: true,
dragStart: function(node, data) {
// allow dragging `node`:
data.dataTransfer.dropEffect = "move";
return true;
},
// dragDrag: function(node, data) {
// data.node.info("dragDrag", data);
// data.dataTransfer.dropEffect = "copy";
// return true;
// },
dragEnter: function(node, data) {
data.node.info("dragEnter", data);
data.dataTransfer.dropEffect = "link";
return true;
},
// dragOver: function(node, data) {
// data.node.info("dragOver", data);
// data.dataTransfer.dropEffect = "link";
// return true;
// },
dragEnd: function(node, data) {
data.node.info("dragEnd", data);
},
dragDrop: function(node, data) {
// This function MUST be defined to enable dropping of items on the tree.
//
// The source data is provided in several formats:
// `data.otherNode` (null if it's not a FancytreeNode from the same page)
// `data.otherNodeData` (Json object; null if it's not a FancytreeNode)
// `data.dataTransfer.getData()`
//
// We may access some meta data to decide what to do:
// `data.hitMode` ("before", "after", or "over").
// `data.dataTransfer.dropEffect`, `.effectAllowed`
// `data.originalEvent.shiftKey`, ...
//
// Example:
var dataTransfer = data.dataTransfer,
sourceNodes = data.otherNodeList,
event = data.originalEvent,
copyMode = event.ctrlKey || event.altKey;
if (copyMode) {
$.each(sourceNodes, function(i, o) {
o.copyTo(node, data.hitMode, function(n) {
delete n.key;
n.selected = false;
n.title = "Copy of " + n.title;
});
});
} else {
$.each(sourceNodes, function(i, o) {
o.moveTo(node, data.hitMode);
});
}
node.debug("drop", data);
node.setExpanded();
}
}
});
});
.fancytree-drag-source {
font-style: oblique;
}
.fancytree-drag-source.fancytree-drag-remove {
opacity: 0.5;
}
/* Prevent scrolling while DND */
ul.fancytree-container {
/*
height: 200px;
overflow: auto;
*/
/* position: inherit;*/
}
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Test D'n'D - Fancytree</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://wwwendt.de/tech/fancytree/src/skin-win8/ui.fancytree.css" rel="stylesheet">
<script src="https://wwwendt.de/tech/fancytree/src/jquery-ui-dependencies/jquery.fancytree.ui-deps.js"></script>
<script src="https://wwwendt.de/tech/fancytree/src/jquery.fancytree.js"></script>
<script src="https://wwwendt.de/tech/fancytree/src/jquery.fancytree.dnd5.js"></script>
<script src="https://wwwendt.de/tech/fancytree/src/jquery.fancytree.multi.js"></script>
<script src="https://wwwendt.de/tech/fancytree/src/jquery.fancytree.table.js"></script>
</head>
<body class="example">
<h1>Example: extended drag'n'drop sample</h1>
<div class="description">
This sample shows how to
<ul>
<li>implement drag'n'drop with multiple selected nodes
<li>allow modifier keys <kbd>Ctrl</kbd> or <kbd>Alt</kbd> to force copy instead of move operations
</ul>
</div>
<div>
<label for="skinswitcher">Skin:</label>
<select id="skinswitcher"></select>
</div>
<!-- Add a <table> element where the tree should appear: -->
<!--<p class="description">
Standard tree:
</p>
<div id="tree"></div>-->
<p class="description">
Table tree:
</p>
<table id="tree">
<colgroup>
<col width="*"/>
<col width="200px"/>
<col width="100px"/>
</colgroup>
<thead>
<tr>
<th></th>
<th>Key</th>
<th>Folder</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<p class="droppable">
Droppable.
</p>
</body>
This may be related to a bug that is closed with v2.30.
im working with Gupshup and I want to add subview in my chat.
To make this I create this vars:
var url="https://api.gupshup.io/sm/api/facebook/smartmsg/form/create";
var header = {"apikey":"xxxxxxxxxxxxxxxxxxx","Content-Type": "application/x-www-form-urlencoded","Accept":"application/json"};
var param={"formJSON":{
"title": "This is a test.",
"autoClose": false,
"message": "Thank You",
"callback-url": "https://www.gupshup.io/developer/bot/Cotizador/public",
"fields": [{
"type": "fbid",
"name": "fbname",
"label": "fbName"
}, {
"type": "input",
"name": "name",
"label": "Name",
"validations": [{
"regex": "^[A-Z a-z]+$",
"msg": "Only alphabets are allowed in this field"
}, {
"regex": "^[A-Z a-z]{6,}$",
"msg": "Minimum 6 characters required"
}]
}, {
"type": "radio",
"name": "gender",
"label": "Gender",
"options": [
"Male",
"Female"
],
"validations": [{
"regex": "",
"msg": ""
}]
}, {
"type": "select",
"name": "account",
"label": "AccountType",
"options": [
"current",
"savings"
],
"validations": [{
"regex": "",
"msg": ""
}]
}, {
"type": "checkbox",
"name": "interest",
"label": "Interests",
"options": [
"Cooking",
"Reading"
],
"validations": [{
"regex": "",
"msg": ""
}]
}],
"users": [
"Testing"
]
}}
And call post with:
context.simplehttp.makePost(url,JSON.stringify(param),header,parser);
And my call back
function parser(context, event) {
context.console.log("Handler https")
var result= JSON.parse(event.getresp);
if(result=="success"){
context.sendResponse("We have successfully stored your data");
}else{
context.sendResponse("We dont shoot");
}
}
But when, make the request post, but don't show me response in chat or in callback. What im doing wrong?
Sohan from Gupshup here.
The result from the API that you are using is this:
[{
"embedlink": "https://api.gupshup.io/sm/api/facebook/smartmsg/embed/66438dde-ec76-4d6e-a0d0-8cfc0c730e57",
"expired": false,
"fb-button": {
"title": "This is a test.",
"type": "web_url",
"url": "https://api.gupshup.io/sm/api/facebook/smartmsg/embed/66438dde-ec76-4d6e-a0d0-8cfc0c730e57",
"webview_height_ratio": "tall"
},
"id": "66438dde-ec76-4d6e-a0d0-8cfc0c730e57",
"signed-for": {
"display": "Testing",
"subdisplay": "Testing"
},
"smid": "1009"
}]
Thus when you do:
var result= JSON.parse(event.getresp);
if(result=="success"){
context.sendResponse(result) will display the entire JSON that you see above. To display the 'expired' field you can use result.expired.
Check this document for more information.
I have subscribed for page subscription for Facebook real time updates with Fields as "feed". When i am creating a new event, the Facebook real time updates sends me a wrong entry. The entry i got as a real time update is below.
{
"entry": [
{
"changes": [
{
"field": "feed",
"value": {
"photo_id": 1128416807216170,
"**post_id": "902483569809496_1128416807216170"**,
"sender_name": "Unofficial: Aerospace Demodavid",
"sender_id": 902483569809496,
"item": "photo",
"verb": "edited",
"link": "https://scontent.ford1-1.fna.fbcdn.net/t31.0-8/13717445_1128416807216170_1696828468485436508_o.jpg",
"published": 1,
"created_time": 1470269376
}
}
],
"id": "902483569809496",
"time": 1470269377
}
],
"object": "page"
}
From the above entry, if i query the Graph API for postid : 902483569809496_1128416807216170 , i get the below JSON response
{
"created_time": "2016-08-04T00:09:36+0000",
"actions": [
{
"name": "Like",
"link": "https://www.facebook.com/902483569809496/photos/gm.713007008848308/1128416807216170/?type=3"
},
{
"name": "Comment",
"link": "https://www.facebook.com/902483569809496/photos/gm.713007008848308/1128416807216170/?type=3"
},
{
"name": "See Friendship",
"link": "https://m.facebook.com/friendship/902483569809496/713006992181643/"
}
],
"from": {
"name": "Unofficial: Aerospace Demodavid",
"category": "Aerospace/Defense",
"id": "902483569809496"
},
"icon": "https://www.facebook.com/images/icons/photo.gif",
"is_hidden": false,
"is_expired": false,
"link": "https://www.facebook.com/902483569809496/photos/gm.713007008848308/1128416807216170/?type=3",
"object_id": "1128416807216170",
"picture": "https://scontent.xx.fbcdn.net/v/t1.0-0/s130x130/13892116_1128416807216170_1696828468485436508_n.jpg?oh=967e908192fcadc72eae9c11047f87e2&oe=582D6009",
"privacy": {
"allow": "",
"deny": "",
"description": "",
"friends": "",
"value": "EVERYONE"
},
"status_type": "added_photos",
"subscribed": false,
"to": {
"data": [
{
"id": "713006992181643",
"name": "Stevie G Event"
}
]
},
"type": "photo",
"updated_time": "2016-08-04T00:09:36+0000",
"id": "902483569809496_1128416807216170"
}
But the actual thing added here was an event and not a photo. The id should be 902483569809496_713006992181643 as in the below JSON and not 902483569809496_1128416807216170 which came from the real time update. Below is the JSON response which i am getting when i query the Graph API manually using the account id without using the real time update information.
{
"id": "902483569809496_713006992181643",
"from": {
"name": "Unofficial: Aerospace Demodavid",
"category": "Aerospace/Defense",
"id": "902483569809496"
},
"story": "Unofficial: Aerospace Demodavid added an event.",
"story_tags": {
"0": [
{
"id": "902483569809496",
"name": "Unofficial: Aerospace Demodavid",
"type": "page",
"offset": 0,
"length": 31
}
],
"41": [
{
"id": "713006992181643",
"name": "Stevie G Event",
"type": "event",
"offset": 41,
"length": 5
}
]
},
"picture": "https://scontent.xx.fbcdn.net/v/t1.0-0/c39.0.130.130/p130x130/13892116_1128416807216170_1696828468485436508_n.jpg?oh=5adc792bca82e0b110b3d6d98b81feae&oe=581E2680",
"link": "https://www.facebook.com/events/713006992181643/",
"name": "Stevie G Event",
"caption": "Stevie G Event",
"description": "Stevie G is the best",
"icon": "https://www.facebook.com/images/icons/event.gif",
"actions": [
{
"name": "Comment",
"link": "https://www.facebook.com/902483569809496/posts/713006992181643"
},
{
"name": "Like",
"link": "https://www.facebook.com/902483569809496/posts/713006992181643"
}
],
"privacy": {
"value": "EVERYONE",
"description": "",
"friends": "",
"allow": "",
"deny": ""
},
"type": "event",
"status_type": "created_event",
"object_id": "713006992181643",
"created_time": "2016-08-04T00:09:35+0000",
"updated_time": "2016-08-04T00:09:35+0000",
"is_hidden": false,
"is_expired": false
}
Why is there an inconsistency with the Facebook real time updates sent for an event creation. It treats it as a photo edit and not an event creation.
Please let me know if i am missing something.
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"}
]}
]}
]}
]}
]
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"}
]
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.