[CLOSED] How can I apply filters on TriggerField

**gets_gui** · Sep 05, 2012, 8:27 PM

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.

**Daniil** · Sep 06, 2012, 5:20 AM

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>

**gets_gui** · Sep 06, 2012, 1:28 PM

I used TreeGrid and not TreePanel, it seems that the AfterRender does not get called at all. Please advise.

Originally Posted by Daniil

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>

**Daniil** · Sep 06, 2012, 1:37 PM

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>

**gets_gui** · Sep 06, 2012, 1:45 PM

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.

Originally Posted by Daniil

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>

**Daniil** · Sep 06, 2012, 1:51 PM

Please clarify how do you rebuild the TreeGrid?

Thread: [CLOSED] How can I apply filters on TriggerField

Thread Tools

Search Thread

Display

Hybrid View

[CLOSED] How can I apply filters on TriggerField

Similar Threads

[CLOSED] Ext.Net GridPanel Filters (The filters are not maintained if they are created by code)

[CLOSED] [1.0] EditableGrid Apply to selection apply to all

Dynamic Filters not showing...

Filters for DataView?

Grid filters in code-behind

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] How can I apply filters on TriggerField

Hybrid View

[CLOSED] How can I apply filters on TriggerField

Similar Threads

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us