This is a migrated thread and some comments may be shown as answers.

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

3 Answers 67 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Hadi Teo
Top achievements
Rank 1
Hadi Teo asked on 10 Jun 2009, 03:09 AM
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.

    function UpdateAllChildren(nodes, checked) 
    { 
       var i; 
       for (i=0; i<nodes.get_count(); i++) 
       { 
           if (checked) 
           { 
               nodes.getNode(i).check(); 
           } 
           else 
           { 
               nodes.getNode(i).set_checked(false); 
           } 
            
           if (nodes.getNode(i).get_nodes().get_count()> 0) 
           { 
               UpdateAllChildren(nodes.getNode(i).get_nodes(), checked); 
           } 
       } 
    } 
    function DoClientNodeChecked(sender, eventArgs) 
    { 
        debugger 
         
        if(!eventArgs.get_node().get_expanded()) 
        { 
            eventArgs.get_node().set_expanded(true); 
        } 
         
        var childNodes; 
         
        while(eventArgs.get_node().get_nodes() == null
        {         
            childNodes = eventArgs.get_node().get_nodes(); 
        } 
 
        var isChecked = eventArgs.get_node().get_checked(); 
        UpdateAllChildren(childNodes, isChecked); 
    }     



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

3 Answers, 1 is accepted

Sort by
0
Hadi Teo
Top achievements
Rank 1
answered on 10 Jun 2009, 09:01 AM
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.

    function UpdateAllChildren(nodes, checked) 
    { 
       var i; 
       for (i=0; i<nodes.get_count(); i++) 
       { 
           if (checked) 
           { 
               nodes.getNode(i).check(); 
           } 
           else 
           { 
               nodes.getNode(i).set_checked(false); 
           } 
       } 
    } 
    function DoClientNodeChecked(sender, eventArgs) 
    {    
        var expandStatus = eventArgs.get_node().get_expanded(); 
         
        if(!expandStatus) 
        { 
            eventArgs.get_node().expand(); 
             
            return
        } 
          
        var childNodes = eventArgs.get_node().get_nodes();                 
         
        var isChecked = eventArgs.get_node().get_checked(); 
        UpdateAllChildren(childNodes, isChecked); 
    }     
     
    function DoClientNodePopulated(sender, eventArgs) 
    { 
        var childNodes = eventArgs.get_node().get_nodes();                 
         
        var isChecked = eventArgs.get_node().get_checked(); 
        UpdateAllChildren(childNodes, isChecked); 
    } 
0
Hadi Teo
Top achievements
Rank 1
answered on 10 Jun 2009, 09:02 AM
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

        protected void tvSelection_NodeExpand(object sender, RadTreeNodeEventArgs e) 
        { 
            SubCategoryRepository subCategoryRepo = new SubCategoryRepository(); 
            List<SubCategory> subCategoryList = subCategoryRepo.RetrieveByCategoryId(new Guid(e.Node.Value)); 
 
            foreach (SubCategory subCategory in subCategoryList) 
            { 
                e.Node.Nodes.Add(new RadTreeNode(subCategory.Description, subCategory.Id.ToString())); 
            } 
 
            e.Node.ExpandMode = TreeNodeExpandMode.ClientSide; 
 
            if (e.Node.Checked) 
            { 
                foreach (RadTreeNode node in e.Node.Nodes) 
                { 
                    node.Checked = true
                } 
            } 
        } 
 
        protected void tvSelection_NodeCheck(object sender, RadTreeNodeEventArgs e) 
        { 
            RadTreeNode currentNode = e.Node; 
 
            if (currentNode.ParentNode == null
            { 
                if (currentNode.Expanded) 
                { 
                    foreach (RadTreeNode node in currentNode.Nodes) 
                    { 
                        node.Checked = true
                    } 
                } 
                else 
                { 
                    currentNode.Toggle(); 
                } 
 
            } 
            else 
            { 
                foreach (RadTreeNode rootNode in tvSelection.Nodes) 
                { 
                    foreach (RadTreeNode subCategoryNode in rootNode.Nodes) 
                    { 
                        if (subCategoryNode.Value == currentNode.Value) 
                        { 
                            subCategoryNode.Checked = currentNode.Checked; 
                        } 
                    } 
                } 
            } 
        } 
 
0
Yana
Telerik team
answered on 12 Jun 2009, 12:53 PM
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.
Tags
TreeView
Asked by
Hadi Teo
Top achievements
Rank 1
Answers by
Hadi Teo
Top achievements
Rank 1
Yana
Telerik team
Share this question
or