Attaching rootnode that selects/unselects all nodes in the tree

2 posts, 0 answers
  1. KC
    KC avatar
    18 posts
    Member since:
    Jan 2011

    Posted 28 Jan 2011 Link to this post

    Hi,

    I need to add a rootnode checkbox to a treeview that would check or uncheck all nodes on check/uncheck.


    I have tried to add it on client and server side but did not get it to work


    On the server side:


    Protected Sub treeview1_DataBound(ByVal sender As Object, ByVal e As EventArgs) Handles groups.DataBound


    Dim rootNode As New RadTreeNode("Select/ Unselect all")


    Dim nodeArray() As RadTreeNode = Nothing


    treeview1.Nodes.CopyTo(nodeArray, 0)


    rootNode.Nodes.AddRange(nodeArray)


    End Sub


    On the client side:


    <asp:CheckBox id="chkGroup1" runat="server" Text="Select/UnselectAll" OnClick="selectthis(this);" />


    function selectthis(element) {
    var tree = document.form1.treeview1.ClientID;
    if (element.checked)
    {
    for (var i = 0; i < tree.get_nodes().get_count(); i++) 
    {
    var node = tree.get_nodes().getNode(i);
    node.set_checked(true);
    node.set_expanded(true);
    }
    }
    }




    The server side implementation fails as the array is null and the client side cannot fetch the element.


    Pls let me know if there is way around this or any other way I can add a root checkbox to the tree.


    Thanks!
  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 01 Feb 2011 Link to this post

    Hello KC,

    You could modify your code on the client side to enable check/ucheck all nodes like this:
    <script type="text/javascript">
            function selectthis(element) {
                var tree = $find("<%= RadTreeView1.ClientID %>");
                if (element.checked) {
                    for (var i = 0; i < tree.get_nodes().get_count(); i++) {
                        var node = tree.get_nodes().getNode(i);
                        node.set_checked(true);
                        node.set_expanded(true);
                    }
               }
                else
                for (var i = 0; i < tree.get_nodes().get_count(); i++) {
                        var node = tree.get_nodes().getNode(i);
                    node.set_checked(false);
                node.set_expanded(false);}
     
            }
        </script>

    However, the code above will only check/uncheck the first level of the TreeView nodes, so if you need the child nodes also to be affected you will have to add the CheckChildNodes property to the TreeView control and set it to true like this:

    <telerik:RadTreeView ID="RadTreeView1" runat="server" CheckChildNodes="true" CheckBoxes="true">

    All the best,
    Kate
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Back to Top