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

2 posts, 0 answers
  1. C
    C avatar
    43 posts
    Member since:
    Jul 2013

    Posted 02 Mar 2015 Link to this post

    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)

     children.forEach(function(child) {
                    if (toSelect )

    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())

    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.

  2. Bozhidar
    Bozhidar avatar
    1096 posts

    Posted 03 Mar 2015 Link to this post


    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();
        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);
        <telerik:RadTreeView runat="server" ID="RadTreeView1"
                <telerik:RadTreeNode Text="Parent 1">
                        <telerik:RadTreeNode Text="Child 1"></telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Child 2"></telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Child 3"></telerik:RadTreeNode>
                <telerik:RadTreeNode Text="Parent 2">
                        <telerik:RadTreeNode Text="Child 1"></telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Child 2"></telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Child 3"></telerik:RadTreeNode>


    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

  3. DevCraft R3 2016 release webinar banner
Back to Top