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

RadTreeView-expand()/collapse is not working as expected.

3 Answers 65 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Vivek
Top achievements
Rank 2
Vivek asked on 19 Sep 2013, 08:28 AM
Hi, 

I am trying to achive the below behaviour in RadTreeView at client side.

When uncheck the select All1, all the child nodes should collapse upto First Level which is "Contract1 and Contract2" in my case but presently it is collapsing upto root level "Select All 1" which is incorrect.

For your covenience, I have attached the snap shot and the piece of working code, please have a look and help me to find out the way to achieve this required behaviour.

PFA -  radreeview_desiredbehaviour.png

Hrml and Javascript Markup -
 
<script type="text/javascript">
 
        function OnClientNodeClicked(sender, eventArgs) {
            var tree = $find("<%=RadTreeView1.ClientID %>");
 
            var currentNode = eventArgs.get_node();
            var currentNodeText = currentNode.get_textElement().innerHTML;
            var allNodes = currentNode.get_allNodes();
            var allNodesCount = allNodes.length;
 
            if (currentNode.get_checked())
            {
                for (var i = 0; i < allNodes.length; i++)
                {
                    allNodes[i].set_checked(true);
                    currentNode.set_checked(true);
                    allNodes[i].expand();
                    currentNode.expand()
                }
            }
            else if (!currentNode.get_checked())
            {
                if (currentNodeText == "Select All 1")
                {
                    for (var i = 0; i < allNodesCount; i++)
                    {
                        if (allNodes[i].get_level() == 1)
                        {
                            allNodes[i].expand();
                            currentNode.expand()
                        }
                        else
                        {
                            allNodes[i].set_checked(false);
                            currentNode.set_checked(false);
                            allNodes[i].collapse();
                            currentNode.collapse();
                        }
                    }                                       
                }
            }
            else
            {
                for (var i = 0; i < allNodes.length; i++) {
                    allNodes[i].set_checked(true);
                    currentNode.set_checked(true);
                }
            }
        
 
    </script>
  <telerik:RadTreeView ID="RadTreeView1" runat="server" EnableEmbeddedBaseStylesheet="false"
        EnableEmbeddedSkins="false" CheckBoxes="true" OnClientNodeChecked="OnClientNodeClicked">
        
    </telerik:RadTreeView>
 
 
Server Side Code -
 
public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                RenderNodes();
            }
        }
 
        protected void RenderNodes()
        {
            List<Contract> contracts = GetData();
            RadTreeNode selectAllContracts = new RadTreeNode("Select All 1");
            RadTreeView1.Nodes.Add(selectAllContracts);
            foreach (Contract contract in contracts)
            {
                RadTreeNode contracNode = new RadTreeNode(contract.Text);
                AddPlanNode(contract, contracNode);
                selectAllContracts.Nodes.Add(contracNode);
            }
            RadTreeView1.ExpandAllNodes();
            RadTreeView1.CheckAllNodes();
        }
 
        private static void AddPlanNode(Contract contract, RadTreeNode contracNode)
        {
            RadTreeNode selectAllPlans = new RadTreeNode("Select All 2");
            contracNode.Nodes.Add(selectAllPlans);
 
            foreach (Plan plan in contract.Plans)
            {
                RadTreeNode planNode = new RadTreeNode(plan.Text);
                selectAllPlans.Nodes.Add(planNode);
 
                AddAdapterNode(plan, planNode);
            }          
        }
 
        private static void AddAdapterNode(Plan plan, RadTreeNode planNode)
        {
            RadTreeNode selectAllAdapters = new RadTreeNode("Select All 3");
            planNode.Nodes.Add(selectAllAdapters);
 
            foreach (Adapter adapter in plan.Adapters)
            {
                RadTreeNode adapterNode = new RadTreeNode(adapter.Text);
                selectAllAdapters.Nodes.Add(adapterNode);
            }
            
        }
 
 
        #region Dummy Data
        private List<Contract> GetData()
        {
            Plan plan1 = new Plan { Text = "Plan1", Adapters = new List<Adapter> { new Adapter { Text = "Adapter1-1" }, new Adapter { Text = "Adapter1-2" } } };
            Plan plan2 = new Plan { Text = "Plan2", Adapters = new List<Adapter> { new Adapter { Text = "Adapter2-1" }, new Adapter { Text = "Adapter2-2" } } };
            Contract contract1 = new Contract { Text = "Contract1", Plans = new List<Plan> { plan1, plan2 } };
 
            Plan plan3 = new Plan { Text = "Plan3", Adapters = new List<Adapter> { new Adapter { Text = "Adapter3-1" }, new Adapter { Text = "Adapter3-2" } } };
            Plan plan4 = new Plan { Text = "Plan4", Adapters = new List<Adapter> { new Adapter { Text = "Adapter4-1" }, new Adapter { Text = "Adapter4-2" } } };
            Contract contract2 = new Contract { Text = "Contract2", Plans = new List<Plan> { plan3, plan4 } };
 
            List<Contract> contracts = new List<Contract> { contract1, contract2 };
            return contracts;
        }
 
        public class Contract
        {
            public string Text { get; set; }
            public List<Plan> Plans { get; set; }
        }
 
        public class Plan
        {
            public string Text { get; set; }
            public List<Adapter> Adapters { get; set; }
        }
 
        public class Adapter
        {
            public string Text { get; set; }
        }
        #endregion
    }

3 Answers, 1 is accepted

Sort by
0
Vivek
Top achievements
Rank 2
answered on 20 Sep 2013, 11:12 AM
Hi,

I'm still hoping your reply on this, please let me know the solution.
0
Vivek
Top achievements
Rank 2
answered on 22 Sep 2013, 11:20 AM
Waiting for the solution, pls reply.
0
Boyan Dimitrov
Telerik team
answered on 24 Sep 2013, 08:49 AM
Hello,

Please find below a modified version of your script code implementing the desired functionality.
//JavaScript
function OnClientNodeClicked(sender, eventArgs) {
    var tree = $find("<%=RadTreeView1.ClientID %>");
 
    var currentNode = eventArgs.get_node();
    var currentNodeText = currentNode.get_textElement().innerHTML;
    var allNodes = currentNode.get_allNodes();
    var allNodesCount = allNodes.length;
 
    if (currentNode.get_checked()) {
        for (var i = 0; i < allNodes.length; i++) {
            allNodes[i].set_checked(true);
            currentNode.set_checked(true);
            allNodes[i].expand();
            currentNode.expand()
        }
    }
    else if (!currentNode.get_checked()) {
        if (currentNodeText == "Select All 1") {
            for (var i = 0; i < allNodesCount; i++) {
                if (allNodes[i].get_level() == 1) {
                    allNodes[i].collapse();
                    currentNode.expand()
                }
                else {
                    allNodes[i].set_checked(false);
                    currentNode.set_checked(false);
                    allNodes[i].collapse();
                             //currentNode.collapse(); please remove that line
                }
            }
        }
    }
    else {
        for (var i = 0; i < allNodes.length; i++) {
            allNodes[i].set_checked(true);
            currentNode.set_checked(true);
        }
    }
}

Please note that when you are checking the Select All 1 node you have to collapse all first level nodes ( in your case Contract 1 and Contract 2) and keep your root node ( Select All 1) expanded. That way you will keep only those two nodes visible to user.

Regards,
Boyan Dimitrov
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Tags
TreeView
Asked by
Vivek
Top achievements
Rank 2
Answers by
Vivek
Top achievements
Rank 2
Boyan Dimitrov
Telerik team
Share this question
or