TreePanel filtereing Bug

  1. #1

    TreePanel filtereing Bug

    I have a nested treepanel nodes that continues to display empty parent nodes.
    Clicking on the expansion icon on any of the empty parent nodes properly hide the empty parents:

    
    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    
        <script type="text/javascript">
    
            var searchFilter = function ()
            {
                debugger;
                var tree = App.TreePanel1;
                var field = App.searchField;
                var text = field.getValue();
                    
                if (Ext.isEmpty(text, false)) {
                    field.clear();
                    return;
                }
                var re = '';
    
                if (text.match(/^-{0,1}\d+$/)) {
                    re = new RegExp(text);
                }
                else {
                    re = new RegExp(".*" + text + ".*", "i");
                    var re_split = text.split(/\b(\s)/)
                    if (re_split.length > 1) {
                        re = new RegExp(".*" + re_split[0] + ".*" + ".*" + re_split[2] + ".*", "i");
                    }
                }
                tree.clearFilter();
                tree.filterBy(function (node) {
                    if (text.match(/^-{0,1}\d+$/)) {
                        if (node.data.badgeNumber == text) { return true; }
                        else
                            if (node.data.clockNumber == text) { return true; }
                            else return false;
                    }
                    else return re.test(node.data.text);
                });
                tree.filterBy(function () { return true; });
    
                //tree.collapseAll();
                //tree.expandAll();
            }
    
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:TreePanel
                ID="TreePanel1"
                runat="server"
                Width="300"
                Height="450"
                Icon="BookOpen" 
                RootVisible="false"
                CollapseFirst="false"
                Title="Catalog"
                AutoScroll="true">
                <Listeners>
                    <ItemKeyPress Handler="alert(e.getKeyName());" />
                </Listeners>
                <TopBar>
                    <ext:Toolbar runat="server">
                        <Items>
                            <ext:Button ID="Button1" runat="server" Text="Expand All">
                                <Listeners>
                                    <Click Handler="#{TreePanel1}.expandAll();" />
                                </Listeners>
                            </ext:Button>
                            <ext:Button ID="Button2" runat="server" Text="Collapse All">
                                <Listeners>
                                    <Click Handler="#{TreePanel1}.collapseAll();" />
                                </Listeners>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <Root>
                    <ext:Node Text="Composers" Expanded="true">
                        <Children>
                            <ext:Node Text="Beethoven" Icon="UserGray">
                                <Children>
                                    <ext:Node Text="Concertos">
                                        <Children>
                                            <ext:Node Text="No. 1 - C" Icon="Music" Leaf="true" />
                                            <ext:Node Text="No. 2 - B-Flat Major" Icon="Music" Leaf="true" />
                                            <ext:Node Text="No. 3 - C Minor" Icon="Music" Leaf="true" />
                                            <ext:Node Text="No. 4 - G Major" Icon="Music" Leaf="true" />
                                            <ext:Node Text="No. 5 - E-Flat Major" Icon="Music" Leaf="true" />
                                        </Children>
                                    </ext:Node>
                                    <ext:Node Text="Quartets">
                                        <Children>
                                            <ext:Node Text="Six String Quartets" Icon="Music" Leaf="true" />
                                            <ext:Node Text="Three String Quartets" Icon="Music" Leaf="true" />
                                            <ext:Node Text="Grosse Fugue for String Quartets" Icon="Music" Leaf="true" />
                                        </Children>
                                    </ext:Node>
                                    <ext:Node Text="Sonatas">
                                        <Children>
                                            <ext:Node Text="Sonata in A Minor" Icon="Music" Leaf="true" />
                                            <ext:Node Text="sonata in F Major" Icon="Music" Leaf="true" />
                                        </Children>
                                    </ext:Node>
                                    <ext:Node Text="Symphonies">
                                        <Children>
                                            <ext:Node Text="No. 1 - C Major" Icon="Music" Leaf="true" />
                                            <ext:Node Text="No. 2 - D Major" Icon="Music" Leaf="true" />
                                            <ext:Node Text="No. 3 - E-Flat Major" Icon="Music" Leaf="true" />
                                            <ext:Node Text="No. 4 - B-Flat Major" Icon="Music" Leaf="true" />
                                            <ext:Node Text="No. 5 - C Minor" Icon="Music" Leaf="true" />
                                            <ext:Node Text="No. 6 - F Major" Icon="Music" Leaf="true" />
                                            <ext:Node Text="No. 7 - A Major" Icon="Music" Leaf="true" />
                                            <ext:Node Text="No. 8 - F Major" Icon="Music" Leaf="true" />
                                            <ext:Node Text="No. 9 - D Minor" Icon="Music" Leaf="true" />
                                        </Children>
                                    </ext:Node>
                                </Children>
                            </ext:Node>
                            <ext:Node Text="Brahms" Icon="UserGray">
                                <Children>
                                    <ext:Node Text="Concertos">
                                        <Children>
                                            <ext:Node Text="Violin Concerto" Icon="Music" Leaf="true" />
                                            <ext:Node Text="Double Concerto - A Minor" Icon="Music" Leaf="true" />
                                            <ext:Node Text="Piano Concerto No. 1 - D Minor" Icon="Music" Leaf="true" />
                                            <ext:Node Text="Piano Concerto No. 2 - B-Flat Major" Icon="Music" Leaf="true" />
                                        </Children>
                                    </ext:Node>
                                    <ext:Node Text="Quartets">
                                        <Children>
                                            <ext:Node Text="Piano Quartet No. 1 - G Minor" Icon="Music" Leaf="true" />
                                            <ext:Node Text="Piano Quartet No. 2 - A Major" Icon="Music" Leaf="true" />
                                            <ext:Node Text="Piano Quartet No. 3 - C Minor" Icon="Music" Leaf="true" />
                                            <ext:Node Text="Piano Quartet No. 3 - B-Flat Minor" Icon="Music" Leaf="true" />
                                        </Children>
                                    </ext:Node>
                                    <ext:Node Text="Sonatas">
                                        <Children>
                                            <ext:Node Text="Two Sonatas for Clarinet - F Minor" Icon="Music" Leaf="true" />
                                            <ext:Node Text="Two Sonatas for Clarinet - E-Flat Major" Icon="Music" Leaf="true" />
                                        </Children>
                                    </ext:Node>
                                    <ext:Node Text="Symphonies">
                                        <Children>
                                            <ext:Node Text="No. 1 - C Minor" Icon="Music" Leaf="true" />
                                            <ext:Node Text="No. 2 - D Minor" Icon="Music" Leaf="true" />
                                            <ext:Node Text="No. 3 - F Major" Icon="Music" Leaf="true" />
                                            <ext:Node Text="No. 4 - E Minor" Icon="Music" Leaf="true" />
                                        </Children>
                                    </ext:Node>
                                </Children>
                            </ext:Node>
                            <ext:Node Text="Mozart" Icon="UserGray">
                                <Children>
                                    <ext:Node Text="Concertos">
                                        <Children>
                                            <ext:Node Text="Piano Concerto No. 12" Icon="Music" Leaf="true" />
                                            <ext:Node Text="Piano Concerto No. 17" Icon="Music" Leaf="true" />
                                            <ext:Node Text="Clarinet Concerto" Icon="Music" Leaf="true" />
                                            <ext:Node Text="Violin Concerto No. 5" Icon="Music" Leaf="true" />
                                            <ext:Node Text="Violin Concerto No. 4" Icon="Music" Leaf="true" />
                                        </Children>
                                    </ext:Node>
                                </Children>
                            </ext:Node>
                        </Children>
                    </ext:Node>
                </Root>
                <BottomBar>
                    <ext:Toolbar runat="server">
                        <Items>
                            <ext:TextField ID="searchField" runat="server" Width="150" />
                            <ext:Button runat="server" Text="Search" Handler="searchFilter()" />
                        </Items>
                    </ext:Toolbar>
                </BottomBar>
            </ext:TreePanel>
        </form>
    </body>
    </html>
    The only way to mitigate the issue is by injecting a "collapse/expand" call after the filtering (as seen commented out at the end of the filtering function.

    Thank you.
  2. #2
    Hello @ojuniour!

    I have good news for you, that is, if you are not using the latest, 4.8.1, version of Ext.NET.

    If the above is the case, then just upgrading Ext.NET to the latest version should do at least as far as the example you provided is concerned.

    If not; if you still reproduce this issue in version 4.8.1 (latest at the time of the writing of this post), please fill us up with more info on reproducing it, like browser and version you're using or maybe some other steps to take in the example you provided.

    In other words, I couldn't reproduce the issue. Per your report, calling the commented couple lines in the example you provided (lines 46 and 47) would address whatever's wrong in the grid after applying the filter. In fact, I created another button to run just that couple lines after I click "search" with some terms filled in.

    Tried to filter against Concert and also six. Both resulted in a reviewed setup of the grid in which, after I called the collapse/expand command button, the exact same result was shown. When empty non-leaf nodes where shown, they matched the search criteria (Concert).

    So, are we missing something here? If you're wary of upgrading your project all at once to 4.8.1, you may just draw a clean project -- or clone/open the Examples Explorer project off github, and see for yourself in lates.

    Hope this helps, and looking forward to your follow-up!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] Bug on the TreePanel...
    By RCN in forum 2.x Premium Help
    Replies: 3
    Last Post: Dec 09, 2013, 11:09 AM
  2. [CLOSED] Bug in TreePanel
    By gets_gui in forum 2.x Premium Help
    Replies: 1
    Last Post: Apr 05, 2012, 3:04 PM
  3. is this a bug? about treepanel
    By cooska in forum 1.x Help
    Replies: 2
    Last Post: Jul 07, 2011, 8:24 AM
  4. Bug in accordion or treepanel
    By plykkegaard in forum 1.x Help
    Replies: 0
    Last Post: Feb 22, 2009, 5:24 AM
  5. TreePanel Scrollbar bug
    By chad in forum 1.x Help
    Replies: 1
    Last Post: Dec 24, 2008, 1:28 PM

Posting Permissions