can't filter grid, "TreeGrid1" is not defined - error in browser

  1. #1

    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.
  2. #2
    Hi,

    You should use
    #{TreeGrid1}
    with the <script>.

    To use #{} syntax within the <script> you should wrap that <script> in an <ext:XScript> control.
  3. #3

    works

    Thank you Daniil, that works, but how could I figure that out without your help?
    I didn't find anything similar in samles
  4. #4
    The main thing that you should understand is the fact that you access any component (in your case - TreeGrid) on client side by its client id, not the server ID.

    In your case with a Master Page, by default, a client id doesn't equal a server ID, because a Master Page implements the INamingContainer interface.

    So, the TreeGrid1 is just undefined.

    #{} is for getting a component client id from its server ID. And, actually, you used it within your example (!). For example, here:
    <Click Handler="#{TreeGrid1}.removeNode(#{TreeGrid1}.menuNode);" />
    Just you should use it everywhere where "TreeGrid1" appears.

    This is the source of the problem.

    Regarding to our examples.

    Many of them use #{} and an <ext:XScript> appears as well.

Similar Threads

  1. Replies: 5
    Last Post: Jun 19, 2012, 9:06 PM
  2. [CLOSED] "True is not defined" javascript error
    By coleg123 in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Aug 11, 2011, 6:51 PM
  3. Replies: 11
    Last Post: Mar 30, 2011, 2:21 PM
  4. Replies: 0
    Last Post: Mar 29, 2011, 5:32 PM
  5. Replies: 1
    Last Post: Dec 06, 2010, 4:29 PM

Tags for this Thread

Posting Permissions