Un-checked child node needs to remain un-checked upon parent node with set_checkable(false)

2 posts, 0 answers
  1. Hide
    Hide avatar
    1 posts
    Member since:
    Feb 2013

    Posted 25 Apr 2014 Link to this post

    Hi,

    I have a TriStateCheckBoxes TreeView and want to filter out nodes based on user inputs from client side. Parent nodes need to stay visible if one or more child nodes are visible, but I don't want the parents to be selectable since they are not a partial match with the user input. A problem I'm having is that as soon as set_checkable(false) is called on parent nodes whose CheckState were Indeterminate, un-checked child nodes get checked. I want those un-checked nodes to remain un-checked. For instance, in my example below, check all nodes except "Child RadTreeNode1" and perform a filter with "child" input. When the filter is done, the check box on the root becomes invisible (expected) but the "Child RadTreeNode1" node gets checked (not what I want). How can I workaround it so that the un-checked nodes remain un-checked? Please advise. Thank you.
    <script type="text/javascript">
                function ClientClicked(sender, args) {
                    var tree = $find("<%= myTree.ClientID %>");
                    var textbox = document.getElementById("<%= txtBox.ClientID %>");
                    var searchString = textbox.value;
                    for (var i = 0; i < tree.get_nodes().get_count() ; i++) {
                        filterNodes(tree.get_nodes().getNode(i), searchString);
                    }
                }
     
                function filterNodes(node, searchString) {
                    var hasFoundChildren = false;
                    for (var i = 0; i < node.get_nodes().get_count() ; i++) {
                        hasFoundChildren = filterNodes(node.get_nodes().getNode(i), searchString) || hasFoundChildren;
                    }
     
                    var returnVal;
     
                    if (node.get_text().toLowerCase().indexOf(searchString.toLowerCase()) != -1) {
                        node.set_visible(true);
                        node.set_checkable(true);
                        node.enable();
     
                        returnVal = true;
                    }
                    else if (hasFoundChildren) {
                        node.set_visible(true);
                        node.set_checkable(false);
     
                        returnVal = true;
                    }
                    else {
                        node.set_visible(false);
     
                        returnVal = false;
                    }
     
                    return returnVal;
                }
            </script>
            <div>
                <telerik:RadTextBox ID="txtBox" runat="server" Width="100%" />
                <telerik:RadButton ID="filterButton" runat="server" AutoPostBack="false" OnClientClicked="ClientClicked" Text="Filter" />
                <telerik:RadTreeView ID="myTree" runat="server" CheckBoxes="true" TriStateCheckBoxes="true">
                    <Nodes>
                        <telerik:RadTreeNode runat="server" Text="Root RadTreeNode">
                            <Nodes>
                                <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 1">
                                </telerik:RadTreeNode>
                                <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 2">
                                    <Nodes>
                                        <telerik:RadTreeNode runat="server" Text="Grand Child RadTreeNode 1">
                                        </telerik:RadTreeNode>
                                    </Nodes>
                                </telerik:RadTreeNode>
                            </Nodes>
                        </telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeView>
            </div>
  2. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 30 Apr 2014 Link to this post

    Hello Hide,

    I was able to replicate the described issue and it seems as a bug. Therefore, I had already forwarded it to our developer team. Thank you for pointing that out.

    As a workaround, I would suggest you to use another approach for hiding the checkbox. Please consider the following implementation instead of the usage of set_checkable() function:

    else if (hasFoundChildren) {
                   node.set_visible(true);
                   node.get_checkBoxElement().style.visibility = "hidden"
                   $($(node.get_checkBoxElement()).next()).css("margin-left", "-20px")
     
                   returnVal = true;
               }


    Regards,
    Nencho
    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