Ext 2.2 introduced a themed checkbox component, but unfortunately the new checkbox theme wasn't used for trees and fieldsets.

So I started out making a TreeNodeUI that would use checkbox images instead of checkbox inputs.
After I finished I couldn't resist making a TreeNodeUI descendant that would do what many of you have asked for: support checkboxes with a grayed/partial state and automatic cascading.

Include TreeCheckbox.css and TreeCheckbox.js to get themed checkboxes in your grid.

Include TriStateNodeUI.css and TriStateNodeUI.js and set the uiProvider to TriStateNodeUI to get automatic update of parent/child checked states.
If your tree is very large or if you are using asynchronous node loading (AsynchTreeNode) you should use AsynchTriStateNodeUI instead of TriStateNodeUI (because children that aren't loaded yet can't be checked/unchecked).

Check out example.html to see how to use the new components.

Version 1.1:
- Removed CSS margin.
- Added getChecked method to return correct checked state, even with AsynchTriStateNodeUI.
- Changed TriStateNodeUI to do a real check cascade and moved the original virtual cascading code to AsynchTriStateNodeUI, to be used when a real cascade is to slow (large tree) or impossible (asynchronous node loading).

New version 1.2:
- Fixed bug when in mixing nodes with and without checkboxes.
- Only fire checkchange if checked stated actually changed.

wm003

16 Aug 2008, 2:26 PM

B)Great Stuff! Thanks for sharing and hopefully this will be included in ext 2.3:D

Condor

18 Aug 2008, 10:15 PM

After working with my new tree a few days I noticed a few problems:

1. The margin:0 1px should be removed from the CSS (it causes cursor flickering).

2. In the example:
- Click 'Column Tree Example' (now 'Abstract rendering in TreeNodeUI', 'Create TreePanel to render and lock headers' and 'Test and make sure it works' look unchecked (but aren't).
- Click 'Test and make sure it works'. Now 'Test and make sure it works' is unchecked and 'Abstract rendering in TreeNodeUI' and 'Create TreePanel to render and lock headers' show their checked state again.

I would like your input in this one: Is this really a problem? Because fixing it would require to actually update the checked state of children which could be slow and doesn't even work correctly in an AsyncTreeNode.

wm003

21 Aug 2008, 11:17 AM

2. In the example:
...
I would like your input in this one: Is this really a problem? Because fixing it would require to actually update the checked state of children which could be slow and doesn't even work correctly in an AsyncTreeNode.

I would keep it this way and rather let the developer react on check/uncheck-events to handle the "partly-checked" checkbox on the parent node (at least this is needed when using async treenodes..i always have to do this in my trees to update the parent node text (becaus it displays the amount of checked childs, so it could also handle the change of the checkbox)

fermo111

22 Aug 2008, 2:10 AM

Very nice!!!

Just one minor problem. I had to delete the line (file test.html)

preloadChildren:true,

because that would give me the following error

R is undefined

and the tree would not load. This is in FF 3 on Linux.

Thanks

Luca

Condor

22 Aug 2008, 3:29 AM

I had to delete the line (file test.html)

preloadChildren:true,
because that would give me the following error

R is undefined
and the tree would not load. This is in FF 3 on Linux.

That is strange...
I have no problems with the file (tested IE 6, IE 7, FF 3.0.0.1, Opera 9.51 and Safari 3.1.2 on Windows XP SP3).

fermo111

22 Aug 2008, 6:07 AM

Sorry, my fault. I wasn't using Ext v2.2.

rtconner

22 Aug 2008, 8:20 AM

2. In the example:
- Click 'Column Tree Example' (now 'Abstract rendering in TreeNodeUI', 'Create TreePanel to render and lock headers' and 'Test and make sure it works' look unchecked (but aren't).
- Click 'Test and make sure it works'. Now 'Test and make sure it works' is unchecked and 'Abstract rendering in TreeNodeUI' and 'Create TreePanel to render and lock headers' show their checked state again.

It's kind of cool the way it is. Like a "remember the checkboxes I had checked" kind of feature. I mean that requires that the developer is a bit smarter on the server side when saving, but outside of the extra effort there, it's fine.

Btw, I don't know if you meant to or not, but double-clicking the checkbox still expands and collapses the tree. To me that is a bit of an unexpected behavior.

Also, I am completely unable to get it to work with AsyncTreeNode. Do you think I need to try harder, or is that not build into this?

Condor

24 Aug 2008, 10:30 PM

@rtconner: Your example doesn't set the uiProvider for all child nodes. Either set the uiProvider in the baseAttrs of the tree loader (as I did) or specify the uiProvider in every child node (see the ColumnTree example). This also applies to AsyncTreeNode!

@fermo111: It supports an 'unlimited' number of branches. Your example must be flawed somewhere, because I am able to add a number of extra levels without any problem.

ps. TriStateNodeUI does require that you fill the checked config option of the nodes correctly on startup!

fermo111

25 Aug 2008, 12:31 AM

After working with my new tree a few days I noticed a few problems:

1. The margin:0 1px should be removed from the CSS (it causes cursor flickering).

2. In the example:
- Click 'Column Tree Example' (now 'Abstract rendering in TreeNodeUI', 'Create TreePanel to render and lock headers' and 'Test and make sure it works' look unchecked (but aren't).
- Click 'Test and make sure it works'. Now 'Test and make sure it works' is unchecked and 'Abstract rendering in TreeNodeUI' and 'Create TreePanel to render and lock headers' show their checked state again.

I would like your input in this one: Is this really a problem? Because fixing it would require to actually update the checked state of children which could be slow and doesn't even work correctly in an AsyncTreeNode.

This was really the reason why I thought it didn't work when adding an additional level.
Since you ask, I would say the TreeNodeUI should implement the expected behaviour as the user perceives it, that is, when you uncheck a parent node, all the children are really unchecked as well. I understand there is a problem with the AsyncTreeNode, but maybe the AsyncTreeNode is not the right class to use for a control of this kind, or, keeping the async nature of the tree, you could apply the user choices on the parent node to the children nodes that are loaded later.

Thanks

Luca

nicola_java

28 Aug 2008, 11:36 PM

Nice job. :D Thanks for sharing.

skaue

11 Sep 2008, 8:32 AM

I can't get the checkboxes to show in my tree. I have one root with two async children. Here is my setup:

Why can't I get this treestate to work. There are no errors, simply no checkboxes.

Condor

11 Sep 2008, 10:09 AM

You are putting the checked config option in baseAttrs of the loader, but it should be in the config of the node itself.
Putting it in baseAttrs doesn't help, because that will copy the checked config option to the node instead of the node attributes.

skaue

11 Sep 2008, 10:22 AM

baseParams? are they the same as baseAttrs? I feel confused (:|

BrainDrain

8 Oct 2008, 1:54 AM

Could some one make text nodes line wrapping for tree?
It will be very useful for long node text labels!

skaue

8 Oct 2008, 1:57 AM

Could some one make text nodes line wrapping for tree?
It will be very useful for long node text labels!

I simply use qtip so if strings are long, the user can always hover over it and see the full text. Similar to how it works in filebrowsers.

Condor

8 Oct 2008, 2:55 AM

Could some one make text nodes line wrapping for tree?
It will be very useful for long node text labels!

You could use:

.x-tree-node a span {white-space: normal;}
(but I don't think you'll like the result)

BrainDrain

8 Oct 2008, 4:45 AM

You could use:

.x-tree-node a span {white-space: normal;}(but I don't think you'll like the result)
Yes, I've already tried - no good
OK, I will try by myself
something like that

getChecked(); not work if you check or uncheck only a parent (folder) node ?

Condor

24 Oct 2008, 11:35 PM

[QUOTE=Rodolfo;243020]getChecked(); not work if you check or uncheck only a parent (folder) node ?

Rodolfo

25 Oct 2008, 10:01 AM

Thanks, works OK..

very useful, i hope this tris state tree will be include in the next extJS release,
(anyway i'm already using in my app ;) )

agalue

17 Nov 2008, 11:39 AM

[quote=Rodolfo;243020]getChecked(); not work if you check or uncheck only a parent (folder) node ?

Condor

17 Nov 2008, 12:15 PM

Hello,

First of all... great plugin... thanks for that....

But, I'm confused. Can any body tell me where can I find the correct implementation of Ext.tree.TriStateNodeUI that don't have issues when you check or uncheck parent folders ?

I had tried with the original post (and suggested patch) but I still have problem with parent folders that affects treePanel.getChecked()

The problem:
Check a child node (parent node appears grayed... ok)
Uncheck parent node (this uncheck all children... ok)
Check other child node different of node checked on step 1 (The result is 2 children are checked .... wrong)

That was the whole point I was trying to make in this post (http://www.extjs.com/forum/showthread.php?p=211300#post211300).
Checking or unchecking a parent node does not actually check on uncheck all child nodes (I could do this, but it could be slow and it wouldn't work for AsychTreeNodes).
I added the getChecked methods, so you can at least reliably find which nodes are visually checked.

agalue

18 Nov 2008, 5:06 AM

Hello Condor,

That was the whole point I was trying to make in this post (http://www.extjs.com/forum/showthread.php?p=211300#post211300).
Checking or unchecking a parent node does not actually check on uncheck all child nodes (I could do this, but it could be slow and it wouldn't work for AsychTreeNodes).
I added the getChecked methods, so you can at least reliably find which nodes are visually checked.

I'm not interersted in using AcyncTreeNodes with this feature, but I'm interested to see even if it's slow the code to correct the problem.

It's confused when you uncheck a parent node that was full checked, and then check only one child and all others childs appears checked!. But, the only node that I spect to be checked appers unchecked!

I tried your code today and it works perfect. Thank you very much for your help.

Condor

27 Nov 2008, 12:52 AM

I created a new version 1.1 that contains all the previous fixes and updates:

- Removed CSS margin
- Added getChecked method to return correct checked state, even with AsynchTriStateNodeUI.
- Changed TriStateNodeUI to do a real check cascade and moved the original virtual cascading code to AsynchTriStateNodeUI, to be used when a real cascade is to slow (large tree) or impossible (asynchronous node loading).

Dr. Flink

1 Dec 2008, 1:05 AM

I'm having some problems loading tree from server, but when I'm using the example data object, everything is working as it is supposed.

return {
activate: function() {
heatDs.load(heatRoot);
}
}
}();If I uncomment the "children: data" -line the example data object is loaded instead and the check/uncheck is acting as it should. But, when commented and the server data is loaded, the check/uncheck is messed up. Hope someone understands my problem and knows what I'm missing.

// Rickard

Update:
Am I supposed to use the children-attribute somehow?

Condor

1 Dec 2008, 2:40 AM

Your treepanel is missing the loader config option (loader: heatDs).

Dr. Flink

1 Dec 2008, 2:51 AM

Thanks for answering!

I added loader: heatDs, but the problem stays the same...

Some of the problems I have:
Checking a parent checkbox selects the children but the parent it self is not checked.
Unchecking one of the children unchecks all.
Cant check a single child if it has siblings.

[
{"id":"premises_90","text":"Premises 90","leaf":true,"checked":false,"expanded":false,"iconCls":"iconPremises"},
{"id":"premises_91","text":"Premises 91","leaf":true,"checked":false,"expanded":false ,"iconCls":"iconPremises"},
{"id":"premises_92","text":"Premises 92","leaf":true,"checked":false,"expanded":false,"iconCls":"iconPremises"},
{"id":"premises_93","text":"Premises 93","leaf":true,"checked":false,"expanded":false,"iconCls":"iconPremises"}
]I'm not using the chidren attribute anywhere, is this the reason why its not working?

Condor

1 Dec 2008, 4:38 AM

You should at least remove the preloadChildren:true config option in that case.

Dr. Flink

1 Dec 2008, 4:43 AM

Yes, I allready tried setting it to false and removing it. Sorry for not mentioning.
But it seem to make no difference...

Condor

1 Dec 2008, 4:57 AM

What exactly is the problem?

When you check the customer and then expand it, it shows the premises as unchecked?

1. I click checkbox on Premises 12. This will make the checkbox checked (but not the Customer 10 checkbox).
2. Then I click on premises 91 checkbox. Premises 12 will get unchecked and nothing happens to premises 91(!).

Its impossible to visually make any of the premises under Customer 96 checked (have siblings), but I can check Premises 12 (no siblings).
Visually, its impossible to make the customers checkboxes checked (probably because they also have siblings).

Condor

1 Dec 2008, 5:31 AM

Are you sure your node ids are unique?

Dr. Flink

1 Dec 2008, 5:35 AM

Yes, the id is an autoincremented primary key. I use "category_", "customer_" and "premises_" as a prefix.

Condor

1 Dec 2008, 6:03 AM

I can't reproduce your problem...

Is there a way you can make your example available on the internet?

Dr. Flink

1 Dec 2008, 7:03 AM

As I wrote some example code I found out what's causing the error.
I've removed the categories checkbox because I don't want the user to be able to select to many premises at once.

So, on the top parents (categories) I'm not using the checked -option.
Is there another way to remove the checkboxes on the top level nodes (categories)?

Another issue:
When I'm loading children on-the-fly from the server, as I do (using preloadChildren: false), I want the children to be loaded and checked (without expanding the parent) when checking an unexpanded parent.

1. The categories is loaded.
2. I expand Category 1 (Customer 1 and Customer 2 becomes visible).
3. I check Customer 1 (without expanding it first).
4. I alert getChecked(). This should also alert the childrens of Customer 1...

Another question:
What is the best way to send checked boxes to the server?
I want to load a google chart image depending on what nodes is checked. When I'm clicking a parent node, checkchange will be fired multiple times. I need a listener that is being fired only once, when all children is checked/unchecked...

This ugly code is what I've come up with for the moment (resumeEvents() isn't doing what it should though...):

Yes, it renders the children checked when expanding the parent (customer). But it will not include the unrendered children (premises) using getChecked().

Somehow I must load the children when checking the parent (without expanding the parent), else the tree wont know anything about the children... :-?

(And, if I somehow can have some sort of a callback function or listener when all the children is finished being checked/unchecked, that would be heaven)

Dr. Flink

2 Dec 2008, 4:15 AM

Ok, I made the following changes, workes fine for my needs. It will store all checked leafs in an array (checkedLeafs). When a checkbox is clicked it will add leafs to the array and finally fire leafschange.
In other words: Checking a parent will expand the childrens, make them checked, adding them to the array and finally fire leafschange once.

Can't you use the checkchange (http://extjs.com/deploy/dev/docs/?class=Ext.tree.TreePanel&member=checkchange) event for that?

Dr. Flink

2 Dec 2008, 5:35 AM

Checkchange was the first thing I tried. The reason I went with onCheckboxClick was to know what box was clicked from within the event.
And I think the checkchange event is acting inconsistently when unchecking boxes.

when I turned on DD with enableDD:true, I am unable to rearrange nodes via DD
as is possible in the original Tree

am I missing something ?

thx

starmage

8 Dec 2008, 4:35 AM

great job with that tri-state Tree :D

But i agree with cruisin and when i'm enableDD, i have some trouble with the firefox. I start the drag and everything works fine until i want to drag the node anywhere. If i release the button nothing happens and it freeze the drag, so i could not end the drag.

In Internet Explorer everything works ok.

Do i forget anything?

Thx

PSB

17 Dec 2008, 7:35 AM

Please replace archive after last override.

Thanks..

Condor

17 Dec 2008, 7:48 AM

Please replace archive after last override.
I updated the original post to version 1.2 (not many changes, except one nasty bugfix).

snoir

17 Dec 2008, 5:48 PM

i downlaod it ,but no checkbox on tree

Condor

17 Dec 2008, 9:43 PM

The TreeCheckbox.css file contains a reference to the checkbox.gif file. Make sure it points to the correct file if you put the example in a different directory.

Frenky

18 Dec 2008, 10:45 PM

excellent!!

it works perfect for me

snoir

23 Dec 2008, 3:19 AM

The TreeCheckbox.css file contains a reference to the checkbox.gif file. Make sure it points to the correct file if you put the example in a different directory.
thx,the demo is right~:))

jwignall

11 Feb 2009, 2:41 AM

Just FYI, you left a console line(212) in TreeCheckbox.js

console.log(this.getNodeTarget(e));

jwignall

12 Feb 2009, 2:13 AM

I was just wondering why the AsynchTriStateNodeUI isn't the default behaviour in all cases?

I was puzzling for a while about why child checkboxes weren't checked when the parent is checked unless the parent had been expanded at least once. Is there a case where you would not want the child nodes to be toggled when a parent is toggled?

Juel

16 Feb 2009, 4:17 AM

Hi,

I just detected a bug using the TriStateTree version 1.2..
By including the TreeCheckbox.js into a index.html - the on('click') and some other events don't fire anymore - even when using just a normal tree without TriState checkboxes.

This is related with my Post here (http://extjs.com/forum/showthread.php?t=59987&highlight=click+dblclick):
Here's some example code:

</body>
</html>
By removing the line:
<script type="text/javascript" src="javascripts/TreeCheckbox.js"></script> from index.html - the onclick event fires, but this is also browser specific:

With TreeCheckbox.js included, the on('click') seems to work in Firefox 2.0.0.18
but not in Opera 9.62 Konqueror 3.5.5, IE 6.0.3790.3959 and Firefox 3.
The on('dblclick') event seems to work in all five of them.

I attached a full example of my code including the latest ext - version here (http://msg2.me/Archiv.zip):

NaveenMinchu

4 Mar 2009, 10:30 PM

We could see console.log() which is debuging script at line 212 of TreeCheckbox.js which is causing some problem in IE when we use listeners for TriStateCheckbox sampple page.

Do we require console.log() in TreeCheckbox.js ?

Condor

4 Mar 2009, 10:37 PM

No, sorry, I left that line in by mistake. You can safely remove it.

NaveenMinchu

8 Mar 2009, 3:43 AM

Hi,

Can we please know what can we expect from the widget in terms of pros (working) and cons(non-working) stuff of the current Tri-state widgets.

Between the this.emptyIcon in the renderElements function (At line 78) in the TreeCheckbox.js is pointing to "http://www.extjs.com/s.gif" which will obviously cause problems when the end-user using the widget is offline.

Excpeting your reply on pros and cons.

Appreciate your response.

Regards,
Naveen

Condor

8 Mar 2009, 1:12 PM

Between the this.emptyIcon in the renderElements function (At line 78) in the TreeCheckbox.js is pointing to "http://www.extjs.com/s.gif" which will obviously cause problems when the end-user using the widget is offline.

Did you read the first item (http://extjs.com/learn/Ext_FAQ#My_code_links_to_extjs.com.2Fs.gif) of the Ext JS FAQ?

Raz0r

16 Mar 2009, 12:30 PM

Hi!
I've extended this plugin to display columns like in sample ColumnTree (http://extjs.com/deploy/dev/examples/tree/column-tree.html).
Everything is the same except the names: ColumnCheckboxTree for TreePanel, ColumnCheckboxNodeUI for TriStateNodeUI and AsynchColumnCheckboxNodeUI for AsynchTriStateNodeUI.
Greets!

NaveenMinchu

24 Mar 2009, 10:01 PM

Hi,

Can you please let us know why even we are setting rootVisible:'false' is showing root on UI,
when we are using Tri-stateCheckBox tree with TreeLoader

It is important for us, please let us know.

Appreciate your help :)

Thanks & Regards,
Naveen

aj3423

12 May 2009, 12:38 AM

Agree with starmage, in FireFox, drag a node then release mouse, it freezes the drag, I commented some code to fix that, it works.

I've just a little problem due to (I think) the fact, that is it a asynctree.
When i check a node and if the children nodes are'nt expanded, the children will be not check.

Do you have any idea to automatically check the children of a unexpended parent ?

Thx,

Antoine

jbum

11 Jun 2009, 8:57 AM

Have others been able to use "rootVisible: false" to hide the root node? The root node is still visible for me but it's now laid out without any indentation for the child nodes - root and child nodes look like they are part of the same level in the tree.

Help please.

nintondo

12 Jul 2009, 10:52 AM

unable to get checkboxes showing..using ffox 3.5

Condor

12 Jul 2009, 11:13 PM

unable to get checkboxes showing..using ffox 3.5

And you did adjust the path to the images in the .css file?

Lobos

16 Jul 2009, 6:10 PM

Nice work man! works great!

I am trying to tirgger the load spinner to come up in beside the node because I do the node checked state save on each check. so bascially I am looking to show the user that soemthign is going on when they check or uncheck...

Condor

16 Jul 2009, 10:54 PM

Nice work man! works great!

I am trying to tirgger the load spinner to come up in beside the node because I do the node checked state save on each check. so bascially I am looking to show the user that soemthign is going on when they check or uncheck...

Use:

node.getUI().beforeLoad();
and

node.getUI().afterLoad();
to show and hide the loading indicator.

treilor

13 Aug 2009, 4:56 AM

Thank you for extension!

I've noticed some strange behaviour using AsynchTreeNode.
Having tree structure like that:

This fixed my problem - I was using the drag and drop between two trees example and the tristate tree was causing a bug where you could drag and drop from one tree to antoher, but if you tried in the same tree it would freeze and not drop the item.

Maybe this fix should be added to the distro?

Thanks!

Capt.JackSparrow

9 Dec 2010, 11:48 PM

Hi Condor,
FOA, Thanks for the wonderful extension.
I am using AsynchTristateNodeUI as below:
The problem is during render I literally need to expand and collapse nodes to make the
parent node checkboxes checked.
This severely impacts the performance, lot in IE.
Is there a clean way to load the parent node checkboxes correctly.

We are facing issues using tristate check box tree with ext-js 4.1.1.
There is no ext-base.js script . Is there an updated version to go with ext-js 4.1.1 ?

Ext 2.2 introduced a themed checkbox component, but unfortunately the new checkbox theme wasn't used for trees and fieldsets.

So I started out making a TreeNodeUI that would use checkbox images instead of checkbox inputs.
After I finished I couldn't resist making a TreeNodeUI descendant that would do what many of you have asked for: support checkboxes with a grayed/partial state and automatic cascading.

Include TreeCheckbox.css and TreeCheckbox.js to get themed checkboxes in your grid.

Include TriStateNodeUI.css and TriStateNodeUI.js and set the uiProvider to TriStateNodeUI to get automatic update of parent/child checked states.
If your tree is very large or if you are using asynchronous node loading (AsynchTreeNode) you should use AsynchTriStateNodeUI instead of TriStateNodeUI (because children that aren't loaded yet can't be checked/unchecked).

Check out example.html to see how to use the new components.

Version 1.1:
- Removed CSS margin.
- Added getChecked method to return correct checked state, even with AsynchTriStateNodeUI.
- Changed TriStateNodeUI to do a real check cascade and moved the original virtual cascading code to AsynchTriStateNodeUI, to be used when a real cascade is to slow (large tree) or impossible (asynchronous node loading).

New version 1.2:
- Fixed bug when in mixing nodes with and without checkboxes.
- Only fire checkchange if checked stated actually changed.