Attaching rootnode that selects/unselects all nodes in the tree

[KC]

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!

[Kate]

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