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

[Hide]

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>

[Nencho]

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