valeriogalano / checkboxtree Goto Github PK

Version of the script I'm using: 0.5

Description of the problem:
when running multiple trees, the first tree notices stack overflow clicking any 
element.

Smells like some scope problem at activation that messes the recursion...

Steps to reproduce the problem: (see attachment)
Put two trees on a page and activate with: 

$("#tree1, #tree2").checkboxTree(...);

NOTE: I found a workaround, activate with

$("#tree1").checkboxTree(...); 
$("#tree2").checkboxTree(...); 

Version of the script I'm using: 0.5.1

Description of the problem: Uncheck problem.

When the parent unchecked, the descendants does not unchecked. I think 
parentsUntil function change in the jquery 1.6, cause this problem. Because 
when I use the jquery 1.4, there is no problem.

How to have the problem:
$(function() {
          $('#evenements').checkboxTree({
              onUncheck: {
                  ancestors: 'uncheck',
                  descendants: 'uncheck'
              }
          });
      });

How to solve it:
$(function() {
          $('#evenements').checkboxTree({
              onUncheck: {
                  ascendants: 'uncheck',
                  descendants: 'uncheck'
              }
          });
      });


Please change in the doc, or in the script ascendants <-> ancestors :-)

Version of the script I'm using:

0.4.3

Description of the problem:

When putting the target list inside another list (without setting the plugin on 
the outer list), the outer list root is used as the root checkbox. (see 
attached test)

Proposed patch is in attachment

Behaviour I think this feature should have:
I can't find any way to reset the entire tree using a public method and without 
requiring user interaction.
It would be nice to have!


Examples:



Configuration options I think this feature need to work:



I would like to have this feature working within:



I'll use labels to provide others informations.

With this settings the checkbox is not checked if you click on it.

var defaults = {
            checkAllElement: '',
        //checkedImage: '',
            collapsable: true,
            collapseAllElement: '',
            collapseDuration: 10,
            collapseEffect: 'blind',
            collapseImage: '',
            container: 'checkboxTree'+'['+ checkboxTree++ +']',
            cssClass: 'checkboxTree',
            expandAllElement: '',
            expandDuration: 500,
            expandEffect: 'blind',
            expandImage: '',
            initializeChecked: 'expanded', // or 'collapsed'
            initializeUnchecked: 'collapsed', // or 'collapsed'
            leafImage: '',
            onCheck: {
                ancestors: 'uncheck', //or '', 'uncheck'
                descendants: 'uncheck', //or '', 'uncheck'
                node: 'expand' // or 'collapse', 'expand'
            },
            onUncheck: {
                ancestors: '', //or 'check', 'uncheck'
                descendants: '', //or '', 'uncheck'
                node: '' // or 'collapse', 'expand'
            },
            uncheckAllElement: '',
        //uncheckedImage: ''
        };

I think problem is here:

onCheck: {
                ancestors: 'uncheck', //or '', 'uncheck'
                descendants: 'uncheck', //or '', 'uncheck'
                node: 'expand' // or 'collapse', 'expand'
            },

if this is set to check (both options) then checkbox is checked, but also child 
and parent. But if you set to uncheck (both options) then checkbox is not 
checked.

Regards
Blaz

Desired feature: configuration option that constantly/automatically makes
the parent checked or unchecked depending on whether all children are
checked or not.

For example, a configuration option like this:
"parentShouldAlwaysBeCheckedIfAndOnlyIfAllChildrenAreChecked: true"

Description of the desired behaviour:
For example, assume that a parent has three children and two of them are
selected.
In such a scenario, the parent should be unchecked (since not all children
are selected) but when the third children is selected, then the parent
should also become selected automatically.
Then, at any time, whenever any one of the children is un-selected, then
the parent should also become un-selected, since not all children are selected.

use input:checkbox instead of :checkbox

Script should build tree from json/xml datasource.

Version of the script I'm using:
jquery-1.4.4.min.js
checkboxtree-0.4.2


Description of the problem:
the child node can't expand by click on it, this only happen in 
jquery-1.4.4.min.js, it's work fine in jquery-1.4.2.min.js


Steps to reproduce the problem:
the tree is expanded all by default, when i click one child node to collapse it 
and then i click it again to expand it but it's not able expend anymore.
it look like the collapse event is improper attach to after the expand event, 
cause i can see the child node animation expand first then the child node 
collapse again.

Version of the script I'm using:
0.5


Description of the problem:
Checking any checkbox will check all of its descendents, regardless of options.


Steps to reproduce the problem:

  $("#checkboxtree").checkboxTree({
    collapseImage: "images/rightArrow.gif",
    expandImage: "images/downArrow.gif",
    initializeUnchecked: "collapsed",
    uncheckParentChildrenUnchecked: true,
    onCheck: {
      ancestors: null,
      descendents: null,
      node: null,
      others: null
    }
  });

if option "checkIfFull" on, get error "Out of stack space" in ie, similar error 
in firefox too. have anyone get a solution?

The attached patch should make it possible to uncheck a parent node when all 
the children are unchecked. The patch also provides an option to fold the 
parent once all children are unchecked.

Test case and proposed patch in attachment

Version of the script I'm using:

* latest script from this site (0.5 i think) - i have tested this with 
different versions of the .5 codebase
* jquery ui 1.8
* jquery 1.4,2
* testing in firefox 3.16

Description of the problem:

Below is my code.  I have two issues

1.  CheckIfFull = in various .5 scripts, this feature either doesn't work at 
all (doesn't do anything) or works but when i check the last leaf node checkbox 
that makes all the leaf nodes selected, the browser freezes for 3-4 before the 
parent node is checked (as i have "checkifFull" on.  My tree has about 50 items 
with 3 levels deep at most and 6 or 7 items at each level.
With the latest script on this site as of Mar 27th, most trigger actions seem 
very slow in firefox.


2. As you can see below, i have both ancestors and descendants set to "uncheck" 
when "onUnCheck" but when i uncheck a checkbox, the parent node is NOT being 
unchecked.

$('#tree2').checkboxTree({
                    initializeChecked: 'collapsed',
                    initializeUnchecked: 'collapsed',
                    collapseImage: '/content/images/downArrow.gif',
                    expandImage: '/content/images/rightArrow.gif',
                    onCheck: {
                        ancestors: 'checkIfFull', //or '', 'uncheck'
                        descendants: 'check', //or '', 'uncheck'
                        node: '' // or 'collapse', 'expand'
                    },
                    onUnCheck: {
                        ancestors: 'uncheck', //or '', 'uncheck'
                        descendants: 'uncheck', //or '', 'uncheck'
                        node: 'collapse' // or 'collapse', 'expand'
                    }

                });


Steps to reproduce the problem:

add minified version

What steps will reproduce the problem?
1. The demo doesn't work in IE 8.0
2.
3.

What is the expected output? What do you see instead?


What version of the product are you using? On what operating system?
Last Version of the product on Windows XP 

Please provide any additional information below.
$('#tree').checkboxTree() is not recognized 

Behaviour I think this feature should have:

if i have a tree that is 4 levels deep, i would like the first two level 
expanded and the others collapsed.  Is there anyway to do this today?

Examples:



Configuration options I think this feature need to work:



I would like to have this feature working within:



I'll use labels to provide others informations.

I tried to modify the script myself, but with no luck :(

I would like an option for 'single selection'

Basically it would work like 'check children' except that before checking the 
children, it would first clear the current selection. (uncheck all checkboxes 
in the tree, and then check all children of the selected box)

With plain text anchors +/- for expand/collapse, leaf nodes and internal 
nodes are not vertically aligned.

Behaviour I think this feature should have:

i would like in a single method to enable or disable the whole tree.


Examples:



Configuration options I think this feature need to work:



I would like to have this feature working within:



I'll use labels to provide others informations.

Behaviour I think this feature should have:

Checkboxtree is good but it could be improved by allowing multiple root nodes. 
This is a big limitation. 

Examples:

Configuration options I think this feature need to work:

none

I would like to have this feature working within:


I'll use labels to provide others informations.

Version of the script I'm using:

0.4.3

Description of the problem:

When user clicks expand/collapse twice, in quick succession, the tree is left 
in the wrong state.

Steps to reproduce the problem:

Double click on expand/collapse.

What steps will reproduce the problem?

1. You Assign a "change" event on children checkboxes in a separate script
2. You click the parent checkbox, children toggle their checked attributes
3. The change event is not raised in the external script ( in step 1 )

What is the expected output? What do you see instead?

No Event is raised in the script 1
$(children checkbox selector).change(function(){
///code nothing happens
});

What version of the product are you using? On what operating system?
The 3.0 / Why operating system? it is client side !!! 
FF 3.5 / Ubuntu 10.04

Please provide any additional information below.

Just add this code : in the toggleChildren function : 

checkbox.parents('li:first')
.find('li :checkbox')
.each(function(){
   $(this).trigger('change');
});


That solve the problem for me (tested on Firefox 3.5 / Ubuntu)

I'm planning next features:
* addNode(checkbox, parentLi)
* moveNode(li, parentLi)
* removeNode(checkbox)

Every comment will be welcome!

Add a special style to checkbox input when not all children are checked.

Need a special style for when not all descendants are checked?

I got a problem with big tree rendering.  It shows the whole structure of tree 
when page load or refresh. Please see attached file. Do you know how to hide it 
?

Thanks

Quick clicks screw up collapse/expand anchors

Add automatic building of check all button and uncheck all button

Version of the script I'm using:
0.5


Description of the problem:
I've noticed that checkboxTree 0.5 does not work upon IE and Safari. All nodes 
are extended and don't collapse.


Steps to reproduce the problem:

Version of the script I'm using:0.4.2 



Description of the problem: I tried to connect this plugin with an AJAX request 
and cannot get the tree still working great upon AJAX success response. Is it 
because it works on document ready? Has anyone ever tried to use it in 
connection with a $.ajax request?



Steps to reproduce the problem: Please, find below a sample code:

 $(document).ready(function() {
            // Inizialize tree
            $('#tree').checkboxTree({
                onCheck: {
                    node: 'expand'
                },
                onUncheck: {
                    node: 'collapse'
                },

                collapseImage: 'downArrow.gif',
                expandImage: 'rightArrow.gif',


                initializeChecked: 'expanded',
                initializeUnchecked: 'collapsed'
            });
            // AJAX request
            $(":checkbox").live('click', function(e){
                    e.preventDefault();
                    $.ajax({  
                              url: "treeTest.php",  
                              type: "POST",  
                              data: "trigger",
                              dataType: "html",
                              success: function(msg) {  
                                $("#ajaxResult").html(msg); 
                              },
                              error: function(){} 
                    });
            });

          });

Version of the script I'm using: 0.4.3



Description of the problem:
Hello, 

at first I'd like to thank you for your plugin, this is the best collapsible 
checkbox tree plugin ever!

It works perfect unless you include UI/API/Autocomplete plugin in the same 
page. Attached is my example html page that includes both plugins -autocomplete 
and checkboxtree 0.4.3.

As you can see autocomplete plugin works fine, but your checkboxtree plugin 
does not. If you remove autocomplete from the page (all javascripts + all css), 
the checkboxtree plugin starts to work fine. I'm confused. I spent hours trying 
to solve the issue. 

Any help would be appreciated. 

Steps to reproduce the problem:

There is a problem in current version (4.2). I wanted to not-check ancestors 
when checking children, so I set onCheck: ancestors: 'uncheck' (also left blank 
'') while initializing the tree. But it didn't work. Whenever I checked 
anything, script was checking all parents of checked node. I dig into your 
code, and saw this on 67 line:

            if (options.checkParents) {
                options.onCheck.ancestors = 'check';
            }

So I set checkParents option as false, and ancestors on onCheck started to work 
as it should (as far with current tests). Didn't dig deeper in code, so you can 
check this piece if it interests you.

Your work is awesome by the way ;)

Version of the script I'm using:
checkboxtree-0.4.3 full package

Description of the problem:
I have tried to use this plug-in. I have found it good. There is one issue that 
I am facing since long. After created HTML structure you have suggested and 
added jquery.checkboxtree.js and jquery.checkboxtree.css. Even though it is 
capturing whole page click event and expand collapse(refresh entire grid. Can 
you please confirm whether is this a bug or do I miss anything.

Thanks,
Crazydev 


Steps to reproduce the problem:

Add hooks for check/uncheck, collapse/expand, etc.

Explicit support for events would be greatly appreciated.

collapse(nodeid, parentid)
expand(nodeid, parentid)
un/check(nodeid, childrenToo)

I would like to make it possible to specify a minimum expansion level to always 
be shown, regardless of whether there are any nodes/subnodes that are checked 
or not.
Currently, when nothing at all is check and using the feature 
"initializeUnchecked: 'collapsed'", then everything becomes completely 
collapsed.
This behaviour is not exactly what I want, but I would prefer to always show 
all nodes up to at least a specified level.

For example, if I always want to initially show _at least_ all nodes up to the 
second level (but possibly also show even deeper levels for those options that 
have selected suboptions) then maybe some kind of configuration property like 
this might be used:

levelToInitiallyExpandAllNodesRegardlessOfCheckedState: 2 // the default value 
might be zero to preserve the current behaviour before this feature exist

Regarding levels deeper down than 2 (as used in this example) then the 
expanded/collapsed behaviour can be determined as usual with properties 
"initializeChecked" and "initializeUnchecked",
e.g. if some checkbox at level 4 is checked, then the parent (at level 3) 
should also be expanded, but if no nodes below a certain checkbox at level 3 is 
checked, then such a node at level 3 should be collapsed.

Version of the script I'm using:
0.5


Description of the problem:

In the checkboxtree v. 0.5, time of expanding any tree by selecting checkboxes 
is much more slower than in v. 0.4.3. Consequently, the user receives an error 
(only in IE) - "stack overflow". 

Look at http://www.staff.amu.edu.pl/~andrzejz/checkboxtree/ where I made a 
comparison between both versions. As you can see in 0.5 expanding tree by 
checking checkboxes is very slow. In 0.4.3 everything seems to be okay.


Steps to reproduce the problem:

I'm considering to implement this feature...

Comments are welcome

What steps will reproduce the problem?

1.I have checkboxtree within jQuery UI Accordion section. Tree contain about 
800 items. For some reasons, every click on checkbox causes browser to stop 
responding for about 800-1500 miliseconds. The same issue is when I 
expanding/collapsing nodes. I have some other JS libraries there and I think 
there is some nasty conflict. I had the same problem when i was using 
www.jstree.com. 
2. Decided to try with checkboxtree and still browser get stuck.
3. This is probably not checkboxtree issue and you probably won't be able 
reproduce this problem but...

What is the expected output? What do you see instead?
Expected fast response on checking cboxes and expanding/collapsing tree nodes.


What version of the product are you using? On what operating system?
Version 0.3.1

Please provide any additional information below.

.. but since i had 800 items there, that's 800 event handlers. In any case 
that's too much. This is the changes I made to solve the problem. I suggest you 
to use same approach in next release:


 // s.k. 13.8.2010 removed click handler, added delegate
        //
//        // handle single expand/collapse
//        this.find('span').bind("click", function(e, a){
//
//            if ($(this).hasClass("leaf") == undefined) {
//                return;
//            }
//
//            if ($(this).hasClass("collapsed")) {
//                expand($(this), options);
//            } else {
//                collapse($(this), options);
//            }
//        });

          this.delegate("span.collapsed, span.expanded", "click", function(){
             if ($(this).hasClass("leaf") == undefined) {
                return;
            }
            if ($(this).hasClass("collapsed")) {
                expand($(this), options);
            } else {
                collapse($(this), options);
            }
          });

          // s.k. 13.8.2010 removed click handler, added delegate
//        // handle tree select/unselect
//        this.find(':checkbox').bind("click", function(e, a) {
//
//            if (options.checkChildren) {
//                toggleChildren($(this));
//            }
//
//            if (options.checkParents && $(this).is(":checked")) {
//                checkParents($(this), options);
//            }
//        });
        this.delegate("input[type=checkbox]", "click", function(){
            if (options.checkChildren) {
                toggleChildren($(this));
            }
            if (options.checkParents && $(this).is(":checked")) {
                checkParents($(this), options);
            }
        })

and i got fast response. Thank you.

Version of the script I'm using:

latest
firefox 3.16

Description of the problem:

i don't have a single root but my root has a few checkboxes.  this seems to 
work fine but the first level (which i guess is being treated as a second 
level) is indented.  

Is there anyway to support a situation where there is not a single parent root 
(so the first level is multiple root).  i tried this and it seems to work but 
the first level is indented (as expected) is there anyway to not have the first 
level be multiple checkboxes but also be fully aligned left

Steps to reproduce the problem:

Here is my page source

<ul>
<ul>
<li class="collapsed"><span><img 
src="/content/images/rightArrow.gif"></span><input value="A" class="checktree" 
type="checkbox">A
<ul style="display: none;" class="noBreak">
<li class="leaf"><span></span><input value="1" class="checktree" 
type="checkbox">1
</li><li class="leaf"><span></span><input value="2" class="checktree" 
type="checkbox">2
</li><li class="leaf"><span></span><input value="3" class="checktree" 
type="checkbox">3
</li></ul>
</li><li class="collapsed"><span><img 
src="/content/images/rightArrow.gif"></span><input value="B" class="checktree" 
type="checkbox">B
<ul style="display: none;" class="noBreak">
<li class="leaf"><span></span><input value="1" class="checktree" 
type="checkbox">1
</li><li class="leaf"><span></span><input value="2" class="checktree" 
type="checkbox">2
</li><li class="leaf"><span></span><input value="3" class="checktree" 
type="checkbox">3
</li></ul>
</ul>

First comment with author, release version, website, etc. should be preserved 
into minified version.

We found out the recursion on the checkIfFull was somehow slow.
We've changed your code to get the recursion really faster :

if (options.onCheck.ancestors == 'checkIfFull') {
    if (allDescendantChecked(li)  && !li.parents('ul:first').hasClass("checkboxTree")) {
        check(parentNode(li, options), options);
    }
}

Have a nice day !

Add jQuery UI theme support

Move collapsed/expanded information from element data to class attribute.
Class names will be customizable.

Version of the script I'm using:
jquery:v1.5
checkboxtree:0.4.2
Browser:FF (3.6.13) & IE 8

Description of the problem:
"collapsed" option does seem to function properly when assigned to "true".  
Levels 1 & 2 open and collapse fine.  Anything beyond that either:
(1) opens then quickly closes
(2) opens icon stays in "collapsed" form 


Steps to reproduce the problem:
I've attached my code in a zip.  But to set up and example include a tree of 3+ 
level deep, and pass the collapsed option as true.

pattern to follow: 
http://blog.nemikor.com/2010/05/15/building-stateful-jquery-plugins/

Hi,

is possible to expend tree where checkboxes are already checked? For example: 
When Im editing existing item I have already selected some checkboxes but they 
are not expanded automaticly, is this possible?

Thanks

Best regards
Blaz

Hi there

I'm not sure this is the right place to ask, but is there any way to have this 
behaviour :

When I click a node, all parents are checked, whereas all children are not 
changed

So... If I click the root node, not all sub-nodes are checked, and if I click a 
leaf, all its parents are checked...

Thanks

With jQuery 1.6 a new method .prop has been added to handle properties like 
"checked".

This will remove compatibility with each jQuery version < 1.6

I'm thinking to implement a section with a list of site that uses checkboxtree.

Who want his site in that list, please add a comment with a link and, if he 
like, a logo.

Thanks to everyone for collaboration.