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

  2. Bozhidar
    Admin
    Bozhidar avatar
    1103 posts

    Posted 03 Mar 2015 Link to this post

    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
     

    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. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top