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

[Vivek]

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
    }

[Vivek]

Hi,

I'm still hoping your reply on this, please let me know the solution.

[Vivek]

Waiting for the solution, pls reply.

[Boyan Dimitrov]

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