RadDropDownTree expands all nodes after backspacing the filter text

[Clark]

Hello,

When I filter on the RadDropDownTree then backspace everything I typed  in the filter field it expands all the nodes on the tree.

What I want it to do is collapse all the nodes as if I'm starting at the very beginning.

Peter Milchev gave me a nice working script from my last filter question.  I'm posting it here.  Perhaps it can be modified? 

Thanks!

--Clark

<script>

    var $T = Telerik.Web.UI;

    Telerik.Web.UI.RadDropDownTree.Manager.prototype._filterNodes = function (text) {

        var nodes = this._embeddedTree.get_allNodes(),

            count = nodes.length,

            regEx,

            i;

        if (this._filter == $T.DropDownTreeFilter.StartsWith)

            regEx = new RegExp("^\\s*" + $T.RadDropDownTree.Manager._regExEscape(text), "im");

        else

            regEx = new RegExp($T.RadDropDownTree.Manager._regExEscape(text), "gim");

        for (i = 0; i < count; i++) {

            var currentNode = nodes[i];

            var matchIsFound;

            if (currentNode.get_level() !== 2) {

                matchIsFound = false;

            } else {

                matchIsFound = this._matchNode(currentNode, text, regEx);

            }

            if (matchIsFound) {

                this._handleVisibleParents(currentNode);

                this._filteredVisibleNodes.push(currentNode);

            }

            else {

                this._handleHiddenNode(currentNode);

            }

        }

        this._hideNodes(this._filteredHiddenNodes);

        this._showNodes(this._filteredVisibleNodes);

        this._filteredVisibleNodes = [];

        this._filteredHiddenNodes = [];

    }

</script>

 

 

[Clark]

I wanted to clarify that this behavior I want to modify is default behavior.  It's not related to the script I posted.

Default Behavior:  When I backspace everything I typed in the filter field, the dropdown tree expands every node.

I want it to collapse every node in the tree.

 

[Doncho]

Hi Clark,

The required behavior is different than the default one of the RadDropDownTree.

Therefore I can also suggest you a workaround with overriding the default behavior with some custom JavaScript on the page:

<script>
    if (Telerik.Web.UI.RadDropDownTree && Telerik.Web.UI.RadDropDownTree.Manager) {
        var $T = Telerik.Web.UI;
        Telerik.Web.UI.RadDropDownTree.Manager.prototype._handleFiltering = function (text) {
            var that = this;

            if (this._filterTimer) {
                clearTimeout(this._filterTimer);
            }

            this._filterTimer = setTimeout(function () {
                that._clearEmTags();

                if (that._shouldFilter(text)) {
                    that._filterNodes(text);
                } else {
                    //original code - showing all nodes when filter input gets empty
                    //that._showNodes(that._embeddedTree.get_allNodes());

                    //customization to show parent nodes when filter gets empty
                    that._hideNodes(that._embeddedTree.get_allNodes())
                    that._showNodes(that._embeddedTree.get_nodes()._array);
                }
            }, 80);
        }
    }
</script>

Please give it a try and let me know how it goes.

Kind regards,
Doncho
Progress Telerik

[Clark]

Hi Doncho,

Your script worked beautifully.

Thank you so much!

--Clark

[Clark]

Hi Doncho,

I noticed that when the nodes are collapsed after clearing the filter field I can no longer navigate the nodes manually.

Now what happens is when I click on a level 0 node nothing displays.

Do you have a fix for that?

Thanks!

--Clark

 

[Peter Milchev]

Hi Clark, The code Doncho shared will hide the nodes, which is why you do not see them. What you can do instead is show all nodes, but then iterate the root nodes and collapse them:

//customization to show all nodes when filter gets empty
that._showNodes(that._embeddedTree.get_allNodes());
// collapse root nodes only
that._embeddedTree.get_nodes().forEach(function (node) {
    node.collapse();
})

[Clark]

Hi Peter,

I ran in to some problems.

1.  When I backspace to the beginning and when I get under 3 characters the tree expands/collapses briefly for every backspace until I've reached the beginning of the filter field, then it rests and it is collapsed

2.  When I then manually expand a parent node it expands the entire path.  I want it to just expand to the next level like normal.

3.  For the first couple times I do a search it does this (see screenshot below).  It just displays the top level nodes.  Then,  when I type more then backspace it starts working correctly

 

Thanks!

--Clark

Code:

 //This script is to collapse all nodes when the filter field is emptied
    if (Telerik.Web.UI.RadDropDownTree && Telerik.Web.UI.RadDropDownTree.Manager) {
        var $T = Telerik.Web.UI;
        Telerik.Web.UI.RadDropDownTree.Manager.prototype._handleFiltering = function (text) {
            var that = this;

            if (this._filterTimer) {
                clearTimeout(this._filterTimer);
            }

            this._filterTimer = setTimeout(function ()
            {
                that._clearEmTags();

                if (that._shouldFilter(text))
                {
                    that._filterNodes(text);
                } else
                {
                    //original code - showing all nodes when filter input gets empty
                    //that._showNodes(that._embeddedTree.get_allNodes());

                    //customization to show parent nodes when filter gets empty
                    that._showNodes(that._embeddedTree.get_allNodes());
                    // collapse root nodes only
                    that._embeddedTree.get_nodes().forEach(function (node)
                    {                        
                            node.collapse();
                        
                    })
                }
            }, 80);
        }
    }

 

 

 

 

 

[Peter Milchev]

Hi Clark, The flickering might be related to the fact that the DropDownTree is designed to expand all nodes when filtering. This is to facilitate the visibility of child nodes when filtered.

Otherwise, if all nodes are collapsed when filtering, and the match is in Level 4, you would see the root node only and would need to click to expand a few nodes until you can see the real match. 

With that said, I would recommend keeping the designed behavior and only collapsing all nodes when the filter is cleared. Another option is to have a custom CollapseAll button, in a HeaderTemplate for example:

• https://docs.telerik.com/devtools/aspnet-ajax/controls/dropdowntree/templates/templates-overview#header-template 

Another thing you can do is increase the timeout value from 80ms to 200 or 300ms so there are not many redundant client operations if the user is typing fast.

[Clark]

Thanks Peter!  Let me try to implement this again and will share the results.