RadDropDownTree expands all nodes after backspacing the filter text

1 Answer 32 Views
DropDownTree Filter
Clark
Top achievements
Rank 1
Iron
Iron
Clark asked on 16 Dec 2021, 07:43 PM

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
Top achievements
Rank 1
Iron
Iron
commented on 17 Dec 2021, 07:58 PM

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.

 

1 Answer, 1 is accepted

Sort by
0
Accepted
Doncho
Telerik team
answered on 21 Dec 2021, 04:39 PM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Clark
Top achievements
Rank 1
Iron
Iron
commented on 21 Dec 2021, 09:46 PM

Hi Doncho,

Your script worked beautifully.

Thank you so much!

--Clark

Clark
Top achievements
Rank 1
Iron
Iron
commented on 03 Jan 2022, 06:15 PM

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
Telerik team
commented on 06 Jan 2022, 09:51 AM

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
Top achievements
Rank 1
Iron
Iron
commented on 06 Jan 2022, 06:47 PM | edited

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
Telerik team
commented on 11 Jan 2022, 03:12 PM

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:

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
Top achievements
Rank 1
Iron
Iron
commented on 19 Jan 2022, 06:13 PM

Thanks Peter!  Let me try to implement this again and will share the results.
Tags
DropDownTree Filter
Asked by
Clark
Top achievements
Rank 1
Iron
Iron
Answers by
Doncho
Telerik team
Share this question
or