Setting node icons with TreeLoader(s)

  1. #1

    Setting node icons with TreeLoader(s)

    Hi all,

    I wonder if there is a simple way of setting icons (or iconCls's) when using TreeLoader to populate a TreePanel.

    Thanks in advance,

    TheDarkLord
  2. #2
    Hello!

    Please use the Icon and IconFile property of TreeNode. If the Icon property is used it must be registered (see Page_Load).

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            this.ResourceManager1.RegisterIcon(Icon.Add);
        }
    
        protected void NodeLoad(object sender, NodeLoadEventArgs e)
        {
            string prefix = e.ExtraParams["prefix"] ?? "";
    
            if (!string.IsNullOrEmpty(e.NodeID))
            {
                for (int i = 1; i < 6; i++)
                {
                    AsyncTreeNode asyncNode = new AsyncTreeNode();
                    asyncNode.Text = prefix + e.NodeID + i;
                    asyncNode.NodeID = e.NodeID + i;
                    asyncNode.Icon = Icon.Add;
                    e.Nodes.Add(asyncNode);
                }
    
                for (int i = 6; i < 11; i++)
                {
                    Ext.Net.TreeNode treeNode = new Ext.Net.TreeNode();
                    treeNode.Text = prefix + e.NodeID + i;
                    treeNode.NodeID = e.NodeID + i;
                    treeNode.Leaf = true;
                    if (i % 2 == 0)
                    {
                        treeNode.IconFile = this.ResourceManager1.GetIconUrl(Icon.Accept);
                    }
                    else
                    {
                        treeNode.IconFile = this.ResourceManager1.GetIconUrl(Icon.Anchor);
                    }
                    e.Nodes.Add(treeNode);
                }
            }
        }
    </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>TreePanel with Async TreeLoader using Page - Ext.NET Examples</title>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <h1>
            TreePanel using PageTreeLoader</h1>
        <p>
            Set custom node prefix:
        </p>
        <ext:TextField ID="TextField1" runat="server" Text="Node" />
        <ext:TreePanel runat="server" AutoHeight="true">
            <Loader>
                <ext:PageTreeLoader OnNodeLoad="NodeLoad">
                    <BaseParams>
                        <ext:Parameter Name="prefix" Value="#{TextField1}.getValue()" Mode="Raw" />
                    </BaseParams>
                </ext:PageTreeLoader>
            </Loader>
            <Root>
                <ext:AsyncTreeNode NodeID="0" Text="Root" />
            </Root>
        </ext:TreePanel>
        </form>
    </body>
    </html>
    Last edited by Daniil; Aug 16, 2010 at 1:15 PM.
  3. #3
    Hi,

    I'm sorry for not giving a sample in my previous post :(

    Sample html code :

                                    <ext:TreePanel ID="tpMenu" runat="server" Title="" RootVisible="false" Border="false"
                                        Collapsed="false">
                                        <TopBar>
                                            <ext:Toolbar ID="Toolbar1" runat="server">
                                                <Items>
                                                    <ext:Button ID="Button1" runat="server" Icon="CogAdd" ToolTip="Add/Remove Category">
                                                    </ext:Button>
                                                </Items>
                                            </ext:Toolbar>
                                        </TopBar>
                                        <Root>
                                            <ext:AsyncTreeNode NodeID="0" Text="Categories" />
                                        </Root>
                                        <Loader>
                                            <ext:TreeLoader DataUrl="/Category/Menu" PreloadChildren="true" AutoDataBind="true">
                                            </ext:TreeLoader>
                                        </Loader>
                                        <Listeners>
                                            <Click Fn="ShowItemsTab" />
                                        </Listeners>
                                    </ext:TreePanel>
    Sample controller action code:

            [HttpGet]
            public JsonResult List()
            {
                var cats = from ca in context.Categories 
                           orderby ca.Description
                           select new { ca.CategoryId, ca.Description };
    
                JsonResult jr = new JsonResult();
                jr.JsonRequestBehavior = JsonRequestBehavior.AllowGet;
                jr.Data = cats.ToList();
                jr.ContentType = "text/json";
                return jr;
            }
    Thanks,
    Last edited by thedarklord; Aug 16, 2010 at 7:03 PM.
  4. #4
    Hi!

    I don't see where is /Category/Menu in your sample code...

    You can use TreeNodeCollection within a get method.

    Example
    TreeNodeCollection nodes = new TreeNodeCollection();
    //create nodes
    return Content(nodes.ToJson());
    To create nodes you can use the code from the previous example.

Similar Threads

  1. [CLOSED] Icons combobox dissapear when setting value clientside
    By CarWise in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Nov 14, 2011, 9:19 AM
  2. Replies: 16
    Last Post: Jul 19, 2011, 3:53 AM
  3. Replies: 1
    Last Post: Nov 24, 2010, 3:04 PM
  4. Replies: 0
    Last Post: Apr 03, 2009, 5:47 AM
  5. Icons in TreeLoader
    By Jim Wild in forum 1.x Help
    Replies: 2
    Last Post: Feb 27, 2009, 5:53 AM

Posting Permissions