FancyTree loads all nested children
Here is my problem. I am using checkboxes and lazy loading via ajax. However, if you were to validate the parent without extending it, none of the child nodes were loaded so that they would not be validated. How do I load all the child and child nodes of the children under the parent and validate them all when they validate the parent? Thanks and this is what I have so far
$(function () {
// Create the tree inside the <div id="tree"> element.
$("#tree").fancytree({
source: { url: "/Home/GetData", cache: true }
, checkbox: true
, icons: false
, cache: true
, lazyLoad: function (event, data) {
var node = data.node;
data.result = {
url: "/Home/GetTreeViewData/" + node.key
, data: { mode: "children", parent: node.key }
, cache: true
};
}
, selectMode: 3
, select: function (event, data) { //here where I need to load the children and any sub children for that node, if it has them, so they can be set to checked
}
, strings: {
loading: "Grabbing places and events…",
loadError: "Load error!"
},
})
});
Update The reason I need to pull this client side is because it is a tree structure that will load google map markers. So if I have a structure like
Parent1
-> child1-1
-> → child1-1-1
-> child1-2
all of these child nodes are lazy loaded. however, if they were to check the parent node 1, then I would need to load the markers for all of those child nodes. This is why I am looking for a way to recursively get all children. Because it would be very difficult to keep track of which markers were added / added if I don't just load the tree items and check them. It makes sense?
source to share
I think you could use an event select
:
select: function(event, data) {
var node = data.node;
if (node.isSelected()) {
if (node.isUndefined()) {
// Load and select all child nodes
node.load().done(function() {
node.visit(function(childNode) {
childNode.setSelected(true);
});
});
} else {
// Select all child nodes
node.visit(function(childNode) {
childNode.setSelected(true);
});
}
}
}
This way, if no child nodes were loaded, they will be loaded and selected after that.
source to share
First: you may not even need to load all child nodes.
In selectMode: 3, the selected parent means "all children are also selected", so if you publish the most selected parent nodes to your server, the backend can handle it accordingly. Argument stopOnParent method tree.getSelectedNodes also supports it.
Another option is to fix the selection state of child nodes after loading the lazy parent:
$("#tree").fancytree({
checkbox: true,
selectMode: 3,
source: { url: "/getTreeData", cache: false },
lazyLoad: function(event, data) {
data.result = {
url: "/getTreeData",
data: {mode: "children", parent: node.key},
cache: false
};
},
loadChildren: function(event, data) {
// Apply parent state to new child nodes:
data.node.fixSelection3AfterClick();
},
Update
If you really need to load lazy child nodes when selecting a parent, you can try in addition to the above code (Untested)
$("#tree").fancytree({
...
select: function(event, data) {
if( data.node.isUndefined() ) {
data.node.load(); // triggers lazyLoad to load children
// alternative: node.expand()
}
},
source to share
When adding the deselect option, Andrew's code will be:
if (node.isSelected()) {
if (node.isUndefined()) {
// Load and select all child nodes
node.load().done(function() {
node.visit(function(childNode) {
childNode.setSelected(true);
});
});
} else {
// Select all child nodes
node.visit(function(childNode) {
childNode.setSelected(true);
});
}
}
else{
if (node.isUndefined()) {
// Load and unselect all child nodes
node.load().done(function() {
node.visit(function(childNode) {
childNode.setSelected(false);
});
});
} else {
// Select all child nodes
node.visit(function(childNode) {
childNode.setSelected(false);
});
}
}
source to share