pjekel
commented
11 years ago I apologize up front but I have an issue understanding the required logic. Why would you expand (click) a branch node in order to have it removed from the view?
Anyway, I typically don't provide examples based on a high level problem description, instead I ask the user to submit a working example that demonstrates the issue. However, there have been problems deleting tree nodes with the dijit/Tree in all dojo versions prior to 1.9, (see ticket 15858), therefore I created a simple application which I think does what you are looking for.
IMPORTANT
First, make sure you have at least dojo 1.9 and cbtree 0.9.3.
Next: copy the example below to the cbtree/demos/store directory and give it a try.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>The CheckBox Tree</title>
<style type="text/css">
@import "../../../dijit/themes/claro/claro.css";
@import "../../themes/claro/claro.css";
</style>
<script type="text/javascript">
var dojoConfig = {async: true, parseOnLoad: true, baseUrl: "../../../",
packages: [
{ name: "dojo", location: "dojo" },
{ name: "dijit", location: "dijit" },
{ name: "cbtree",location: "cbtree" }
]
};
</script>
<script type="text/javascript" src="../../../dojo/dojo.js"></script>
<script type="text/javascript">
require(["dojo/ready",
"cbtree/Tree",
"cbtree/model/ForestStoreModel",
"cbtree/store/ObjectStore"
], function( ready, Tree, StoreModel, ObjectStore) {
var data = [
{ name:"Root", parent:[] },
{ name:"Lisa", parent:["Homer","Marge"], visible: true},
{ name:"Bart", parent:["Homer","Marge"], visible: true},
{ name:"Maggie", parent:["Homer","Marge"], visible: true, checked: true},
{ name:"Patty", parent:["Jacqueline"], visible: true},
{ name:"Selma", parent:["Jacqueline"], visible: true},
{ name:"Rod", parent:["Ned"], visible: true},
{ name:"Todd", parent:["Ned"], visible: true},
{ name:"Abe", parent:["Root"], visible: true},
{ name:"Mona", parent:["Root"], visible: true},
{ name:"Jacqueline", parent:["Root"], visible: true},
{ name:"Homer", parent:["Abe","Mona"], visible: true},
{ name:"Marge", parent:["Jacqueline"], visible: true},
{ name:"Ned", parent:["Root"], visible: true},
{ name:"Apu", parent:["Root"], visible: true},
{ name:"Manjula", parent:["Apu"], visible: true}
]
var store = new ObjectStore({data: data, idProperty:"name"});
var model = new StoreModel({store: store, query: {visible: true}});
var tree = new Tree({model: model}, "CheckboxTree");
ready(function(){
// On click event change 'visible' property
tree.on("click", function (item, node, evt) {
item.visible = false;
store.put(item);
// mimic some external control
setTimeout(function () {
item.visible = true;
store.put(item);
}, 2000);
});
tree.startup();
});
});
</script>
</head>
<body class="claro">
<div id="CheckboxTree">
</div>
</body>
</html>Please let me know if this works for you...
ElGordito
I am creating a CBTree with a ForrestStoreModel with a query that looks like:
I have external controls that change the store attribute (visible) to provide different views of the data. The data is hierarchical and shows the company, branches, offices, and teams as root nodes depending on the visible attribute.
Everything works as expected until any of the branch nodes are opened. If a branch node is opened, then the visibility is changed so that node is no longer displayed, then changed again so the node is displayed, clicking on the node to open it (again) throws:
Tracking this down, it appears nodes are cached somewhere in the tree yet deleted from the dom when removed from visibility.
I have tried another approach by changing the model query, but that does not change the tree.
Is this a known issue or is there is a better way to change the displayed nodes?