What's New?

[CLOSED] TreePanel refresh in codebehind can't handle many icons

  1. #1
    Aug 24, 2010, 9:26 PM

    [CLOSED] TreePanel refresh in codebehind can't handle many icons

    I have a TreePanel like the sample https://examples1.ext.net/#/TreePane...h_Static_Tree/ except that I want to use different icons. I found that everytime I refresh, I have to reregister the icons or they don't show up. This seems to be too much for the control to handle. If you run the code below and refresh several times, at least four for me, there is an Invalid procedure call or argument in ext.axd.

    Please let me know what I am doing wrong. Is there a better way to use icons in the TreePanel?

    Thanks.
    -Steve


        <%@ 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">
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack && !X.IsAjaxRequest)
            {
                this.BuildTree(TreePanel1.Root);
            }
        }
        private Ext.Net.TreeNodeCollection BuildTree(Ext.Net.TreeNodeCollection nodes)
        {
            if (nodes == null)
            {
                nodes = new Ext.Net.TreeNodeCollection();
            }
            ResourceManager1.RegisterIcon(Icon.StopBlue);
            ResourceManager1.RegisterIcon(Icon.BulletTick);
            ResourceManager1.RegisterIcon(Icon.GroupGo);
            ResourceManager1.RegisterIcon(Icon.FlowerDaisy);
            ResourceManager1.RegisterIcon(Icon.Cog);
            ResourceManager1.RegisterIcon(Icon.Report);
            ResourceManager1.RegisterIcon(Icon.Clipboard);
            Ext.Net.TreeNode root = new Ext.Net.TreeNode();
            root.Text = "Root";
            nodes.Add(root);
            string prefix = DateTime.Now.Second + ":  This is text for the menu item";
            for (int i = 0; i < 10; i++)
            {
                Ext.Net.TreeNode node = new Ext.Net.TreeNode("Top");
                root.Nodes.Add(node);
                addNode(node, prefix + "1", Icon.StopBlue);
                addNode(node, prefix + "2", Icon.BulletTick);
                addNode(node, prefix + "3", Icon.GroupGo);
                addNode(node, prefix + "4", Icon.FlowerDaisy);
                addNode(node, prefix + "5", Icon.Cog);
                addNode(node, prefix + "6", Icon.Report);
                addNode(node, prefix + "7", Icon.Clipboard);
                addNode(node, prefix + "8", Icon.Cog);
                addNode(node, prefix + "9", Icon.GroupGo);
                addNode(node, prefix + "10", Icon.BulletTick);
            }
            return nodes;
        }
        private void addNode(Ext.Net.TreeNode root, string nodeText, Ext.Net.Icon icon)
        {
            root.Nodes.Add(new Ext.Net.TreeNode(nodeText,icon));
        }
        [DirectMethod]
        public string RefreshMenu()
        {
            Ext.Net.TreeNodeCollection nodes = this.BuildTree(null);
            return nodes.ToJson();
        }
</script>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head2" runat="server">
        <title>SiteMap - Ext.NET Examples</title>
    </head>
    <body>
        <form id="Form1" runat="server">
        <script type="text/javascript">
            var refreshTree = function(tree) {
                Ext.net.DirectMethods.RefreshMenu({
                    success: function(result) {
                        var nodes = eval(result);
                        if (nodes.length > 0) {
                            tree.initChildren(nodes);
                        }
                        else {
                            tree.getRootNode().removeChildren();
                        }
                    }
                });
            }
        </script>
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            <ext:TabPanel runat="server">
            <Items>
                <ext:Panel Title="The One" runat="server">
                <Items>
                    <ext:TreePanel 
                        ID="TreePanel1" 
                        runat="server" 
                        Icon="Anchor" 
                        Title="Tree"
                        AutoScroll="true" 
                        Width="250" 
                        Collapsed="False" 
                        CollapseFirst="True" 
                        HideParent="False"
                        RootVisible="False" 
                        BodyStyle="padding-left:10px">
                        <Tools>            
                            <ext:Tool Type="Refresh" Qtip="Refresh" Handler="refreshTree(#{TreePanel1});" />
                        </Tools>
                     </ext:TreePanel>
                </Items>
                </ext:Panel>
                <ext:Panel Title="The Other" runat="server">
                <Items>
                </Items>
                </ext:Panel>
            </Items>
            </ext:TabPanel>
        </form>
    </body>
    </html>
    Last edited by Daniil; Sep 13, 2010 at 5:40 AM. Reason: [CLOSED]
  2. #2
    Aug 25, 2010, 9:43 AM
    Hello!

    I would suggest you to use the IconFile property of TreeNode class.

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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Import Namespace="System.Collections.Generic" %>

<script runat="server">
    public List<string> iconUrls;

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack && !X.IsAjaxRequest)
        {
            iconUrls = new List<string>();
            iconUrls.Add(this.ResourceManager1.GetIconUrl(Icon.StopBlue));
            iconUrls.Add(this.ResourceManager1.GetIconUrl(Icon.BulletTick));
            iconUrls.Add(this.ResourceManager1.GetIconUrl(Icon.GroupGo));
            iconUrls.Add(this.ResourceManager1.GetIconUrl(Icon.FlowerDaisy));
            iconUrls.Add(this.ResourceManager1.GetIconUrl(Icon.Cog));
            iconUrls.Add(this.ResourceManager1.GetIconUrl(Icon.Report));
            iconUrls.Add(this.ResourceManager1.GetIconUrl(Icon.Clipboard));
            this.BuildTree(TreePanel1.Root);
        }
    }
    private Ext.Net.TreeNodeCollection BuildTree(Ext.Net.TreeNodeCollection nodes)
    {
        if (nodes == null)
        {
            nodes = new Ext.Net.TreeNodeCollection();
        }
        Ext.Net.TreeNode root = new Ext.Net.TreeNode();
        root.Text = "Root";
        nodes.Add(root);
        string prefix = DateTime.Now.Second + ":  This is text for the menu item";
        for (int i = 0; i < 10; i++)
        {
            Ext.Net.TreeNode node = new Ext.Net.TreeNode("Top");
            root.Nodes.Add(node);
            addNode(node, prefix + "1", iconUrls[0]);
            addNode(node, prefix + "2", iconUrls[1]);
            addNode(node, prefix + "3", iconUrls[2]);
            addNode(node, prefix + "4", iconUrls[3]);
            addNode(node, prefix + "5", iconUrls[4]);
            addNode(node, prefix + "6", iconUrls[5]);
            addNode(node, prefix + "7", iconUrls[6]);
            addNode(node, prefix + "8", iconUrls[1]);
            addNode(node, prefix + "9", iconUrls[2]);
            addNode(node, prefix + "10", iconUrls[3]);
        }
        return nodes;
    }
    private void addNode(Ext.Net.TreeNode root, string nodeText, string iconUrl)
    {
        Ext.Net.TreeNode node = new Ext.Net.TreeNode(nodeText);
        node.IconFile = iconUrl;
        root.Nodes.Add(node);
    }
    [DirectMethod]
    public string RefreshMenu()
    {
        Ext.Net.TreeNodeCollection nodes = this.BuildTree(null);
        return nodes.ToJson();
    }
</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>

    <script type="text/javascript">
        var refreshTree = function(tree) {
            Ext.net.DirectMethods.RefreshMenu({
                success: function(result) {
                    var nodes = eval(result);
                    if (nodes.length > 0) {
                        tree.initChildren(nodes);
                    }
                    else {
                        tree.getRootNode().removeChildren();
                    }
                }
            });
        }
    </script>

</head>
<body>
    <form runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <ext:TreePanel 
        ID="TreePanel1" 
        runat="server" 
        Width="250"
        RootVisible="False">
        <Tools>
            <ext:Tool Type="Refresh" Handler="refreshTree(#{TreePanel1});" />
        </Tools>
    </ext:TreePanel>
    </form>
</body>
</html>
  3. #3
    Aug 25, 2010, 9:48 AM
    If you run the code below and refresh several times, at least four for me, there is an Invalid procedure call or argument in ext.axd
    By the way exactly four refreshing reproduces the issue in IE. But I was unable to reproduce the issue under FireFox.
  4. #4
    Aug 25, 2010, 10:25 AM
    Hi,

    I suggest to move RegisterIcon to the Page_Load

    protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack && !X.IsAjaxRequest)
            {
                    ResourceManager1.RegisterIcon(Icon.StopBlue);
            ResourceManager1.RegisterIcon(Icon.BulletTick);
            ResourceManager1.RegisterIcon(Icon.GroupGo);
            ResourceManager1.RegisterIcon(Icon.FlowerDaisy);
            ResourceManager1.RegisterIcon(Icon.Cog);
            ResourceManager1.RegisterIcon(Icon.Report);
            ResourceManager1.RegisterIcon(Icon.Clipboard);
                    this.BuildTree(TreePanel1.Root);
            }
        }
  5. #5
    Aug 25, 2010, 4:04 PM

    TreePanel refresh icon issue

    Daniil,

    The solution of using the IconFile capability seems to work great. I did have to recompute the iconUrls List each entry to the program, not just on initial load. But excellant solution. Thank you.

    -Steve
  6. #6
    Aug 25, 2010, 5:48 PM
    The original issue is caused by a defect in how the Icons are registered during a DirectEvent. We're working on a fix.
    Last edited by geoffrey.mcgill; Sep 08, 2010 at 3:51 PM.
    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  7. #7
    Sep 08, 2010, 4:19 PM
    Hi Steve.

    I think we've solved this problem. When you have a chance, please SVN update and retest your sample to confirm everything is working as you expect.

    Hope this helps.
    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  8. #8
    Sep 13, 2010, 5:39 AM
    Hello, SFritsche!

    This thread is marked as solved but any feedback would be appreciated.
  9. #9
    Sep 13, 2010, 3:44 PM

    TreePanel icon issue - resolved

    That works great. Thank you all very much.

    -Steve

Similar Threads

  1. [OPEN] [#167] TreePanel hide icons?
    By Timothy in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Mar 13, 2013, 12:49 PM
  2. [CLOSED] Customize icons in TreePanel
    By bakardi in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 19, 2012, 12:30 PM
  3. How can i do refresh (timer refresh) a LinkButton codebehind
    By fatihunal in forum 1.x Help
    Replies: 2
    Last Post: Jan 22, 2012, 2:00 PM
  4. TreePanel shows only default Icons when TreePanel.AppendChild is used unless we set the IconFile
    By reverseblade in forum 1.x Help
    Replies: 5
    Last Post: Mar 23, 2011, 9:57 AM
  5. TreePanel->Tools(Type="Refresh"), when click refresh icon, can I show a mask over the TreePanel?
    By zhangsir199 in forum 1.x Help
    Replies: 2
    Last Post: Jul 30, 2010, 12:37 AM

Posting Permissions