Thank you for this useful project. Regarding the installation instructions at https://github.com/pjekel/cbtree/wiki/Installation , the directory created when unzipping the package is actually called 'cbtree-master' not 'cbtree'. So, I think those instructions should be updated.

When the tree exceeds a classic example size, Firefox 20.0.1 seems to reach its recursion limit. I initially couldn't believe that, but after turning on "extensions.firebug.showStackTrace" I saw a really impressive stack.
I've extended sample "00" to show the problem. I guess that a fix is difficult, as saving function calls might require design changes...

Hi,
I upgraded ArcGis Javascript API to v3.11. This release worked with dojo 1.10. This broke cbtree. The version of cbtree I'm using is 0.9.4. It worked with dojo 1.9.
Will there be a next cbtree release working with dojo 1.10?

Thank you.

Hi Peter!

Please tag v0.9.3

Hi,

In your wiki pages https://github.com/pjekel/cbtree/wiki/Store, demos come with directory for stores, but I can't find it.

Regards,

Kinorsi

Please add support to dbootstrap.

In order to support dbootstrap, replace img nodes in cbtreeNode.html with span nodes.

I havent tested the impact of this change to other themes.

cbtree is great!

So far using your cbtree has been awesome, but I ran into a little problem with the readonly aspect. I've been doing some logging and it seems that the store readonly value is being updated properly, but it is not shown in the displayed grid.

By the way, we are using a pretty customized store implementation for interfacing with arcgis server. In my logging the readonly is only ever checked the first time you expand the nodes of the tree, after that is never checked again.

Thanks for any help you can provide.

In fact those function are getting/setting an item attribute.

I'd suggest to rename them to getItemAttr and setItemAttr respectively

Hi Thank you. Your cbtree looks amazing to me.

As I was learning more about cbtree, I realised that json files were not there.
May I have your links to retrieve json files? They are : dndChildren, Parents and countries.

Thank you
Clement Yap

Using 0.9.4
I was looking for solution to keep the branch node expanded if there are one ticked leaf checkboxe in the specified branch node.

using expandChecked(), is not working and I have read issue #36 and I am not able to make it.

I have an array that keep track of item.id. As long as the array is not empty, the branch node will not have to collapse

Please advise
Thanks
Clement

Hi,

Is there a way to programmatically set the state of checked elements?

The workflow that I would like to do is something like the following:

1. The tree is opened by the user
2. Some things in the tree are selected by the user
3. The user interacts with other parts of the application causing the selected state to change. I would now like to update the selected elements in the tree to reflect the new state.

I tried the following:

console.log("Checked State: ", 
    this.metaDataTree.model.getChecked(treeElement)
);

this.metaDataTree.model.setChecked(treeElement, false);

console.log("Checked State (after set): ",
    this.metaDataTree.model.getChecked(treeElement)
);

This prints:

Checked State: false
Checked State (after set): false

The issue is that it doesn't change the state of the checkbox that is displayed to the user. Before running this code the checkbox is checked. After this is run the checkbox is still set.

Any hints on how to do this would be appreciated.

Thanks,
Jake

When I initially create the tree there seems to be an animate processing bar displayed while its being created. Is this something I can shut off ? This is a image right before the tree appears.

I try to map property value to a specific icon object accordingly documentation but it doesn't work. I've tried to look at source code. As you can see here icon can be string or function, not object if I understand it correctly.

I am still looking for solutions or tips how to renew store with different set of data so that the tree is refreshed. Please advise. I am thinking of ..liken event or observable. like this as shown below but it does not work.

function refreshStore(givenBatch) {
try {
if (givenBatch.msg) {
registry.byId("corner3").model.clearCache();
registry.byId("corner3").model.store.setData(givenBatch.msg);
registry.byId("corner3").body.refresh();
}
} catch (e) {
alert("Error: When refreshing tree, " + e);
}
};

regards
Clement

I'm trying to get cbtree to work with the dojo/store API:

tree = new Tree({
model: new ForestStoreModel({
store: new Observable(new Memory()),
rootId: "Root",
rootLabel: "Root",
childrenAttrs: ["children"]
}),
id: "treeWidget",
}, "tree")

However, I keep getting the following error:
Uncaught TypeError: Object [object Object] has no method 'getFeatures'

, which is part of the old dojo/data API. Unfortunately, when I wrap the Observable Memory store in an ObjectStore:
new ObjectStore({objectStore: storeMemory});

I get more errors:
Uncaught TypeError: Object [object Object] has no method 'isValidated'

Am I doing something wrong, or is the dojo/store support not (fully) working?

PS When using the Dgrid with the storeMemory it works fine.
PPS I am using the "cbtree/store/Memory" for the Memory and the 'cbtree/models/ForestStoreModel' for the ForestStoreModel.

I can't seem to get to the download site. Any idea when it might be back up?

Thanks

I am creating a CBTree with a ForrestStoreModel with a query that looks like:

{ visible : true }

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:

TypeError: Result of expression 'this.domNode' [null] is not an object (WidgetBase)

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?

Hi,
It looks to be a problem with rendering in IE10.
(Rendering in IE8, IE9, Firefox, Chrome work fine.)

Description:

1. Open page
   http://www.thejekels.com/cbtree/demos/
   (Dijit CheckBox Tree Demo v0.9.3)
   in IE10 (version 10.0.9200.16540, update version 10.0.4)
2. Move cursor over check box (squares), check and uncheck checkBox. There is problem with rendering. Accidentally you can see checked box but it should be uncheck and vice versa. Also rendering of square around check box is not correct.

My workaround:
I have changed (overwrite) default class style

    .dijitCheckBoxInput
    {
        opacity: 0;
    }

from claro.css to

    .dijitCheckBoxInput
    {
        opacity: 0 !important;
    }

It works for me (IE8,IE9,IE10, Firefox 19.0.2, Chrome)

Thank you
milan

Hi ,
I'm upgrading from dojo 1.7 to dojo 1.9.1(which is the new version with the Arcgis api 3.7)
and i'm getting the following error when using the Cbtree :
"InvalidVersionError: cbtree/Tree::_assertVersion(): invalid dojo or dijit version"

I don't know if the Cbtree supports version 1.9.1 yet in which case the error is justified and you can ignore the rest of this issue.

but if not :
apparently the dojo.version.minor == 10 for 1.9.1
and
dojoVers = (dojo.version.major * 10) + dojo.version.minor;
makes dojoVers = 20 ,
which makes that the error is thrown.

I have bypassed this in the debugger and the cbtree seems to be working fine so far.

Hi Pjekel,

I am unable to reduce the width of the tree. It always take all the entire width of the page. When I resize it, it breaks. Please, let me know if you can help me.

Thanks,
-Evandro

Now we have in the cbtree/Tree:
this.connect(model, "onStoreComplete", "_onModelValidated");
model._validateData();

I'd suggest:
this.connect(model, "onDataValidated", "_onModelValidated");
model.validateData();

So I propose to rename in the cbtree/StoreModel
onStoreComplete -> onDataValidated
_validateData -> validateData

Your control has been working great for me.

I'm using it in a product relating to esri map. I have a list of parcels in your control. I am able to execute actions when the user clicks the label or the related checkbox. I'd like to be able to execute an action that highlights the related parcel if the user hovers over the item in the list. It doesn't look like I can currently tie to the items mouse actions like I can the click or check events. I'm relatively green when it comes to this level of JavaScript so I may be just missing how to add my own event. If this not currently possible is it could I get this added to your list of future enhancements.

Thanks again.

Jim

Whenever I click on a tree item I get the following error:
Uncaught TypeError: Object # has no method 'markProcessing'

I was able to add a markProcessing to the cbtree and that resolves clicking parent elements (method fires).

However, even with that in place, when you click child elements, the markProcessing error still occurs (it is called from dijit's tree.js).

When you comment out the relevant lines that call markProcessing() and unmarkProcessing() it gives an invalid item argument error.

Disabling deferItemLoadingUntilExpand in my ForestStoreModel didn't have an effect on these methods firing.

I'm using Dojo 1.8 and 1.5 on the same page.

Dojo 1.8 should be used for everything, but, I'm not sure if it's somehow interfering.

Thanks for all your hard work on cbtree!

Kudos,
Jeff

Hi Sir,
I want to add a tree node dynamically, but I can't find a useful way.
I have tried to add to the store, but the tree doesn't refresh to reflect the modification.
Sorry to borther you.
Hope you can give me an adise.
Thanks.

Regards,
Kinorsi

Unable to put a node in the last position in the tree

Here is example:
http://thejekels.com/cbtree/demos/ArcGIS.php

I need to call onCheckBoxClick function if checkbox was clicked and doesn't need to call onClick function in this case. onClick function should be invoked only if tree node was clicked (outside the checkbox area). How I can implement such behavior?

An alternative might be require.toAbsMid("./Tree") where require is context sensitive require.
However it's not much different from simply writing cbtree/Tree

Hi I would like to know how to set the checkbox in the tree , to false programmatically?
The method I used to read is like:-
"registry.byID("tree").attr("selectedItem").checked = false".

Please advise what is the right way?

I don't use either of them.
A larger problem is that I am getting empty dojo.js for my library build. Once I remove ForestStoreModel and TreeStoreModel from the cbtree/Tree dependencies, I am getting a working build.

If you would prefer to keep them and _store2model, I'd suggest to create cbtree/BaseTree and move all stuff there out of cbtree/Tree except _store2model

I checked out the demo on your website. It appears there is an issue with the display of the expansion icon, checkbox, and folder icons after you resize the window while in IE 7 mode only. I am stuck using dojo 1.8.4 due to the requirement to support IE 7.

If you hover over the tree while the icons are missing, they immediately reappear, however resizing the browser window again will cause them to disappear once more. Firing the container resize() method will cause them to reappear, but this does not seem to work within the browsers DOM onresize event. When I step the through the code myself, it appears to fire the resize event and then sometime after that, actually cause the icons to disappear. This makes me believe it is a timing issue and not simply a css issue.

I will check back from time to time to answer any questions you have and report anything I find.

You use dojo/has to test if a model implements setItemAttr and getItemAttr.
However they are defined per model (not globally).

Why not simply checking if (model.setItemAttr) or if (model.getItemAttr)?

Hi,
i did update my stuff to Dojo-1.10.3 recently. As next I'd like to update to dgrid 0.4 which expects a 'dstore' now. I am using your data/FileStore a lot which works great with dgrid0.3. However, as you already pointed out, this store class is outdated. Now the question is, do you would recommend to use model/FileStore as starting point for an upgrade to dstore? I actually have no idea where to start at all.

Any recommendation is welcome, I am using your lib for an 'advanced' file manager you can enjoy here : https://github.com/mc007/xbox-app

Thank you

Hi,

This is a great tool! I'm trying to expand all branches which have checked leafs. I thought the expandChecked() function may be the solution but it doesn't seem to do that.

Code is fairly simple and using dojo 1.9.1

                    cbtStore = new cbtHierarchy({
                        url: treeUrl,
                        idProperty: "id"
                    });
                    cbtModel = new cbTreeStoreModel({
                        store: cbtStore,
                        //checkedAll: false,
                        checkedAttr: 'event_id',
                        multiState: true,
                        query: {parent: 0}
                    });
                    cbtTree = new cbTree({
                        model: cbtModel,
                        checkBoxes: true,
                        persist: false,
                        branchReadOnly: true,
                        autoExpand: false,
                        openOnChecked: true,
                        icon: "fileIcon"
                    }, "standardsTree");

                    cbtTree.expandChecked();

Any guidance would be greatly appreciated.

Hello, changing order with drag'n drop of root children is not working. After I drop the item, it appears on the end.
Children of non root nodes works good.

First of all, congratulations on making such a great component o/.

I'm currently trying to sort tree nodes as they are added to the tree but don't know where to start of. I've found 'SortDirective' at the QueryDirective and from what i've read it is used to query the store for the objects only. Even though it only sorts asc or desc based uppon an attribute.

What I need is to be able to provide a function that compares two Items, and the store would run this function against every children of the provided parent node (in the order they are currently being displayed at the tree). Basically this function would return -1, 0 or 1 and the function calls would stop when 0 or 1 get returned.

Can I achieve this with something already provided or at least can I have some guidance on how to implement it?

In the function postCreate .store property of this.model is exposed.
However the Tree class should be agnostic to implementation details of a Model instance. E.g. a Model class might not use store at all.

A check that a store supports dojo.data.api.Write should take place in cbtree/StoreModel

Hi,

I would like to use cbtree in project created by my company but I'm afraid this is 3rd party solution which may "die" in the future. Is there any reason why cbtree is not part of dojox package? Is there a chance to see cbtree in dojotookit?

Regards,

Jan

trying to use the Heirarchy example with a different attribute for "idProperty" and i only see the root node appear.

edit: using v0.9.4

test data:

var carData = [
              { name:"Cars" ,parent: null , type:"toys", someId: "0" },
              { name:"Audi" ,parent:"Cars", type:"factory", someId: "1" },
              { name:"BMW"  ,parent:"Cars", type:"factory", someId: "2" },
              { name:"A3"   ,parent:"Audi", type:"sedan", someId: "3" },
              { name:"Q7"   ,parent:"Audi", type:"suv", someId: "4" },
              { name:"M3"   ,parent:"BMW" , type:"sedan", someId: "5" },
              { name:"535"  ,parent:"BMW" , type:"sedan", someId: "6" },
              { name:"750"  ,parent:"BMW" , type:"sedan", someId: "7" },
            ];

require(["cbtree/Tree", 
         "cbtree/store/Hierarchy", 
         "cbtree/model/TreeStoreModel"
        ], function (Tree, Hierarchy, TreeStoreModel) {

  var store = new Hierarchy( {data:carData, idProperty:"someId", multiParented:false} );
  var model = new TreeStoreModel( {store:store, query:{type:"toys"}} );
  var tree  = new Tree( {model:model}, "cars-div" );
  tree.startup();
});

Now, when I click on checkbox with "mixed" state, its and children value change to "true" state. I would like to set oposite. When I click on checkbox with "mixed" state, values will change to "false" state.

Is there any way to get the depth of an item in the tree? The $root$ node would be 0 and the immediate children would be 1 etc. I could write the traversal function using the model's getParents() to get the current item's depth and use it with getChildren() to determine the children depths.

See line 512 of Tree.js
It shouldn't be implied

Exposing this library to Bower makes it easy to simply add it as a dependency.

Hi,

Great work on cbtree! I was planning to write my own before I stumbled on yours.

Any plans for supporting the new dojo/store API, as a replacement for dojo/data?

I'd really like to use something like this as the store:
require(['cbtree/Tree','cbtree/models/ForestStoreModel', 'dojo/store/Observable','dojo/store/JsonRest'],
function(cbtree, cbmodel, Observable, JsonRest) {
var store = new Observable(new JsonStore({target: '/path/to/store'}));
var model = new cbmodel({store: store})
...
});

Or is this functionality hidden somewhere I haven't found yet?

Not really an issue any more, but I couldn't find any other way of contactng you, so here goes:

I noticed that when adding objects to an observable store that is used by a cbtree, the time it takes for objects to appear in the tree takes longer each time an object is added (about 15 seconds! when adding the 12th object).

The way I understand it, it shouldn't have anything to do with the store being observable, since I have a flat list in my tree, with no checkboxes and only one query that is being observed (the entire store, to see if objects are added/changed/removed). However, when I use an eventable store it works perfectly fine no matter how many objects are added to the store.
What am I missing here? Has it something to do with me using a ForestStoreModel and so there are actually several branches and therefore several queries?

On a side note: what is the best way to tell the model that it should not show the [+]/[-] in front of the elements if they have no children? Should I overwrite the "mayHaveChildren"-method?

Great component. Its working great for me. I just have one question .

I'm currently setting a background image and cursor for the labels using css.
.dijitTreeLabel
{cursor:pointer;
background-repeat:no-repeat;
background-image:url(images/button2.gif);
background-position:right;
}

I'd like to have a different image and cursor on the branch labels versus the leaf labels. I was hoping to use something like this but I can't seem to find anything that identifies if its a leaf or branch.

.dijitTreeLabel[ type="leaf"]
{ cursor:initial;
background-repeat:no-repeat;
background-image:url(images/button5.gif);
background-position:right;
}

I'm kind of a noob at this so I may be way off in how I'm trying to do this.
Thanks for your time,
Jim

I initialize cbTree for lazy loading with FileStoreModel which has the parameter:
checkedStrict: false. As the data source use FileStore.
In my case, state of nested checkboxes don't affect to parental nodes. Likewise state of parental checkboxes don't affect to nested checkboxes.
If checkedStrict will have true value then cbTree will pull all nodes and leaves. This process may be very long.

How enable strict check for lazy loading mode without pulling all nested nodes?

Hi Pjekel,

I would like to submit the id of the checked nodes. When I add the tree inside a form the values are not sent during Post. Is there a easy way to do it?

Many thanks,
-Evandro

Hi Thank you for your help.
It has worked with your solution. There are two buttons which triggered to call function refreshStore. All it takes a store is to be closed and be loaded with a new set of data.

After setting clearOnClose propertyof the store to true,
then:-

function refreshStore(givenDB, givenCard, givenBatch)
{request.post('list_tree.php', {data:{nameDB : givenDB, nameCard : givenCard,
selectedBatch : givenBatch},
handleAs: "json"
}).then
(function(response)
{try
{if(response.msg)
{
registry.byId("corner3").model.store.close();
registry.byId("corner3").model.store.load({data:(response.msg),
getChildren: function(object)
{
return tree3.query({parent: object.id});
}
}
}
catch(e)
{
console.debug("Error: When refreshing tree, "+e);
}
})
}

First try it worked, then second try it does not work.
The error caught : TypeError: this.onLoadDeferred is undefined.

I am using version dojo 1.8 and cdtree 0.9.4.
I think it has to do with the old version in which has to do with dojo/connect, instead of dojo/on, isn't it?
Please advise. Thanks
regards
Clement

Just wondering if you could point me in the correct direction. Is there a way to change the node background for a specific item programmatically? If I have 5 items in the tree I want to be able to make the background of one of the items change color like it does when the mouse is hovering over it. I know I want to highlight the 3rd item.