ExtJS Tips: How to check/unceck all the nodes of a tree(Ext.tree.TreePanel)

This post will help you to achieve following:

  1. Checking/Unchecking all the nodes of a tree.
  2. Checking/Unchecking all the childnodes of a node.
  3. Checking/Unchecking all the siblings of a node.(see comments..)

If you want to check/uncheck all the node of a tree or all the child node of a parent node then following is the way to acheive it:

//function to check/uncheck all the child node.
function toggleCheck(node,isCheck)
{
 if(node)
 {
 var args=[isCheck];
 node.cascade(function(){
 c=args[0];
 this.ui.toggleCheck(c);
 this.attributes.checked=c;
 },null,args);
 }
}
//this will also affect the passed parentNode(node).

Now calling this function for checking/unchecking all the node of a tree:

<br />
var tree=//ext js tree.<br />
toggleCheck(tree.root,true);//for checking all the nodes<br />
//or<br />
toggleCheck(tree.root,false);//for unchecking all the nodes<br />

Now calling above function for checking/unchecking all the children of a node:

<br />
var parentNode=//a node from tree.<br />
toggleCheck(parentNode,true);//for checking all the child nodes<br />
//or<br />
toggleCheck(parentNode,false);//for unchecking all the child nodes<br />

If you find any error or face any difficulty please let me know by comments.

Advertisements
Published in: on January 18, 2010 at 11:22 am  Comments (18)  
Tags: , ,

The URI to TrackBack this entry is: https://indiandeve.wordpress.com/2010/01/18/extjs-tips-how-to-checkunceck-all-the-nodes-of-a-treeext-tree-treepanel/trackback/

RSS feed for comments on this post.

18 CommentsLeave a comment

  1. Hi,

    My intension is to check all the child nodes and leaf while checking a particular node. i had given id for each node and i can access the particular id on clicking that node.

    what should i do next to check all the siblings ??

    please advice me since i am a fresher with ext.

    thanks in advance

    tismon

    • Hi,
      You can get the parent node of that node using api, node.parentNode; now using above post you can check all the childs.
      ex.
      function checkAllSiblings(node){
      var parent=node.parentNode;
      if(!parent) return; //parent doesn’t exists.
      toggleCheck(parent,true)//see above post for this function.
      }

  2. Hi,
    I have a TreePanel and there is a rootnode defined for it. All other nodes are appened as child of it. Now i have a select all button which will select all child node only.I used the above toggleCheck functionality.It is selecting all child node along with the RootNode which is not I require. As mentioned above that if the parent node is passed as argument then it will select only the child nodes. Can u tell me how can I get parentNode from TreePanel. Are parentNode and RootNode same?
    Following is the code i m using…

    toggleCheck(TreePanel.root,true);

    • Hi,
      you are doing it correctly, and yes it will also affect parent node(in your case root node). So to make root uncheck you can uncheck root node after calling toggleCheck():
      var node=TreePanel.root;

      if(node){
      //check root+children
      toggleCheck(node,true);
      //uncheck root
      node.ui.toggleCheck(false);
      node.attributes.checked=false;
      }

  3. Hi,

    I did changes according to your suggestion and its working very fine.
    Thanks a lot for your help. Since I have a little knowledge on extjs I spent lots of time for
    this functionality and at last I got your help.

  4. In my tree, one of the parent has so many child nodes, like hundreds.

    every time the node is clicked, browser is stop working and warning like below is shown:

    “A script on this page may be busy, or it may have stopped responding. You can stop the script now, open the script in the debugger, or let the script continue.”

    Is there any way to optimize the script?

    thanks in advance.

    • this problem should not occur in new browsers, which browser you are using?

      • the new one; chrome, firefox 3.6, etc. there wouldn’t be a performance problem if the node is not this much. But thankfully i’ve managed to improve the performance by doing

        tree_object.root.suspendEvents();

        before doing the cascade. btw, by doing that, would be any draw back in my script?

        thanks.

        • if you are calling suspendEvents(),
          you must also call resumeEvents() after processing is over i.e. in your case after function call. after all the processing has been done call resumeEvents().

  5. Hi I need some help, I use the function avobe to check the nodes of a treepanel and I don’t see it checked, I mean the nodes are checked right but they don’t show checked.. How can I force the panel to show the new checked nodes?

    Admin’s Reply
    I guess there is some other problem. You need to check your code again.

  6. //function to check/uncheck all the child node.
    //
    //
    //

    // JS file

    function toggleCheck(node,isCheck)
    {
    if(node)
    {
    node.expand();
    node.eachChild(function(n) {
    n.eachChild(function(n1) {
    toggleCheck(n1, isCheck);
    });

    n.getUI().toggleCheck(isCheck);

    this.attributes.checked = isCheck;
    /*if(isCheck)
    n.getUI().show();*/
    });

    }
    }

    Ext.onReady(function(){
    // shorthand
    var tree = new Ext.tree.TreePanel({

    root: {
    nodeType: ‘async’,
    },
    title: ‘My Task List’,
    height: 300,
    width: 400,
    useArrows:true,
    autoScroll:true,
    animate:true,
    enableDD:true,
    containerScroll: true,
    rootVisible: false,
    frame: true,

    dataUrl : ‘check-nodes.json’,
    listeners:
    {
    ‘checkchange’: function(node, checked){
    if(checked)
    var tree = toggleCheck(node,true);
    else
    var tree = toggleCheck(node,false);
    }
    }

    });

    // render the tree
    tree.render(‘tree-div’);
    tree.getRootNode().expand();
    });

  7. salam i need some Help
    When I select any one Child node of treeview so his parent node is automatically selected
    I do this work in C#.net
    plz reply hurry

    Admin’s Reply
    I guess in c# you can do this by registering a method for treenode click and if node is checked just check its parent node.

  8. Hi ,

    I need help on how to create JSON from all the nodes of a tree.

    Thanks in advance.

    Admin’s Reply
    Can you give the example of JSON, you want to use. And what exactly you want to do with it? If it is related to ext js tree, you can post your question in to extjs forum and just give the link here so that other could get benefit from it.

  9. Nice tip! I have a suggestion & a question:
    1. The code could be slightly simplified like below:
    if(node)
    {
    node.cascade(function(c){
    this.ui.toggleCheck(c);
    this.attributes.checked=c;
    },null,[isCheck]);
    }
    2. If (part of) a tree was not expanded ever, then that part of the tree is not yet rendered. node.cascade would fail in such situation (the hidden/unrendered children are not (un)checked). I couldn’t find a good way of dealing with it without overriding multiple treePanel functions, do you have any good solution for it? Thanks.

    Admin’s reply
    If you could give me the complete business scenario, we could find out some good solution. Because above scenario doesn’t come normally. What we do generally is check all the nodes and then save all(by sending call to server), or just expand all the nodes and check all and then save all(by sending call to server), optionally we could have a button which could check & save all the child of a selected node(by sending call to server).

    • Thanks for your reply! Our tree was loaded once using a dataURL, and the tree nodes are by default expanded to 4th level (so any nodes beyond 4th would be not rendered after initial loading). I solved the issue by expand (then collapse) the unrendered child nodes if they’re found.

      I also found that this.ui.toggleCheck(c); and this.attributes.checked=c; are duplicates AFAIK. The former statement suffices. Is there any reason to have both in the code?

      Admin’s Reply
      this.attributes.checked=c; this statement is to set the data underlying node. While former statement is to set node UI. Some time data is not set while setting UI. May be in new version of ExtJS, its resolved.

  10. I want my checkbox tree to behave like an radio tree..
    i.e if i select any leaf node its siblings should be unchecked…what changes do i have to perform…
    btw is there any radio tree in extjs??

    thanks

    Admin’s Reply,
    I dont think any radio tree is there in extjs, you can write code to do so.

  11. I have used this togglecheck in the external js and it is taking long time to check or uncheck, i have a tree with many nodes. so i get a error message stating “script causes internet explorer to run slowly” so i used a for loop and made checkbox.checked=true but this option is not accepted by the back end c# code it is not able to get the value of checked items. it is accepting only togglecheck checked items.

    I hope i would get some help from you, Thanks for your help in advance

  12. hellow ,,,am having a proble while using the function to check all tree nodes….//function to check/uncheck all the child node.
    function toggleCheck(node,isCheck)
    {
    if(node)
    {
    var args=[isCheck];
    node.cascade(function(){
    c=args[0];
    this.ui.toggleCheck(c);
    this.attributes.checked=c;
    },null,args);
    }
    }
    firebug desplayes

    this.ui is undefined
    [Break On This Error]

    this.ui.toggleCheck(c);

    am using extjs 4 ..


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: