I want selection on the client to cascade down, preferably while allowing ctrl-clicks

[C]

In my tree, the leaves are the data carriers, but I want a click on a particular node to (visually) select itself and all its descending nodes. I am then using the list of selected nodes in an Ajax request.

But I haven't been able to figure out how to accomplish this.

I started out by selecting all the node's children:

var toSelect = !node.get_selected();

if (toSelect)
                node.select();
            else
                node.unselect();

 children.forEach(function(child) {
                if (toSelect )
                    child.select();                    
                else
                    child.unselect();
            });

This does indeed select all the nodes. The problem though, is that it does not show (they don't turn blue). So I was looking for a way to do this through the Telerik client side API, but failed. So I turned to Jquery:

var tree = $find("rtCustomerGroups");
var nodes = tree.get_nodes();

nodes.forEach(function(node) {
if (node.get_selected())
node.addClass("rtSelected");
else
node.removeClass("rtSelected");

The problem with this approach is that, while it works visually, the browser does not seem to like it - as it's complaining (sometimes) with a typeError saying addClass/removeClass aren't functions.

This also breaks the javascript as the next line, calling the Ajax function, never gets run.

This really bugs me, as the selection really works the way I want, including multi selection with ctrl click.

[Bozhidar]

Hi,

Thank you for contacting us.

Here's some sample code that I tried on my end and seems to be working properly:

<script type="text/javascript">

    function onClientNodeClicked(sender, args) {
        var node = args.get_node();

        selectChildren(node);
    }

    function selectChildren(node) {
        var children = node.get_nodes();
        var childrenCount = children.get_count();
        var child;

        if (childrenCount) {
            for (var i = 0; i < childrenCount; i++) {
                child = children.getNode(i);

                child.select();
                selectChildren(child);
            }
        }
    }

</script>

<div>

    <telerik:RadTreeView runat="server" ID="RadTreeView1"
        OnClientNodeClicked="onClientNodeClicked"
        MultipleSelect="true">
        <Nodes>
            <telerik:RadTreeNode Text="Parent 1">
                <Nodes>
                    <telerik:RadTreeNode Text="Child 1"></telerik:RadTreeNode>
                    <telerik:RadTreeNode Text="Child 2"></telerik:RadTreeNode>
                    <telerik:RadTreeNode Text="Child 3"></telerik:RadTreeNode>
                </Nodes>
            </telerik:RadTreeNode>
            <telerik:RadTreeNode Text="Parent 2">
                <Nodes>
                    <telerik:RadTreeNode Text="Child 1"></telerik:RadTreeNode>
                    <telerik:RadTreeNode Text="Child 2"></telerik:RadTreeNode>
                    <telerik:RadTreeNode Text="Child 3"></telerik:RadTreeNode>
                </Nodes>
            </telerik:RadTreeNode>
        </Nodes>
    </telerik:RadTreeView>

</div>

Regards,
Bozhidar
Telerik