I've been trying to create a checkbox tree in my settings for a widget.
The checkbox tree docs are here: http://thejekels.com/dojo/cbtree_AMD.html
To get the data into the tree I'm using the code below. The data array is not what I'll be using in the end product. The problem I'm having is that the data property of the store is always null. The _jsonData property of the store object has the array in it though. Can anyone see what I'm doing wrong?
var data = [{ id: "earth", name: "The earth", type: "planet", population: "7 billion" }];
//var data = result;
var store = new ItemFileWriteStore({ data: data });
var model = new ForestStoreModel({
store: store,
query: { id: "earth" },
rootLabel: "Layers",
checkedRoot: true
});
var tree = new Tree({
model: model,
id: "MenuTree",
branchIcons: true,
branchReadOnly: false,
checkBoxes: true,
nodeIcons: true
});
Message was edited by: Andrew Terwiel
I think I need to call fetch() on the store before using it in the model.
Message was edited by: Andrew Terwiel
I've made some progress. The following code will display a rudimentary tree, as shown. The checkboxes don't show for some reason and I can't get the parent-child hierarchy to display.
var layers = {};
layers.label = 'name';
layers.identifier = 'name';
layers.items = [
{ name: "Family", type: "root" },
{ name: "Abe", type: "parent", parent: ["root"], hair: "Brown" },
{ name: "Jacqueline", type: "parent", parent: ["root"], hair: "Brown" },
{ name: "Homer", type: "parent", parent: ["Abe"], hair: "none" },
{ name: "Marge", type: "parent", parent: ["Jacqueline"], hair: "blue" },
{ name: "Bart", type: "child", parent: ["Homer", "Marge"], hair: "blond" },
{ name: "Lisa", type: "child", parent: ["Homer", "Marge"], hair: "blond" },
{ name: "Maggie", type: "child", parent: ["Homer", "Marge"], hair: "blond" }
];
var store = new ItemFileWriteStore({ data: layers });
var model = new ForestStoreModel({
store: store
});
var tree = new Tree({
model: model,
id: "MenuTree"
});
connect.connect(tree, "onCheckBoxClick", model, that._checkBoxClicked);
tree.placeAt(that.checkboxTreeDiv);
Solved! Go to Solution.
Andrew,
Here is a help link for using third party libraries:
Use other JavaScript libraries—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers
Andrew,
Not sure if this will help but here is a JS Sample app that uses the cbtree.
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices--> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>The CheckBox Tree with Observable Store</title> <link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css"> <style> html, body, #mapDiv { padding: 0; margin: 0; height: 100%; } </style> <script type="text/javascript"> var dojoConfig = { packages: [ { name: "cbtree", location: location.pathname.replace(/\/[^/]+$/, '') + "/cbtree" } ] }; </script> <script src="http://js.arcgis.com/3.14/"></script> <script> require([ "dojo/ready", "dojo/store/Memory", "dojo/store/Observable", "cbtree/Tree", // Checkbox tree "cbtree/model/TreeStoreModel" // ObjectStoreModel ], function (ready, Memory, Observable, Tree, ObjectStoreModel) { var data = [ { id: "earth", name: "The earth", type: "planet", population: "6 billion" }, { id: "AF", name: "Africa", type: "continent", population: "900 million", area: "30,221,532 sq km", timezone: "-1 UTC to +4 UTC", parent: "earth" }, { id: "EG", name: "Egypt", type: "country", parent: "AF" }, { id: "KE", name: "Kenya", type: "country", parent: "AF" }, { id: "Nairobi", name: "Nairobi", type: "city", parent: "KE" }, { id: "Mombasa", name: "Mombasa", type: "city", parent: "KE" }, { id: "SD", name: "Sudan", type: "country", parent: "AF" }, { id: "Khartoum", name: "Khartoum", type: "city", parent: "SD" }, { id: "AS", name: "Asia", type: "continent", parent: "earth" }, { id: "CN", name: "China", type: "country", parent: "AS" }, { id: "IN", name: "India", type: "country", parent: "AS" }, { id: "RU", name: "Russia", type: "country", parent: "AS" }, { id: "MN", name: "Mongolia", type: "country", parent: "AS" }, { id: "OC", name: "Oceania", type: "continent", population: "21 million", parent: "earth" }, { id: "AU", name: "Australia", type: "country", population: "21 million", parent: "OC" }, { id: "EU", name: "Europe", type: "continent", parent: "earth" }, { id: "DE", name: "Germany", type: "country", parent: "EU" }, { id: "FR", name: "France", type: "country", parent: "EU" }, { id: "ES", name: "Spain", type: "country", parent: "EU" }, { id: "IT", name: "Italy", type: "country", parent: "EU" }, { id: "NA", name: "North America", type: "continent", parent: "earth" }, { id: "MX", name: "Mexico", type: "country", population: "108 million", area: "1,972,550 sq km", parent: "NA" }, { id: "Mexico City", name: "Mexico City", type: "city", population: "19 million", timezone: "-6 UTC", parent: "MX" }, { id: "Guadalajara", name: "Guadalajara", type: "city", population: "4 million", timezone: "-6 UTC", parent: "MX" }, { id: "CA", name: "Canada", type: "country", population: "33 million", area: "9,984,670 sq km", parent: "NA" }, { id: "Ottawa", name: "Ottawa", type: "city", population: "0.9 million", timezone: "-5 UTC", parent: "CA" }, { id: "Toronto", name: "Toronto", type: "city", population: "2.5 million", timezone: "-5 UTC", parent: "CA" }, { id: "US", name: "United States of America", type: "country", parent: "NA" }, { id: "SA", name: "South America", type: "continent", parent: "earth" }, { id: "BR", name: "Brazil", type: "country", population: "186 million", parent: "SA" }, { id: "AR", name: "Argentina", type: "country", population: "40 million", parent: "SA" } ]; var store = Observable(new Memory({ data: data })); var model = new ObjectStoreModel({ store: store, query: { id: "earth" }, rootLabel: "The Earth", checkedRoot: true }); ready(function () { var tree = new Tree({ model: model, id: "tree01" }, "CheckboxTree"); tree.startup(); }); }); </script> </head> <body class="claro"> <h1 class="DemoTitle">The CheckBox Tree with Multi State CheckBoxes</h1> <p> A basic CheckBox Tree using an <u>observable</u> dojo/store Memory Store. </p> <div id="CheckboxTree"> </div> </body> </html>
Hi Robert,
I've tried some of the demos here: cbtree/demos/store at master · pjekel/cbtree · GitHub
Couldn't get them to work though. Searching Stackoverflow and Geonet for discussions about the cbtree is a joyless experience. I think maybe one question was posted on Stackoverflow. I'm coming to the conclusion that this is not a well used and tested object.
Andrew,
The sample I provided above is based on the cbtree samples but I have tested it and made sure that it works with the JS APIs dojo and does not require dojo to be installed on your local machine.
Hi Robert,
Thanks for you help. The problem I have with the sample is that I'm getting
these errors:
- GET http://localhost:62919/setting/cbtree/Tree 404 (Not Found)
- Uncaught Error: xhrFailed
I believe the path to cbtree/Tree is correct, so I can't see why I get that
error.
On Mon, Jul 20, 2015 at 10:45 PM, Robert Scheitlin, GISP <geonet@esri.com>
Andrew,
So do you have the whole cbtree library in your widget setting folder?
Andrew,
Here is a help link for using third party libraries:
Use other JavaScript libraries—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers
Thanks, Robert. I ended up altering the init.js file like so:
dojoConfig = {
parseOnLoad: false,
async: true,
tlmSiblingOfDojo: false,
has: {
'extend-esri': 1
},
packages : [{ // this is the package I added
name : "cbtree",
location : window.path + "libs/cbtree"
}]
};