[CLOSED] How can I apply filters on TriggerField

  1. #1

    [CLOSED] How can I apply filters on TriggerField

    Hi,

    I am trying to follow the example below. But, I can't do apply filter on the TriggerField. I have tried firing up the keyup event. But, it won't trigger the filterby functionality. Basically, I would like to programmatically do the filter including applying a filter initially. What can I do? Please advice.

    https://examples1.ext.net/#/TreePanel/Advanced/Filter/

    Thanks.
    Last edited by Daniil; Sep 06, 2012 at 3:51 PM. Reason: [CLOSED]
  2. #2
    Hi,

    I would change the JavaScript a bit and filter initially within a TreePanel AfterRender listener.

    Example
    <%@ Page Language="C#" %>
    <%@ Import Namespace="TreeNode=Ext.Net.TreeNode" %>
    
    <%@ Import Namespace="System.Collections.Generic" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            SiteMapNode siteNode = SiteMap.RootNode;
            TreeNode root = this.CreateNode(siteNode);
            root.Draggable = false;
            root.Expanded = true;
            TreePanel1.Root.Add(root);
        }
    
        //static node creation with children
        private Ext.Net.TreeNode CreateNode(SiteMapNode siteMapNode)
        {
            TreeNode treeNode = new TreeNode();
            
            treeNode.NodeID = siteMapNode.Key;
            treeNode.Text = siteMapNode.Title;
            treeNode.Qtip = siteMapNode.Description;
    
            SiteMapNodeCollection children = siteMapNode.ChildNodes;
    
            if (children != null && children.Count > 0)
            {
                foreach (SiteMapNode mapNode in siteMapNode.ChildNodes)
                {
                    treeNode.Nodes.Add(this.CreateNode(mapNode));
                }
            }
            
            return treeNode;
        }
    </script>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Tree Filter - Ext.NET Examples</title>
        
        <script type="text/javascript">
            var filterTree = function (triggerField, e) {
                var tree = TreePanel1,
                    text = triggerField.getRawValue();
                
                tree.clearFilter();
                
                if (Ext.isEmpty(text, false)){
                    return;
                }
                
                if (e && e.getKey() === Ext.EventObject.ESC) {
                    clearFilter();
                } else {
                    var re = new RegExp(".*" + text + ".*", "i");
                    
                    tree.filterBy(function (node) {
                        return re.test(node.text);
                    });
                }
            };
            
            var clearFilter = function () {
                var field = TriggerField1,
                    tree = TreePanel1;
                
                field.setValue(""); 
                tree.clearFilter(); 
                tree.getRootNode().collapseChildNodes(true);
                tree.getRootNode().ensureVisible();
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            
            <h1>Tree Filter</h1>
            
            <ext:TreePanel 
                ID="TreePanel1"
                runat="server" 
                Height="300" 
                Width="250"
                UseArrows="true"
                AutoScroll="true"
                Animate="true"
                EnableDD="true"
                ContainerScroll="true">           
                <TopBar>
                    <ext:Toolbar runat="server">
                        <Items>
                            <ext:ToolbarTextItem runat="server" Text="Filter:" />
                            <ext:ToolbarSpacer />
                            <ext:TriggerField 
                                ID="TriggerField1" 
                                runat="server" 
                                EnableKeyEvents="true" 
                                Text="GridPanel">
                                <Triggers>
                                    <ext:FieldTrigger Icon="Clear" />
                                </Triggers>
                                
                                <Listeners>
                                    <KeyUp Fn="filterTree" Buffer="250" />
                                    <TriggerClick Handler="clearFilter();" />
                                </Listeners>
                            </ext:TriggerField>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <Listeners>
                    <AfterRender Handler="filterTree(TriggerField1);" />
                </Listeners>
            </ext:TreePanel>
        </form>
    </body>
    </html>
  3. #3
    I used TreeGrid and not TreePanel, it seems that the AfterRender does not get called at all. Please advise.

    Quote Originally Posted by Daniil View Post
    Hi,

    I would change the JavaScript a bit and filter initially within a TreePanel AfterRender listener.

    Example
    <%@ Page Language="C#" %>
    <%@ Import Namespace="TreeNode=Ext.Net.TreeNode" %>
    
    <%@ Import Namespace="System.Collections.Generic" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            SiteMapNode siteNode = SiteMap.RootNode;
            TreeNode root = this.CreateNode(siteNode);
            root.Draggable = false;
            root.Expanded = true;
            TreePanel1.Root.Add(root);
        }
    
        //static node creation with children
        private Ext.Net.TreeNode CreateNode(SiteMapNode siteMapNode)
        {
            TreeNode treeNode = new TreeNode();
            
            treeNode.NodeID = siteMapNode.Key;
            treeNode.Text = siteMapNode.Title;
            treeNode.Qtip = siteMapNode.Description;
    
            SiteMapNodeCollection children = siteMapNode.ChildNodes;
    
            if (children != null && children.Count > 0)
            {
                foreach (SiteMapNode mapNode in siteMapNode.ChildNodes)
                {
                    treeNode.Nodes.Add(this.CreateNode(mapNode));
                }
            }
            
            return treeNode;
        }
    </script>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Tree Filter - Ext.NET Examples</title>
        
        <script type="text/javascript">
            var filterTree = function (triggerField, e) {
                var tree = TreePanel1,
                    text = triggerField.getRawValue();
                
                tree.clearFilter();
                
                if (Ext.isEmpty(text, false)){
                    return;
                }
                
                if (e && e.getKey() === Ext.EventObject.ESC) {
                    clearFilter();
                } else {
                    var re = new RegExp(".*" + text + ".*", "i");
                    
                    tree.filterBy(function (node) {
                        return re.test(node.text);
                    });
                }
            };
            
            var clearFilter = function () {
                var field = TriggerField1,
                    tree = TreePanel1;
                
                field.setValue(""); 
                tree.clearFilter(); 
                tree.getRootNode().collapseChildNodes(true);
                tree.getRootNode().ensureVisible();
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            
            <h1>Tree Filter</h1>
            
            <ext:TreePanel 
                ID="TreePanel1"
                runat="server" 
                Height="300" 
                Width="250"
                UseArrows="true"
                AutoScroll="true"
                Animate="true"
                EnableDD="true"
                ContainerScroll="true">           
                <TopBar>
                    <ext:Toolbar runat="server">
                        <Items>
                            <ext:ToolbarTextItem runat="server" Text="Filter:" />
                            <ext:ToolbarSpacer />
                            <ext:TriggerField 
                                ID="TriggerField1" 
                                runat="server" 
                                EnableKeyEvents="true" 
                                Text="GridPanel">
                                <Triggers>
                                    <ext:FieldTrigger Icon="Clear" />
                                </Triggers>
                                
                                <Listeners>
                                    <KeyUp Fn="filterTree" Buffer="250" />
                                    <TriggerClick Handler="clearFilter();" />
                                </Listeners>
                            </ext:TriggerField>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <Listeners>
                    <AfterRender Handler="filterTree(TriggerField1);" />
                </Listeners>
            </ext:TreePanel>
        </form>
    </body>
    </html>
  4. #4
    The AfterRender event is fired in the test case below. Please provide your test case.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.NET Example</title>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:TreeGrid runat="server" AutoHeight="true">
            <Columns>
                <ext:TreeGridColumn Header="Text" DataIndex="text" Width="100" />
                <ext:TreeGridColumn Header="Test1" DataIndex="test1" Width="100" />
                <ext:TreeGridColumn Header="Test2" DataIndex="test2" Width="100" />
            </Columns>
            <Root>
                <ext:TreeNode>
                    <Nodes>
                        <ext:TreeNode Text="Node1" Expanded="true">
                            <CustomAttributes>
                                <ext:ConfigItem Name="test1" Value="node1_test1" Mode="Value" />
                                <ext:ConfigItem Name="test2" Value="node1_test2" Mode="Value" />
                            </CustomAttributes>
                            <Nodes>
                                <ext:TreeNode Text="Node1.1">
                                    <CustomAttributes>
                                        <ext:ConfigItem Name="test1" Value="node1.1_test1" Mode="Value" />
                                        <ext:ConfigItem Name="test2" Value="node1.1_test2" Mode="Value" />
                                    </CustomAttributes>
                                </ext:TreeNode>
                            </Nodes>
                        </ext:TreeNode>
                    </Nodes>
                </ext:TreeNode>
            </Root>
            <Listeners>
                <AfterRender Handler="alert('AfterRender');" />
            </Listeners>
        </ext:TreeGrid>
    </body>
    </html>
  5. #5
    It seems that the AfterRender only called once the first time. However, when I rebuild the tree it won't get called at all afterwards.

    Quote Originally Posted by Daniil View Post
    Hi,

    I would change the JavaScript a bit and filter initially within a TreePanel AfterRender listener.

    Example
    <%@ Page Language="C#" %>
    <%@ Import Namespace="TreeNode=Ext.Net.TreeNode" %>
    
    <%@ Import Namespace="System.Collections.Generic" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            SiteMapNode siteNode = SiteMap.RootNode;
            TreeNode root = this.CreateNode(siteNode);
            root.Draggable = false;
            root.Expanded = true;
            TreePanel1.Root.Add(root);
        }
    
        //static node creation with children
        private Ext.Net.TreeNode CreateNode(SiteMapNode siteMapNode)
        {
            TreeNode treeNode = new TreeNode();
            
            treeNode.NodeID = siteMapNode.Key;
            treeNode.Text = siteMapNode.Title;
            treeNode.Qtip = siteMapNode.Description;
    
            SiteMapNodeCollection children = siteMapNode.ChildNodes;
    
            if (children != null && children.Count > 0)
            {
                foreach (SiteMapNode mapNode in siteMapNode.ChildNodes)
                {
                    treeNode.Nodes.Add(this.CreateNode(mapNode));
                }
            }
            
            return treeNode;
        }
    </script>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Tree Filter - Ext.NET Examples</title>
        
        <script type="text/javascript">
            var filterTree = function (triggerField, e) {
                var tree = TreePanel1,
                    text = triggerField.getRawValue();
                
                tree.clearFilter();
                
                if (Ext.isEmpty(text, false)){
                    return;
                }
                
                if (e && e.getKey() === Ext.EventObject.ESC) {
                    clearFilter();
                } else {
                    var re = new RegExp(".*" + text + ".*", "i");
                    
                    tree.filterBy(function (node) {
                        return re.test(node.text);
                    });
                }
            };
            
            var clearFilter = function () {
                var field = TriggerField1,
                    tree = TreePanel1;
                
                field.setValue(""); 
                tree.clearFilter(); 
                tree.getRootNode().collapseChildNodes(true);
                tree.getRootNode().ensureVisible();
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            
            <h1>Tree Filter</h1>
            
            <ext:TreePanel 
                ID="TreePanel1"
                runat="server" 
                Height="300" 
                Width="250"
                UseArrows="true"
                AutoScroll="true"
                Animate="true"
                EnableDD="true"
                ContainerScroll="true">           
                <TopBar>
                    <ext:Toolbar runat="server">
                        <Items>
                            <ext:ToolbarTextItem runat="server" Text="Filter:" />
                            <ext:ToolbarSpacer />
                            <ext:TriggerField 
                                ID="TriggerField1" 
                                runat="server" 
                                EnableKeyEvents="true" 
                                Text="GridPanel">
                                <Triggers>
                                    <ext:FieldTrigger Icon="Clear" />
                                </Triggers>
                                
                                <Listeners>
                                    <KeyUp Fn="filterTree" Buffer="250" />
                                    <TriggerClick Handler="clearFilter();" />
                                </Listeners>
                            </ext:TriggerField>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <Listeners>
                    <AfterRender Handler="filterTree(TriggerField1);" />
                </Listeners>
            </ext:TreePanel>
        </form>
    </body>
    </html>
  6. #6
    Please clarify how do you rebuild the TreeGrid?
  7. #7
    I got it working now. Basically, the JavaScript calls are asynchornous, I just have to put in the call to filterTree upon the success of building the tree sequentially. Thanks for replying.

    Quote Originally Posted by Daniil View Post
    Please clarify how do you rebuild the TreeGrid?
  8. #8
    Ok, good! Good luck in further development!

    Please ask if you will be in trouble, we are always glad to help!

Similar Threads

  1. Replies: 3
    Last Post: Jan 12, 2012, 3:26 PM
  2. [CLOSED] [1.0] EditableGrid Apply to selection apply to all
    By ashton.lamont in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Feb 24, 2010, 5:49 PM
  3. Dynamic Filters not showing...
    By rthiney in forum 1.x Help
    Replies: 1
    Last Post: Nov 18, 2009, 6:31 PM
  4. Filters for DataView?
    By shaun in forum 1.x Help
    Replies: 10
    Last Post: Jul 24, 2009, 5:05 PM
  5. Grid filters in code-behind
    By petlun in forum 1.x Help
    Replies: 4
    Last Post: Jan 01, 2009, 2:40 PM

Tags for this Thread

Posting Permissions