A checked/unchecked TreeNode Sample

  1. #1

    A checked/unchecked TreeNode Sample

    This is a checked/unchecked TreeNode sample , when the parent node is checked, all child nodes are checked. when all the child nodes are unchecked, the parent node is also unchecked.
    part of the bodys of this post I did not wrote, I just wrote a js.

    The code is very efficient, especially when the node is much.
    The disadvantage of before code is :
    1. when the childnode is checked/unchecked,all of parentnodes will be loop.so filter the leaf node "if(!node.attributes.leaf)".
    2. need to set the node status: check and indeterminate.

    <%@ Page Language="C#" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>A very efficient checked/unchecked TreeNode Sample</title>
        <script type="text/javascript">
            //node check 
            function nodeChecked(node, checked) {
                //parentnode code 
                var parentNode = node.parentNode;
                if(parentNode !== null) {  
                    parentCheck(parentNode,checked);  
                }
                
                //childnode code
                childCheck(node,checked);
            }
            function childCheck(node,checked){
                node.expand();
                var nodeAttr = node.attributes;
                if(!nodeAttr.leaf)//filter leaf,when the leaf is checked, do not loop the parentnode event. great efficiency
                {
                    node.eachChild(function(child){
                        if (child && child.getUI().checkbox != undefined){
                            child.getUI().checkbox.checked=checked;
                        }
                        childCheck(child,checked);            
                    });
                }
            }
            function parentCheck(node ,checked){
                 var checkbox = node.getUI().checkbox;
                 if(typeof checkbox == 'undefined')return ;
                 var state=this.childHasChecked(node,checked); 
             
                 if (state==0){//All of the childnodes are unchecked (checked=false and indeterminate=false)
                     checkbox.checked=false;
                     checkbox.indeterminate=false;
                 } else if(state==1){ //All of the childnodes are checked (checked=true and indeterminate=true),in fact,the childnodes are indeterminate,
                     checkbox.checked=true;
                     checkbox.indeterminate=true;
                 }else{ //All of the childnodes are checked , not indeterminate .(checked=true and indeterminate=false)
                     checkbox.checked=true;
                     checkbox.indeterminate=false;
                 }
                 // checkbox.checked = checked;  
                 node.attributes.checked = checkbox.checked;
                 node.getOwnerTree().fireEvent('check', node, checked);
             
                 var parentNode = node.parentNode;
                 if(parentNode !== null)
                 {
                      this.parentCheck(parentNode,checked);
                 }
            }
            function childHasChecked(node,checked) {
                 var childNodes = node.childNodes;
                 var retValue=0;
                 if(childNodes || childNodes.length>0){
                     for(var i=0;i<childNodes.length;i++){
                     var checkbox=childNodes[i].getUI().checkbox;
               
                     //a. the node is checked and the "indeterminate" is false
                     //b. Aim of this loop is cancel the selected state. if the childnode has been checked,
                     //   and [ if (indeterminate==true) the node is marked "indeterminate=true"  else "checked=false and indeterminate=false" ]
                     if(!checked){
                           if (checkbox.checked )return 1;
                     }else{                                                                                                                                                                                           
                          retValue=2;
                          if (!checkbox.checked || (checkbox.checked && checkbox.indeterminate)){
                               return 1;
                          }
                     }
                 }
             }
             return retValue;
            }
            //get checked nodes
            function findCheckedNodes(tree){
                 var checkedNodes = tree.getChecked();//the tree object is treepanel id
                 var checkedIds = [];
                 for(var i=0;i<checkedNodes.length;i++){
                       checkedIds.push(checkedNodes[i].id);          
                 }
                 return checkedIds.join(',');
            }     
        
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:TreePanel ID="TreePanel1" runat="server" AutoHeight="true">
            <Root>
                <ext:TreeNode Text="Root (level 0)" Expanded="true" Checked="False">
                    <Nodes>
                        <ext:TreeNode Text="Node1 (level 1)" Expanded="true">
                            <Nodes>
                                <ext:TreeNode Text="Node1 (level 2)" Expanded="false">
                                    <Nodes>
                                        <ext:TreeNode Text="Node1 (level 3)">
                                            <Listeners>
                                                <CheckChange Fn="nodeChecked" />
                                            </Listeners>
                                        </ext:TreeNode>
                                        <ext:TreeNode Text="Node2 (level 3)">
                                            <Listeners>
                                                <CheckChange Fn="nodeChecked" />
                                            </Listeners>
                                        </ext:TreeNode>
                                    </Nodes>
                                    <Listeners>
                                        <CheckChange Fn="nodeChecked" />
                                    </Listeners>
                                </ext:TreeNode>
                            </Nodes>
                            <Listeners>
                                <CheckChange Fn="nodeChecked" />
                            </Listeners>
                        </ext:TreeNode>
                        <ext:TreeNode Text="Node2 (level 1)" Expanded="true">
                            <Nodes>
                                <ext:TreeNode Text="Node1 (level 2)" Expanded="false">
                                    <Nodes>
                                        <ext:TreeNode Text="Node1 (level 3)" />
                                        <ext:TreeNode Text="Node2 (level 3)" />
                                    </Nodes>
                                    <Listeners>
                                        <CheckChange Fn="nodeChecked" />
                                    </Listeners>
                                </ext:TreeNode>
                            </Nodes>
                            <Listeners>
                                <CheckChange Fn="nodeChecked" />
                            </Listeners>
                        </ext:TreeNode>
                    </Nodes>
                    <Listeners>
                        <CheckChange Fn="nodeChecked" />
                    </Listeners>
                </ext:TreeNode>
            </Root>
            <Listeners>
                <BeforeAppend Handler="node.attributes.checked = false;" />
                <%-- To avoid setting .Checked for each node --%>
            </Listeners>
        </ext:TreePanel>
        <ext:Button ID="btnDelete" runat="server" Text="get checked id">
            <Listeners>
                <Click Handler="alert(findCheckedNodes(TreePanel1));" />
            </Listeners>
        </ext:Button>
        </form>
    </body>
    </html>
    Last edited by msnqu; Jul 07, 2011 at 6:01 AM. Reason: Optimization of JS code
  2. #2
    Hi,

    Can you provide more details about the code you posted?
  3. #3
    Hi, congratulations for the project.
    I create all nodes by code, but i can not enter the event "CheckChange" because that does not exist in "<node>.Listeners."
    How can I do?

    When you think of ending the beta?

    Best Regards,
    Massimo
  4. #4
    Hi @xeneus,

    I guess you use Ext.NET v2. In this version please use the TreePanel CheckChange listener.
  5. #5
    I Daniil,
    yes i use v 2.0. I insert listeners "CheckChange" in TreePanel with script view in current post but not function. Can you send a little example of this function.

    Code in my .aspx
    <ext:TreePanel ID="trwRecordSelect"
         runat="server"
         Width="350"
         PaddingSpec="5; 5; 5; 0"               
         Region="West">
         <Listeners>
              <CheckChange Fn="nodeChecked" />
         </Listeners>
    </ext:TreePanel>
    Partial Code in my .cs
    ...
    Node rootNode = new Node();
    rootNode.NodeID = string.Format("{0}-{1}", e.Result.ObjectId, e.Result.RecordId);
    rootNode.Text = e.Result.ExtendedDescription;
    rootNode.Checked = e.Result.IsSelected;
    trwRecordSelect.Root.Add(rootNode);
    ...
    Best Regards,
    Massimo
  6. #6
    Well, it appears to be not tightly related with the initial question.

    So, please start a new forum thread. If you feel the threads are related, please feel free to cross-link between the two.
  7. #7
    thnx for the code , but can u give us a sample with node not with TreeNode in V2.0

Similar Threads

  1. Checked/unchecked all subnode of a TreePanel
    By xeneus in forum 2.x Help
    Replies: 0
    Last Post: Jun 04, 2012, 1:13 PM
  2. Replies: 2
    Last Post: Nov 25, 2011, 4:47 PM
  3. Rise an event when checkbox is checked and unchecked
    By vishnukamatam in forum 1.x Help
    Replies: 4
    Last Post: Feb 04, 2010, 2:30 PM
  4. TreeNode checked problem
    By filipator in forum 1.x Help
    Replies: 1
    Last Post: Jan 01, 2010, 7:06 AM
  5. How to know a TreeNode Checked
    By wangzhuqing in forum 1.x Help
    Replies: 2
    Last Post: Jan 18, 2009, 8:58 PM

Tags for this Thread

Posting Permissions