Printable View
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.
Hi,
I would change the JavaScript a bit and filter initially within a TreePanel AfterRender listener.
Example
Code:<%@ 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>
I used TreeGrid and not TreePanel, it seems that the AfterRender does not get called at all. Please advise.
Quote:
Originally Posted by Daniil
The AfterRender event is fired in the test case below. Please provide your test case.
Example
Code:<%@ 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>
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
Please clarify how do you rebuild the TreeGrid?
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
Ok, good! Good luck in further development!
Please ask if you will be in trouble, we are always glad to help!