[CLOSED] TreeGrid Column Offset

[AABR]

Hi,

I have an issue with the treegrid control where it offsets later rows to the right. First number of rows seem to be aligned correctly. Looks like the whole tree is being shifted to the right every time a new row is added.

If one of the columns gets resized, then the tree fixes itself.

*I couldn't attach any of the *.zip files nor .cs/.aspx

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Ext.Net;
using System.Xml.Linq;
using PerfDataCollector.Service;

namespace PerfDataCollector
{
    public partial class Test : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }


        public Ext.Net.TreeNode BuildTree(XElement allAlerts)
        {
            Ext.Net.TreeGrid tree = new Ext.Net.TreeGrid();

            Ext.Net.TreeNode root = new Ext.Net.TreeNode("Alerts") { Expanded = true };
            tree.RootVisible = false;
            tree.Root.Add(root);

            root.Nodes.AddRange(allAlerts.Descendants("HostGroup").OrderBy(hg => hg.Attribute("hostGroupName").Value).Select(hostGroup =>
            {
                var hostGroupDisabled = bool.Parse(hostGroup.Attribute("disabled").Value);
                var hostGroupID = hostGroup.Attribute("hostGroupID").Value;
                Ext.Net.TreeNode hostGroupNode = new Ext.Net.TreeNode() { Expanded = !hostGroupDisabled, IconCls = "hostGroupClass", Icon = Icon.None };

                if (hostGroupDisabled)
                    hostGroupNode.Cls += " disabled";

                hostGroupNode.CustomAttributes.AddRange(
                    new ConfigItem[]{
                        new ConfigItem(){Name="hostGroupID",Value="\""+hostGroupID+"\""},
                        new ConfigItem(){Name="treeNodeType",Value="\"hostGroup\""},
                        new ConfigItem(){Name="disabled",Value= hostGroupDisabled.ToString().ToLower()},
                        new ConfigItem(){Name="Name",Value="\""+hostGroup.Attribute("hostGroupName").Value+"\""},
                    }
                );

                hostGroupNode.Nodes.AddRange(hostGroup.Descendants("GroupHosts").Select(hostsGroup =>
                {
                    var hostGroupHostsNode = new Ext.Net.TreeNode("Hosts") { Expanded = false, IconCls = "hostClass", Icon = Icon.None };

                    if (hostGroupDisabled)
                        hostGroupNode.Cls += " disabled";

                    hostGroupHostsNode.CustomAttributes.AddRange(
                        new ConfigItem[]{
                            new ConfigItem(){Name="hostGroupID",Value="\""+hostGroupID+"\""},
                            new ConfigItem(){Name="counterGroupID",Value="\"0\""},
                            new ConfigItem(){Name="treeNodeType",Value="\"hostsGroup\""},
                            new ConfigItem(){Name="disabled",Value= hostGroupDisabled.ToString().ToLower()},
                            new ConfigItem(){Name="Name",Value="\"Hosts\""}
                        }
                    );

                    hostGroupHostsNode.Nodes.AddRange(hostsGroup.Descendants("GroupHost").OrderBy(host => host.Attribute("hostName").Value).Select(host =>
                    {
                        var hostDisabled = (bool.Parse(host.Attribute("disabled").Value) || hostGroupDisabled);
                        var hostID = host.Attribute("hostID").Value;
                        var hostName = host.Attribute("hostName").Value;
                        var hostNode = new Ext.Net.TreeNode() { Leaf = true };

                        if (hostDisabled)
                            hostNode.Cls += " disabled";

                        hostNode.IconCls = "hostClass";

                        hostNode.CustomAttributes.AddRange(
                            new ConfigItem[]{
                                new ConfigItem(){Name="hostID",Value="\""+hostID+"\""},
                                new ConfigItem(){Name="hostGroupID",Value="\""+hostGroupID+"\""},
                                new ConfigItem(){Name="counterGroupID",Value="\"0\""},
                                new ConfigItem(){Name="treeNodeType",Value="\"hostsGroupHost\""},
                                new ConfigItem(){Name="disabled",Value= hostDisabled.ToString().ToLower()},
                                new ConfigItem(){Name="Name",Value="\""+hostName+"\""}
                            }
                        );
                        return hostNode;
                    }).ToArray());
                    return hostGroupHostsNode;
                }).ToArray());

                hostGroupNode.Nodes.AddRange(hostGroup.Descendants("CounterGroup").Select(counterGroup =>
                {
                    var counterGroupDisabled = (bool.Parse(counterGroup.Attribute("disabled").Value) || hostGroupDisabled);
                    var counterGroupID = counterGroup.Attribute("counterGroupID").Value;
                    var counterGroupNode = new Ext.Net.TreeNode(counterGroup.Attribute("counterGroupName").Value) { Expanded = !counterGroupDisabled };

                    if (counterGroupDisabled)
                        counterGroupNode.Cls += " disabled";

                    counterGroupNode.CustomAttributes.AddRange(
                        new ConfigItem[]{
                            new ConfigItem(){Name="counterGroupID",Value="\""+counterGroupID+"\""},
                            new ConfigItem(){Name="hostGroupID",Value="\""+hostGroupID+"\""},
                            new ConfigItem(){Name="treeNodeType",Value="\"counterGroup\""},
                            new ConfigItem(){Name="disabled",Value= counterGroupDisabled.ToString().ToLower()},
                            new ConfigItem(){Name="Name",Value="\""+counterGroup.Attribute("counterGroupName").Value+"\""}
                        }
                    );

                    counterGroupNode.Nodes.AddRange(counterGroup.Descendants("Host").OrderBy(host => host.Attribute("hostName").Value).Select(host =>
                    {
                        var hostDisabled = (bool.Parse(host.Attribute("disabled").Value) || counterGroupDisabled);
                        var hostID = host.Attribute("hostID").Value;
                        var hostName = host.Attribute("hostName").Value;
                        var hostNode = new Ext.Net.TreeNode() { Expanded = !hostDisabled };

                        if (hostDisabled)
                            hostNode.Cls += " disabled";

                        if (string.IsNullOrEmpty(hostName))
                            hostNode.Icon = Icon.FolderTable;
                        else
                            hostNode.IconCls = "hostClass";

                        hostNode.CustomAttributes.AddRange(
                            new ConfigItem[]{
                                new ConfigItem(){Name="hostID",Value="\""+hostID+"\""},
                                new ConfigItem(){Name="counterGroupID",Value="\""+counterGroupID+"\""},
                                new ConfigItem(){Name="treeNodeType",Value=string.IsNullOrEmpty(hostName)?"\"counterFolder\"":"\"host\""},
                                new ConfigItem(){Name="disabled",Value= hostDisabled.ToString().ToLower()},
                                new ConfigItem(){Name="Name",Value="\""+(string.IsNullOrEmpty(hostName) ? "Common for all hosts" : hostName)+"\""}
                            }
                        );

                        hostNode.Nodes.AddRange(host.Descendants("Alert").OrderBy(alert => alert.Attribute("counterName").Value).Select(alert =>
                        {
                            var alertID = alert.Attribute("id").Value;
                            var alertNode = new Ext.Net.TreeNode() { Leaf = true, Icon = Icon.Cog };
                            var alertDisabled = (bool.Parse(alert.Attribute("disabled").Value) || hostDisabled);

                            var counterName = "<b >" + alert.Attribute("counterCategoryName").Value + "</b>" +
                                (string.IsNullOrEmpty(alert.Attribute("counterInstanceName").Value) ? "" : "<b>(</b><span style='color:gray'>" + alert.Attribute("counterInstanceName").Value + "</span><b>)</b>") +
                                "\\\\<b style='color:#2F6299'>" + alert.Attribute("counterName").Value + "</b>";

                            if (hostDisabled)
                                alertNode.Cls += " disabled";

                            alertNode.CustomAttributes.AddRange(
                               new ConfigItem[]{
                                    new ConfigItem(){Name="alertID",Value="\""+alertID+"\""},
                                    new ConfigItem(){Name="hostID",Value="\""+hostID+"\""},
                                    new ConfigItem(){Name="hostGroupID",Value="\""+hostGroupID+"\""},
                                    new ConfigItem(){Name="counterGroupID",Value="\""+counterGroupID+"\""},
                                    new ConfigItem(){Name="disabled",Value= alertDisabled.ToString().ToLower()},
                                    new ConfigItem(){Name="Name",Value="\""+counterName+"\""},
                                    new ConfigItem(){Name="Operator",Value="\""+Server.HtmlEncode(alert.Attribute("operator").Value)+"\""},
                                    new ConfigItem(){Name="Value",Value="\""+alert.Attribute("thresholdValue").Value+"\""},
                                    new ConfigItem(){Name="Interval",Value="\""+alert.Attribute("interval").Value+"\""},
                                    new ConfigItem(){Name="Delay",Value="\""+alert.Attribute("delay").Value+"\""},
                                    new ConfigItem(){Name="EmailTo",Value="\""+alert.Attribute("emailGroupNames").Value+"\""}

                                }
                           );
                            return alertNode;
                        }).ToArray());
                        return hostNode;
                    }).ToArray());

                    return counterGroupNode;
                }).ToArray());

                return hostGroupNode;
            }).ToArray());

            return root;
        }

        [DirectMethod]
        public string RefreshList()
        {
            var allAlerts = XDocument.Load(Server.MapPath("~/XmlFile1.xml"));

            var collection = new Ext.Net.TreeNodeCollection();
            collection.Add(BuildTree(allAlerts.Root));
            Ext.Net.TreeNodeCollection nodes = collection;

            return nodes.ToJson();
        }
    }
}

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="PerfDataCollector.Test" %>

<%@ 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">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<head runat="server">
    <title></title>
</head>

<script type="text/javascript">

    Ext.onReady(function() {
        refreshTree(coc_ucTreePanel1);
    });
    var filterTree = function() {
        var tree = coc_ucTreePanel1;
        var text = coc_uc_TriggerFieldFilter.getRawValue();

        tree.clearFilter();

        if (Ext.isEmpty(text, false)) {
            return;
        }


        var re = new RegExp(".*" + text + ".*", "i");

        tree.filterBy(function(node) {
            return re.test(node.attributes.Name) || (node.parentNode != tree.root && tree.filtered[node.parentNode.id] == undefined);
        });

    };

    var clearFilter = function() {
        var field = coc_uc_TriggerFieldFilter;
        var tree = coc_ucTreePanel1;

        field.setValue("");
        tree.clearFilter();
        tree.getRootNode().expandChildNodes(true);
        tree.getRootNode().ensureVisible();
    };
    var sizeSwitch = 0;
    var refreshTree = function(tree) {
        tree.clearFilter();
        Ext.net.Mask.show(tree);
        Ext.net.DirectMethods.RefreshList({
            success: function(result) {
                var nodes = eval(result);

                if (nodes.length > 0) {
                    tree.initChildren(nodes);
                }
                else {
                    tree.getRootNode().removeChildren();
                }
                //coc_ucTreePanel1.setSize(PanelOverView_COC_uc.getWidth() + sizeSwitch)
                coc_ucTreePanel1.fireEvent("load");
                Ext.net.Mask.hide();
                SetupRemoveButtonMouseEvents();
                filterTree();
            },
            failure: function(result) {
                coc_ucTreePanel1.fireEvent("load");
                Ext.net.Mask.hide();
            }
        });
        sizeSwitch = !sizeSwitch;
    }
</script>

<body>
    <form id="form1" runat="server">
    <ext:Viewport ID="FitLayout1_COC_uc" runat="server">
        <Items>
            <ext:Panel ID="Panel3_COC_uc" Header="true" runat="server" Border="false" ButtonAlign="Center"
                Title="All System Alerts" Cls="noBorder">
                <Items>
                    <ext:TreeGrid ID="coc_ucTreePanel1" runat="server" UseArrows="false" Height="1000"
                        Layout="Fit" IDMode="Static" Visible="true" ColumnResize="true" RootVisible="false"
                        Border="false" Animate="false" AutoScroll="true" EnableSort="false" EnableHdMenu="false"
                        NoLeafIcon="false">
                        <Columns>
                            <ext:TreeGridColumn Header="Name" Width="600" DataIndex="Name" Align="Center">
                                <XTemplate ID="XTemplate1" runat="server">
                                    <Html>
                                    <span style="white-space: normal; word-wrap: normal; -ms-word-wrap: normal; width: 400px">{Name}</span>
                                    </Html>
                                </XTemplate>
                            </ext:TreeGridColumn>
                            <ext:TreeGridColumn Header="Operator" Width="80" DataIndex="Operator" Align="Center" />
                            <ext:TreeGridColumn Header="Value" Width="80" DataIndex="Value" Align="Center" />
                            <ext:TreeGridColumn Header="Email To" Width="250" DataIndex="EmailTo" Align="Center" />
                            <ext:TreeGridColumn Header="Command" Width="350" Align="Center">
                                <XTemplate ID="coc_uc_XTemplate1" runat="server">
                                    <Html>
                                    <div style='width: 160px; height: 23px; margin-top: 2px'>
                                <div id='renderDisableButtonHere' style='float: left;'>
                                    <span style='padding-left: 10px; color: #7EBBED; text-decoration: underline'>Disable</span></div>
                                <div id='renderEditButtonHere' style='float: left; padding-left: 10px'>
                                    <span style='padding-left: 0px; color: #1B87E0; text-decoration: underline'>Edit</span></div>
                                <div id='renderRemoveButtonHere' style='float: left; padding-left: 10px'>
                                    <span style='padding-left: 0px; color: #1B87E0; text-decoration: underline'>Remove</span></div>
                            </div>
                                    </Html>
                                </XTemplate>
                            </ext:TreeGridColumn>
                        </Columns>
                        <Root>
                            <ext:TreeNode />
                        </Root>
                    </ext:TreeGrid>
                </Items>
            </ext:Panel>
        </Items>
    </ext:Viewport>
    </form>
</body>
</html>

[Daniil]

Hi,

Well, it's not an option to investigate 1239 lines of the code.

We can suggest the following things:

1. Set up an AfterRender listener for a TreeGrid:

<AfterRender Handler="this.updateColumnWidths();" />

2. Call it after adding a new node:

TreeGrid1.updateColumnWidths();

[AABR]

Unfortunately, changing the width is not the solution in this case. This slows down rendering of the tree in two-three times.

If you look closer to the code part you'll find that the code itself takes only 300 lines (.cs and the .aspx). the rest is the big enough xml used to reproduce the issue.

if your file upload control let me upload an archive i would submit the entire test project.

[Vladimir]

Do you able to reproduce the offset in the simple sample, with few nodes only?

[AABR]

No, ~70-80 nodes don't have this issue.

[Daniil]

Is the problem column with the "Command" header, right?

[AABR]

that is correct

[Daniil]

Ok, thanks.

I think the issue should be reproducible with a simple code using a TreeGrid with a TreeGridColumn with that XTemplate and adding some dummy nodes using a loop.

[Daniil]

Hi,

Does the example below reproduce the problem on your side?

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        Ext.Net.TreeNode root = this.TreeGrid1.Root.Primary as Ext.Net.TreeNode;
        Ext.Net.TreeNode node = new Ext.Net.TreeNode()
            {
                Text = "test",
                CustomAttributes = 
                    {
                        new ConfigItem("test1", "node", ParameterMode.Value),
                        new ConfigItem("test2", "node", ParameterMode.Value)
                    },
                Expanded = true
            };
        root.Nodes.Add(BuildNode(node, 0));
        
    }

    private Ext.Net.TreeNode BuildNode(Ext.Net.TreeNode node, int i)
    {
        if (i < 20)
        {
            for (int j = 0; j < 50; j++)
            {
                node.Nodes.Add(new Ext.Net.TreeNode()
                    {
                        Text = "test",
                        CustomAttributes = 
                            {
                                new ConfigItem("test1", "node", ParameterMode.Value),
                                new ConfigItem("test2", "node", ParameterMode.Value)
                            },
                        Expanded = true
                    });
            }
            BuildNode(node.Nodes[49] as Ext.Net.TreeNode, ++i);
        }
        return node;
    } 
</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>Ext.Net Example</title>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:TreeGrid ID="TreeGrid1" runat="server" AutoHeight="true">
        <Columns>
            <ext:TreeGridColumn Header="Text" DataIndex="text" Width="500" />
            <ext:TreeGridColumn Header="Test1" DataIndex="test1" Width="100" />
            <ext:TreeGridColumn Header="Test2" DataIndex="test2" Width="100" />
            <ext:TreeGridColumn Header="Command" Width="350" Align="Center">
                <XTemplate runat="server">
                    <Html>
                            <div style='width: 160px; height: 23px; margin-top: 2px'>
                                <div style='float: left;'>
                                    <span style='padding-left: 10px; color: #7EBBED; text-decoration: underline'>
                                        Disable
                                    </span>
                                </div>
                                <div style='float: left; padding-left: 10px'>
                                    <span style='padding-left: 0px; color: #1B87E0; text-decoration: underline'>
                                        Edit
                                    </span>
                                </div>
                                <div style='float: left; padding-left: 10px'>
                                    <span style='padding-left: 0px; color: #1B87E0; text-decoration: underline'>
                                        Remove
                                    </span>
                                </div>
                            </div>
                    </Html>
                </XTemplate>
            </ext:TreeGridColumn>
        </Columns>
        <Root>
            <ext:TreeNode />
        </Root>
    </ext:TreeGrid>
    </form>
</body>
</html>