Select to view content in your preferred language

Checkbox tree in settings

3949
7
Jump to solution
07-14-2015 04:47 PM
AndrewTerwiel
Frequent Contributor

​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);

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus
0 Kudos
7 Replies
RobertScheitlin__GISP
MVP Emeritus

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>
0 Kudos
AndrewTerwiel
Frequent Contributor

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.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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.

0 Kudos
AndrewTerwiel
Frequent Contributor

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>

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Andrew,

   So do you have the whole cbtree library in your widget setting folder?

0 Kudos
RobertScheitlin__GISP
MVP Emeritus
0 Kudos
AndrewTerwiel
Frequent Contributor

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"

    }]

};

0 Kudos