[CLOSED] How can I apply filters on TriggerField

Hybrid View

Previous Post Previous Post   Next Post Next Post
  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 4: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?

Similar Threads

  1. Replies: 3
    Last Post: Jan 12, 2012, 4: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, 6:49 PM
  3. Dynamic Filters not showing...
    By rthiney in forum 1.x Help
    Replies: 1
    Last Post: Nov 18, 2009, 7:31 PM
  4. Filters for DataView?
    By shaun in forum 1.x Help
    Replies: 10
    Last Post: Jul 24, 2009, 6:05 PM
  5. Grid filters in code-behind
    By petlun in forum 1.x Help
    Replies: 4
    Last Post: Jan 01, 2009, 3:40 PM

Tags for this Thread

Posting Permissions