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

4 posts, 0 answers
  1. Vivek
    Vivek avatar
    38 posts
    Member since:
    Mar 2013

    Posted 19 Sep 2013 Link to this post

    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
        }
  2. Vivek
    Vivek avatar
    38 posts
    Member since:
    Mar 2013

    Posted 20 Sep 2013 Link to this post

    Hi,

    I'm still hoping your reply on this, please let me know the solution.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Vivek
    Vivek avatar
    38 posts
    Member since:
    Mar 2013

    Posted 22 Sep 2013 Link to this post

    Waiting for the solution, pls reply.
  5. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 24 Sep 2013 Link to this post

    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.
Back to Top