Mar 21, 2012, 12:07 PM
can't filter grid, "TreeGrid1" is not defined - error in browser
Goog day, I am a beginner with ext.net. I have a treeGrid and I want to filter it that seems to be very easy according to samples. But I am getting a ""TreeGrid1" is not defined" error message when the filter procedure is run. here is the code
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
CodeBehind="WebForm1.aspx.cs" Inherits="ucc_accounting.Pages.WebForm1" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<div>
<ext:Menu ID="TreeContextMenu" runat="server" EnableScrolling="false">
<Items>
<ext:MenuItem ID="MenuItem1" runat="server" Text="Edit" Icon="Pencil">
<Listeners>
<Click Handler="#{TreeGrid1}.startEdit(#{TreeGrid1}.menuNode, 10);" />
</Listeners>
</ext:MenuItem>
<ext:MenuItem ID="MenuItem2" runat="server" Text="Remove" Icon="Delete">
<Listeners>
<Click Handler="#{TreeGrid1}.removeNode(#{TreeGrid1}.menuNode);" />
</Listeners>
</ext:MenuItem>
</Items>
</ext:Menu>
<ext:TreeGrid ID="TreeGrid1" runat="server" UseArrows="true" AutoScroll="true" Animate="true"
EnableDD="true" ContainerScroll="true" Mode="Remote" ContextMenuID="TreeContextMenu">
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:ToolbarTextItem ID="ToolbarTextItem1" runat="server" Text="Filter:" />
<ext:ToolbarSpacer />
<ext:TriggerField ID="TriggerField1" runat="server" EnableKeyEvents="true">
<Triggers>
<ext:FieldTrigger Icon="Clear" />
</Triggers>
<Listeners>
<KeyUp Fn="filterTree" Buffer="250" />
<TriggerClick Handler="clearFilter();" />
</Listeners>
</ext:TriggerField>
</Items>
</ext:Toolbar>
</TopBar>
<Columns>
<ext:TreeGridColumn Header="Test" DataIndex="text" Width="600" />
<ext:TreeGridColumn Header="Code" DataIndex="Code" Width="200" />
</Columns>
<Root>
<ext:AsyncTreeNode NodeID="0" Text="Root" />
</Root>
<Listeners>
<BeforeLoad Fn="nodeLoad" />
</Listeners>
</ext:TreeGrid>
</div>
<script type="text/javascript">
var nodeLoad = function (node) {
Ext.net.DirectMethods.NodeLoad(node.id, {
success: function (result) {
var data = eval("(" + result + ")");
node.loadNodes(data);
},
failure: function (errorMsg) {
Ext.Msg.alert('Failure', errorMsg);
}
});
}
var filterTree = function (el, e) {
var tree = TreeGrid1,
text = this.getRawValue(); here is where I get error
tree.clearFilter();
if (Ext.isEmpty(text, false)) {
return;
}
if (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 = TreeGrid1;
field.setValue("");
tree.clearFilter();
tree.getRootNode().collapseChildNodes(true);
tree.getRootNode().ensureVisible();
};
</script>
</asp:Content>
Last edited by Andy777; Mar 21, 2012 at 12:09 PM.