[OPEN] [#828] JavaScript error unhiding TreeGrid headers

  1. #1

    [OPEN] [#828] JavaScript error unhiding TreeGrid headers

    Hi,

    I'm trying to write a block of code that would hide the TreeGrid headers displaying an "empty" message in the title if no nodes exists. Alternatively, the headers should be back and the title disappear if at least one node is present. I'm getting a JavaScript error. Please review the code snippet below to reproduce the error in IE11.

    <%@ Page Language="C#" AutoEventWireup="true" %>
    
    <!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">
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder2" runat="server" Mode="Style" />
        <title>TreeGrid - Ext.NET Examples</title>
    
        <script type="text/javascript">
            var addNode = function () {
                X.AddNode({
                    eventMask: { showMask: true },
                    success: function (result) {
                        var nodes = eval(result);
                        if (nodes.length > 0) {
                            TreeGrid1.initChildren(nodes);
                        }
                        else {
                            TreeGrid1.getRootNode().removeChildren();
                        }
                    }
                });
            };
    
            var deleteNode = function () {
                X.DeleteNode({
                    eventMask: { showMask: true },
                    success: function (result) {
                        var nodes = eval(result);
                        if (nodes.length > 0) {
                            TreeGrid1.initChildren(nodes);
                        }
                        else {
                            TreeGrid1.getRootNode().removeChildren();
                        }
                    }
                });
            };
        </script>
    
        <script runat="server">
            protected void Page_Load(object sender, EventArgs e)
            {
                if (ExtNet.IsAjaxRequest) return;
                TreeGrid1.HideHeaders = true;
                TreeGrid1.Title = "You have no records at this time.";
            }
    
            [DirectMethod]
            public string AddNode()
            {
                TreeGrid1.RemoveAll();
                TreeGrid1.Root.Add(new Ext.Net.TreeNode { NodeID = "Root", AllowDrag = false });
                var rootNode = TreeGrid1.Root.FirstOrDefault(r => r.NodeID.Equals("Root")) as Ext.Net.TreeNode;
                rootNode.Nodes.Add(new Ext.Net.TreeNode { NodeID = "Node1", Expanded = true, AllowDrag = false });
    
                var bookNode = rootNode.Nodes.FirstOrDefault(r => r.NodeID.Equals("Node1")) as Ext.Net.TreeNode;
                bookNode.CustomAttributes.Add(new ConfigItem { Name = "Record", Value = "First Node", Mode = ParameterMode.Value });
                bookNode.CustomAttributes.Add(new ConfigItem { Name = "CreatedOn", Value = "", Mode = ParameterMode.Value });
                bookNode.CustomAttributes.Add(new ConfigItem { Name = "UpdatedBy", Value = "", Mode = ParameterMode.Value });
    
                // This statement throws a client error
                TreeGrid1.HideHeaders = false;
                //TreeGrid1.Title = "";
    
                var nodes = TreeGrid1.Root;
                return nodes.ToJson();
            }
    
            [DirectMethod]
            public string DeleteNode()
            {
                TreeGrid1.RemoveAll();
                var nodes = TreeGrid1.Root;
                return nodes.ToJson();
            }
        
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" DirectMethodNamespace="X" />
            <ext:Viewport runat="server" Layout="FitLayout">
                <Items>
                    <ext:TreeGrid runat="server" ID="TreeGrid1" NoLeafIcon="true" EnableDD="true">
                        <Columns>
                            <ext:TreeGridColumn Header="Record" Width="300" DataIndex="Record" />
                            <ext:TreeGridColumn Header="Created On" Width="150" DataIndex="CreatedOn" />
                            <ext:TreeGridColumn Header="Updated By" Width="150" DataIndex="UpdatedBy" />
                        </Columns>
                        <BottomBar>
                            <ext:PagingToolbar runat="server">
                                <Items>
                                    <ext:Button runat="server" Text="Add" Icon="Add" Width="80">
                                        <Listeners>
                                            <Click Fn="addNode" />
                                        </Listeners>
                                    </ext:Button>
                                    <ext:Button runat="server" Text="Delete" Icon="Delete" Width="80">
                                        <Listeners>
                                            <Click Fn="deleteNode" />
                                        </Listeners>
                                    </ext:Button>
                                </Items>
                            </ext:PagingToolbar>
                        </BottomBar>
                    </ext:TreeGrid>
                </Items>
            </ext:Viewport>
        </form>
    </body>
    </html>
    Last edited by fabricio.murta; Jul 14, 2015 at 11:08 PM.
  2. #2
    Hello @vadym.f!

    You're right, things are broken around there...

    So what about just calling the script it tries, this time calling it correctly?

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="59715-unHideTreeGridHeads.aspx.cs" Inherits="ExtNetPlayground_v1._59715_unHideTreeGridHeads" %>
    <%@ Import Namespace="System.Linq" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder3" runat="server" Mode="Script" />
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder4" runat="server" Mode="Style" />
        <title>TreeGrid - Ext.NET Examples</title>
    
        <script type="text/javascript">
            var X = Ext.net.DirectMethods;
            var addNode = function () {
                X.AddNode({
                    eventMask: { showMask: true },
                    success: function (result) {
                        var nodes = eval(result);
                        if (nodes.length > 0) {
                            TreeGrid1.initChildren(nodes);
                        }
                        else {
                            TreeGrid1.getRootNode().removeChildren();
                        }
                    }
                });
            };
    
            var deleteNode = function () {
                X.DeleteNode({
                    eventMask: { showMask: true },
                    success: function (result) {
                        var nodes = eval(result);
                        if (nodes.length > 0) {
                            TreeGrid1.initChildren(nodes);
                        }
                        else {
                            TreeGrid1.getRootNode().removeChildren();
                        }
                    }
                });
            };
        </script>
    
        <script runat="server">
            private string EmptyTitle = "You have no records at this time.";
            
            protected void Page_Load(object sender, EventArgs e)
            {
                if (ExtNet.IsAjaxRequest) return;
                TreeGrid1.HideHeaders = true;
                TreeGrid1.Title = EmptyTitle;
            }
    
            [DirectMethod]
            public string AddNode()
            {
                TreeGrid1.RemoveAll();
                TreeGrid1.Root.Add(new Ext.Net.TreeNode { NodeID = "Root", AllowDrag = false });
                var rootNode = TreeGrid1.Root.FirstOrDefault(r => r.NodeID.Equals("Root")) as Ext.Net.TreeNode;
                rootNode.Nodes.Add(new Ext.Net.TreeNode { NodeID = "Node1", Expanded = true, AllowDrag = false });
    
                var bookNode = rootNode.Nodes.FirstOrDefault(r => r.NodeID.Equals("Node1")) as Ext.Net.TreeNode;
                bookNode.CustomAttributes.Add(new ConfigItem { Name = "Record", Value = "First Node", Mode = ParameterMode.Value });
                bookNode.CustomAttributes.Add(new ConfigItem { Name = "CreatedOn", Value = "", Mode = ParameterMode.Value });
                bookNode.CustomAttributes.Add(new ConfigItem { Name = "UpdatedBy", Value = "", Mode = ParameterMode.Value });
    
                // This statement throws a client error
                //TreeGrid1.HideHeaders = false;
                X.AddScript("TreeGrid1.el.child('.x-grid3-header').dom.style.display = 'block';");
                
                //TreeGrid1.Title = "";
                TreeGrid1.SetTitle("");
                
                var nodes = TreeGrid1.Root;
                return nodes.ToJson();
            }
    
            [DirectMethod]
            public string DeleteNode()
            {
                TreeGrid1.RemoveAll();
                
                //TreeGrid1.HideHeaders = true;
                X.AddScript("TreeGrid1.el.child('.x-grid3-header').dom.style.display = 'none';");
                
                TreeGrid1.SetTitle(EmptyTitle);
                
                var nodes = TreeGrid1.Root;
                return nodes.ToJson();
            }
        
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" IDMode="Explicit" ScriptMode="Debug" SourceFormatting="true" />
            <ext:Viewport runat="server" Layout="FitLayout">
                <Items>
                    <ext:TreeGrid runat="server" ID="TreeGrid1" NoLeafIcon="true" EnableDD="true">
                        <Columns>
                            <ext:TreeGridColumn Header="Record" Width="300" DataIndex="Record" />
                            <ext:TreeGridColumn Header="Created On" Width="150" DataIndex="CreatedOn" />
                            <ext:TreeGridColumn Header="Updated By" Width="150" DataIndex="UpdatedBy" />
                        </Columns>
                        <BottomBar>
                            <ext:PagingToolbar runat="server">
                                <Items>
                                    <ext:Button runat="server" Text="Add" Icon="Add" Width="80">
                                        <Listeners>
                                            <Click Fn="addNode" />
                                        </Listeners>
                                    </ext:Button>
                                    <ext:Button runat="server" Text="Delete" Icon="Delete" Width="80">
                                        <Listeners>
                                            <Click Fn="deleteNode" />
                                        </Listeners>
                                    </ext:Button>
                                </Items>
                            </ext:PagingToolbar>
                        </BottomBar>
                    </ext:TreeGrid>
                </Items>
            </ext:Viewport>
        </form>
    </body>
    </html>
    Hope this helps!

    We'll revisit this later and setup a bug on GitHub related to this issue.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Thanks for the workaround, Fabricio! There appears to be a layout issue with this implementation. The bottom paging bar jumps the height of the hidden grid header in IE11. I've tried calling doLayout() in success handlers with no luck.

    Edit in:

    I've added a call to register a script hiding an empty header. That has improved the layout issue slightly although the bottom bar still ends up misplaced.

    <%@ Page Language="C#" AutoEventWireup="true" %>
    
    <!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">
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder2" runat="server" Mode="Style" />
        <title>TreeGrid - Ext.NET Examples</title>
    
        <script type="text/javascript">
            var addNode = function () {
                X.AddNode({
                    eventMask: { showMask: true },
                    success: function (result) {
                        var nodes = eval(result);
                        if (nodes.length > 0) {
                            TreeGrid1.initChildren(nodes);
                        }
                        else {
                            TreeGrid1.getRootNode().removeChildren();
                        }
    
                        PagingToolbar1.doLayout();
                        TreeGrid1.doLayout();
                        Viewport1.doLayout();
                    }
                });
            };
    
            var deleteNode = function () {
                X.DeleteNode({
                    eventMask: { showMask: true },
                    success: function (result) {
                        var nodes = eval(result);
                        if (nodes.length > 0) {
                            TreeGrid1.initChildren(nodes);
                        }
                        else {
                            TreeGrid1.getRootNode().removeChildren();
                        }
                    }
                });
            };
        </script>
    
        <script runat="server">
            private string _emptyTitle = "You have no records at this time.";
            
            protected void Page_Load(object sender, EventArgs e)
            {
                if (ExtNet.IsAjaxRequest) return;
                TreeGrid1.HideHeaders = true;
                TreeGrid1.Title = _emptyTitle;
            }
    
            [DirectMethod]
            public string AddNode()
            {
                TreeGrid1.RemoveAll();
                TreeGrid1.Root.Add(new Ext.Net.TreeNode { NodeID = "Root", AllowDrag = false });
                var rootNode = TreeGrid1.Root.FirstOrDefault(r => r.NodeID.Equals("Root")) as Ext.Net.TreeNode;
                rootNode.Nodes.Add(new Ext.Net.TreeNode { NodeID = "Node1", Expanded = true, AllowDrag = false });
    
                var bookNode = rootNode.Nodes.FirstOrDefault(r => r.NodeID.Equals("Node1")) as Ext.Net.TreeNode;
                bookNode.CustomAttributes.Add(new ConfigItem { Name = "Record", Value = "First Node", Mode = ParameterMode.Value });
                bookNode.CustomAttributes.Add(new ConfigItem { Name = "CreatedOn", Value = "", Mode = ParameterMode.Value });
                bookNode.CustomAttributes.Add(new ConfigItem { Name = "UpdatedBy", Value = "", Mode = ParameterMode.Value });
    
                // Hide the empty header
                X.AddScript(String.Format("{0}.el.child('.x-panel-header').dom.style.display = 'none';", TreeGrid1.ID));
                X.AddScript(String.Format("{0}.el.child('.x-grid3-header').dom.style.display = 'block';", TreeGrid1.ID));
                TreeGrid1.SetTitle("");
    
                var nodes = TreeGrid1.Root;
                return nodes.ToJson();
            }
    
            [DirectMethod]
            public string DeleteNode()
            {
                TreeGrid1.RemoveAll();
                // Hide the empty header
                X.AddScript(String.Format("{0}.el.child('.x-panel-header').dom.style.display = 'block';", TreeGrid1.ID));
                X.AddScript(String.Format("{0}.el.child('.x-grid3-header').dom.style.display = 'none';", TreeGrid1.ID));
                TreeGrid1.SetTitle(_emptyTitle);
                var nodes = TreeGrid1.Root;
                return nodes.ToJson();
            }
        
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" DirectMethodNamespace="X" />
            <ext:Viewport runat="server" ID="Viewport1" Layout="FitLayout">
                <Items>
                    <ext:TreeGrid runat="server" ID="TreeGrid1" NoLeafIcon="true" EnableDD="true">
                        <Columns>
                            <ext:TreeGridColumn Header="Record" Width="300" DataIndex="Record" />
                            <ext:TreeGridColumn Header="Created On" Width="150" DataIndex="CreatedOn" />
                            <ext:TreeGridColumn Header="Updated By" Width="150" DataIndex="UpdatedBy" />
                        </Columns>
                        <BottomBar>
                            <ext:PagingToolbar ID="PagingToolbar1" runat="server">
                                <Items>
                                    <ext:Button runat="server" Text="Add" Icon="Add" Width="80">
                                        <Listeners>
                                            <Click Fn="addNode" />
                                        </Listeners>
                                    </ext:Button>
                                    <ext:Button runat="server" Text="Delete" Icon="Delete" Width="80">
                                        <Listeners>
                                            <Click Fn="deleteNode" />
                                        </Listeners>
                                    </ext:Button>
                                </Items>
                            </ext:PagingToolbar>
                        </BottomBar>
                    </ext:TreeGrid>
                </Items>
            </ext:Viewport>
        </form>
    </body>
    </html>
    Last edited by vadym.f; Jul 06, 2015 at 6:04 PM.
  4. #4
    I believe the glitch you're talking about is because the title bar is rendered empty.

    You can just change line 73 in my example to TreeGrid1.SetTitle("&nbsp;"); to have it not break the bar.

    Alternatively, you can just replace the title by some other text like another title for the data being displayed.

    Yet another two alternatives to avoid this would be use no title bar at all, and:
    1. add the _emptyTitle text either as a node (while hiding the header)
    or
    2. on the bottom, on the pager as another toolbar component (label).

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Hi Fabricio,

    Our UI design pattern requires that the header become hidden when store has records. Otherwise, the grid should display a descriptive prompt in the upper left corner of the grid. I don't mind using elements other than the header as long as they meet the requirement. I've tried a Toolbar with a ToolbarTextItem but it still suffers from the same layout issue.
  6. #6
    What about this before-and-after scenario, does it do any good?
    Click image for larger version. 

Name:	working-scenario-01.png 
Views:	120 
Size:	24.3 KB 
ID:	24060

    This is just
    - when empty, it will have a node saying that you have no records, but headers are also hidden
    - when not empty, it will no longer contain this dummy node and the headers will be shown.

    I believe this would be closer to the usual 'EmptyText' property we have on newer Ext.NET versions.

    EDIT: you can even play around with the text to give it emphasis, for example this in the 'empty' scenario:
    Click image for larger version. 

Name:	working-scenario-01.1.png 
Views:	95 
Size:	15.5 KB 
ID:	24062
    Last edited by fabricio.murta; Jul 07, 2015 at 3:13 AM.
    Fabrício Murta
    Developer & Support Expert
  7. #7
    This may look acceptable. Is there any way to get rid of the underlying line?

    Edit in:

    I receive a client side error when expanding the header menus. It seems to me that it's caused by the timing of hiding and showing the headers.

    <%@ Page Language="C#" AutoEventWireup="true" %>
    
    <!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">
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder2" runat="server" Mode="Style" />
        <title>TreeGrid - Ext.NET Examples</title>
        <link href="Styles/main.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript">
            var addNode = function () {
                X.AddNode({
                    eventMask: { showMask: true },
                    success: function (result) {
                        var nodes = eval(result);
                        if (nodes.length > 0) {
                            TreeGrid1.initChildren(nodes);
                        }
                        else {
                            TreeGrid1.getRootNode().removeChildren();
                        }
    
                        PagingToolbar1.doLayout();
                        TreeGrid1.doLayout();
                        Viewport1.doLayout();
                    }
                });
            };
    
            var deleteNode = function () {
                X.DeleteNode({
                    eventMask: { showMask: true },
                    success: function (result) {
                        var nodes = eval(result);
                        if (nodes.length > 0) {
                            TreeGrid1.initChildren(nodes);
                        }
                        else {
                            TreeGrid1.getRootNode().removeChildren();
                        }
                    }
                });
            };
        </script>
    
        <script runat="server">
            private string _emptyTitle = "You have no records at this time.";
    
            protected void Page_Load(object sender, EventArgs e)
            {
                if (ExtNet.IsAjaxRequest) return;
                TreeGrid1.HideHeaders = true;
            }
    
            [DirectMethod]
            public string AddNode()
            {
                TreeGrid1.RemoveAll();
                TreeGrid1.Root.Add(new Ext.Net.TreeNode { NodeID = "Root", AllowDrag = false });
                var rootNode = TreeGrid1.Root.FirstOrDefault(r => r.NodeID.Equals("Root")) as Ext.Net.TreeNode;
                rootNode.Nodes.Add(new Ext.Net.TreeNode { NodeID = "Node1", Expanded = true, AllowDrag = false });
    
                var bookNode = rootNode.Nodes.FirstOrDefault(r => r.NodeID.Equals("Node1")) as Ext.Net.TreeNode;
                bookNode.CustomAttributes.Add(new ConfigItem { Name = "Record", Value = "First Node", Mode = ParameterMode.Value });
                bookNode.CustomAttributes.Add(new ConfigItem { Name = "CreatedOn", Value = "", Mode = ParameterMode.Value });
                bookNode.CustomAttributes.Add(new ConfigItem { Name = "UpdatedBy", Value = "", Mode = ParameterMode.Value });
    
                X.AddScript(String.Format("{0}.el.child('.x-grid3-header').dom.style.display = 'block';", TreeGrid1.ID));
                Toolbar1.Hidden = true;
    
                var nodes = TreeGrid1.Root;
                return nodes.ToJson();
            }
    
            [DirectMethod]
            public string DeleteNode()
            {
                TreeGrid1.RemoveAll();
                X.AddScript(String.Format("{0}.el.child('.x-grid3-header').dom.style.display = 'none';", TreeGrid1.ID));
                Toolbar1.Hidden = false;
    
                var nodes = TreeGrid1.Root;
                return nodes.ToJson();
            }
        
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" DirectMethodNamespace="X" />
            <ext:Viewport runat="server" ID="Viewport1" Layout="FitLayout">
                <Items>
                    <ext:TreeGrid runat="server" ID="TreeGrid1" NoLeafIcon="true" EnableDD="true" Border="false">
                        <TopBar>
                            <ext:Toolbar runat="server" ID="Toolbar1">
                                <Items>
                                    <ext:ToolbarTextItem runat="server" Text="No records to display at this time."></ext:ToolbarTextItem>
                                </Items>
                            </ext:Toolbar>
                        </TopBar>
                        <Columns>
                            <ext:TreeGridColumn Header="Record" Width="300" DataIndex="Record" />
                            <ext:TreeGridColumn Header="Created On" Width="150" DataIndex="CreatedOn" />
                            <ext:TreeGridColumn Header="Updated By" Width="150" DataIndex="UpdatedBy" />
                        </Columns>
                        <BottomBar>
                            <ext:PagingToolbar ID="PagingToolbar1" runat="server">
                                <Items>
                                    <ext:Button runat="server" Text="Add" Icon="Add" Width="80">
                                        <Listeners>
                                            <Click Fn="addNode" />
                                        </Listeners>
                                    </ext:Button>
                                    <ext:Button runat="server" Text="Delete" Icon="Delete" Width="80">
                                        <Listeners>
                                            <Click Fn="deleteNode" />
                                        </Listeners>
                                    </ext:Button>
                                </Items>
                            </ext:PagingToolbar>
                        </BottomBar>
                    </ext:TreeGrid>
                </Items>
            </ext:Viewport>
        </form>
    </body>
    </html>
    Last edited by vadym.f; Jul 07, 2015 at 12:41 PM.
  8. #8
    Hello,

    I've just opened an issue to fix the original request on this thread. It is located on GitHub issue #828.

    What you think about elaborating a new thread about the title issue? It somehow feels like a procedural issue, not a script, error, or such. It also would help for future reference on both issues being talked about.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 10
    Last Post: Jun 14, 2017, 2:00 AM
  2. [CLOSED] Unhiding a hidden column on grid throws javascript error
    By vmehta in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Jan 09, 2015, 2:53 PM
  3. Replies: 1
    Last Post: Mar 06, 2014, 4:21 AM
  4. [OPEN] [#129] Can Ajax requests send If-Modified-Since headers
    By anup in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Jan 18, 2013, 4:26 AM
  5. Replies: 2
    Last Post: Jul 06, 2011, 10:51 PM

Tags for this Thread

Posting Permissions