While the checkbox state is checked at the root node, load on demand all the child nodes and set the child nodes checkbox to checked

4 posts, 0 answers
  1. Hadi Teo
    Hadi Teo avatar
    23 posts
    Member since:
    Jan 2008

    Posted 09 Jun 2009 Link to this post

    Hi,

    Here is my scenario. I have a two level tree : one root node with one level of child node. The child node are loaded on demand by configuring the root node to ServerSideCallBack.

    My goal is to combine the setting check box action with the loading child nodes on demand. Means that when i check the root node, it will load on demand all the child nodes and set its child nodes to checked.

    currently i am using these code snippet which is triggered on client side event : OnClientNodeChecked. It will trigger DoCientNodeChecked event.

    1     function UpdateAllChildren(nodes, checked) 
    2     { 
    3        var i; 
    4        for (i=0; i<nodes.get_count(); i++) 
    5        { 
    6            if (checked) 
    7            { 
    8                nodes.getNode(i).check(); 
    9            } 
    10            else 
    11            { 
    12                nodes.getNode(i).set_checked(false); 
    13            } 
    14             
    15            if (nodes.getNode(i).get_nodes().get_count()> 0) 
    16            { 
    17                UpdateAllChildren(nodes.getNode(i).get_nodes(), checked); 
    18            } 
    19        } 
    20     } 
    21     function DoClientNodeChecked(sender, eventArgs) 
    22     { 
    23         debugger 
    24          
    25         if(!eventArgs.get_node().get_expanded()) 
    26         { 
    27             eventArgs.get_node().set_expanded(true); 
    28         } 
    29          
    30         var childNodes; 
    31          
    32         while(eventArgs.get_node().get_nodes() == null) 
    33         {         
    34             childNodes = eventArgs.get_node().get_nodes(); 
    35         } 
    36  
    37         var isChecked = eventArgs.get_node().get_checked(); 
    38         UpdateAllChildren(childNodes, isChecked); 
    39     }     



    All the root nodes are configured with ExpandMode = TreeNodeExpandMode.ServerSideCallBack. so the workaround is expand the current node using client side method using set_expanded(true). But since it's working asynchronously, the next method which is "var isChecked = eventArgs.get_node().get_checked();" is executed directly.

    May i know how to wait or check whether all the child nodes has been loaded successfully, before traversing the child nodes ?

    Thanks

    hadi teo
  2.
  3. Hadi Teo
    Hadi Teo avatar
    23 posts
    Member since:
    Jan 2008

    Posted 10 Jun 2009 Link to this post

    I have utilized the OnClientNodePopulated client side event to hook some codes to check whether this particular node is checked or not, and then set the checkbox=checked to all the child nodes.

    But there is an issue. although i have checked first whether this node is expanded or not, and then specifically expand the node so that it will load on demand all the child nodes, seems like it is not expanded.

    1     function UpdateAllChildren(nodes, checked) 
    2     { 
    3        var i; 
    4        for (i=0; i<nodes.get_count(); i++) 
    5        { 
    6            if (checked) 
    7            { 
    8                nodes.getNode(i).check(); 
    9            } 
    10            else 
    11            { 
    12                nodes.getNode(i).set_checked(false); 
    13            } 
    14        } 
    15     } 
    16     function DoClientNodeChecked(sender, eventArgs) 
    17     {    
    18         var expandStatus = eventArgs.get_node().get_expanded(); 
    19          
    20         if(!expandStatus) 
    21         { 
    22             eventArgs.get_node().expand(); 
    23              
    24             return; 
    25         } 
    26           
    27         var childNodes = eventArgs.get_node().get_nodes();                 
    28          
    29         var isChecked = eventArgs.get_node().get_checked(); 
    30         UpdateAllChildren(childNodes, isChecked); 
    31     }     
    32      
    33     function DoClientNodePopulated(sender, eventArgs) 
    34     { 
    35         var childNodes = eventArgs.get_node().get_nodes();                 
    36          
    37         var isChecked = eventArgs.get_node().get_checked(); 
    38         UpdateAllChildren(childNodes, isChecked); 
    39     } 
  5. Hadi Teo
    Hadi Teo avatar
    23 posts
    Member since:
    Jan 2008

    Posted 10 Jun 2009 Link to this post

    I tried to use server side events and completely abandoned the client side, just for the alternatives.

    i try to hook on NodeCheck server side event and by checking on the Expanded property, i invoke Toggle() method or ExpandAllChildNodes() method, but with no success. The node is still closed. After close debugging, i notice that even though i specifically invoke Toggle() method, it won't invoke the NodeExpand server side event.

    Here are my code snippet

    1         protected void tvSelection_NodeExpand(object sender, RadTreeNodeEventArgs e) 
    2         { 
    3             SubCategoryRepository subCategoryRepo = new SubCategoryRepository(); 
    4             List<SubCategory> subCategoryList = subCategoryRepo.RetrieveByCategoryId(new Guid(e.Node.Value)); 
    5  
    6             foreach (SubCategory subCategory in subCategoryList) 
    7             { 
    8                 e.Node.Nodes.Add(new RadTreeNode(subCategory.Description, subCategory.Id.ToString())); 
    9             } 
    10  
    11             e.Node.ExpandMode = TreeNodeExpandMode.ClientSide; 
    12  
    13             if (e.Node.Checked) 
    14             { 
    15                 foreach (RadTreeNode node in e.Node.Nodes) 
    16                 { 
    17                     node.Checked = true; 
    18                 } 
    19             } 
    20         } 
    21  
    22         protected void tvSelection_NodeCheck(object sender, RadTreeNodeEventArgs e) 
    23         { 
    24             RadTreeNode currentNode = e.Node; 
    25  
    26             if (currentNode.ParentNode == null) 
    27             { 
    28                 if (currentNode.Expanded) 
    29                 { 
    30                     foreach (RadTreeNode node in currentNode.Nodes) 
    31                     { 
    32                         node.Checked = true; 
    33                     } 
    34                 } 
    35                 else 
    36                 { 
    37                     currentNode.Toggle(); 
    38                 } 
    39  
    40             } 
    41             else 
    42             { 
    43                 foreach (RadTreeNode rootNode in tvSelection.Nodes) 
    44                 { 
    45                     foreach (RadTreeNode subCategoryNode in rootNode.Nodes) 
    46                     { 
    47                         if (subCategoryNode.Value == currentNode.Value) 
    48                         { 
    49                             subCategoryNode.Checked = currentNode.Checked; 
    50                         } 
    51                     } 
    52                 } 
    53             } 
    54         } 
    55  
  7. Yana
    Admin
    Yana avatar
    5043 posts

    Posted 12 Jun 2009 Link to this post

    Hi Hadi,

    Please find attached a simple page demonstrating the needed approach. Download it and give it a try.

    Kind regards,
    Yana
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
Back to Top