What's New?

How to dynamicly add a node to a TreePanel?

  1. #1
    Jul 17, 2012, 7:26 AM

    How to dynamicly add a node to a TreePanel?

    How to dynamicly add a node to a TreePanel? and how to get selected node and it's parent node of a treepanel?
  2. #2
    Jul 17, 2012, 6:08 PM
    Hi,

    Welcome to Ext.NET!

    Quote Originally Posted by gmpd123 View Post
    How to dynamicly add a node to a TreePanel?
    Example
    var store = App.TreePanel1.getStore(),
    node = store.getNodeById("Node1");
    
node.appendChild({
    text : "The New Node",
    leaf : true
})
    Quote Originally Posted by gmpd123 View Post
    and how to get selected node and it's parent node of a treepanel?
    Example
    var sm = App.TreePanel1.getSelectionModel();
    selectedNode,
    parentNode;
    
if (sm.hasSelection()) {
    selectedNode = sm.getSelection()[0],
    parentNode = selectedNode.parentNode;
}
    See also
    http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.TreeStore-method-getNodeById
    http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.NodeInterface-method-appendChild
    http://docs.sencha.com/ext-js/4-1/#!/api/Ext.selection.Model-method-hasSelection
    http://docs.sencha.com/ext-js/4-1/#!/api/Ext.selection.Model-method-getSelection
    http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.NodeInterface-property-parentNode
  3. #3
    Jul 18, 2012, 1:12 AM
    Quote Originally Posted by Daniil View Post
    Hi,

    Welcome to Ext.NET!



    Example
    var store = App.TreePanel1.getStore(),
    node = store.getNodeById("Node1");
    
node.appendChild({
    text : "The New Node",
    leaf : true
})


    Example
    var sm = App.TreePanel1.getSelectionModel();
    selectedNode,
    parentNode;
    
if (sm.hasSelection()) {
    selectedNode = sm.getSelection()[0],
    parentNode = selectedNode.parentNode;
}
    See also
    http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.TreeStore-method-getNodeById
    http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.NodeInterface-method-appendChild
    http://docs.sencha.com/ext-js/4-1/#!/api/Ext.selection.Model-method-hasSelection
    http://docs.sencha.com/ext-js/4-1/#!/api/Ext.selection.Model-method-getSelection
    http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.NodeInterface-property-parentNode

    Thanks very much .
    I also want to know if it's possible to get it from code behind. In the *.aspx.cs files, how can i get selected node and parent node of TreePanel, and dynamic add a node to a TreePanel from code behind?
  4. #4
    Jul 31, 2012, 11:54 AM
    Quote Originally Posted by gmpd123 View Post
    Thanks very much .
    I also want to know if it's possible to get it from code behind. In the *.aspx.cs files, how can i get selected node and parent node of TreePanel
    You can use the SelectedNodes collection. The example is below.

    Though it doesn't allow to get a parent node. If you need that you should send this info via ExtraParams of DirectEvent.

    Quote Originally Posted by gmpd123 View Post
    dynamic add a node to a TreePanel from code behind?
    Please see the example.

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

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

<script runat="server">
    protected void GetSelectedNode(object sender, DirectEventArgs e)
    {
        TreeSelectionModel sm = this.TreePanel1.GetSelectionModel() as TreeSelectionModel;
        string msg = "no selection";
        if (sm.SelectedNodes != null)
        {
            SubmittedNode node = sm.SelectedNodes[0];
            msg = node.Text;
        }
        X.Msg.Alert("GetSelectedNode", msg).Show();
    }

    protected void AddNode(object sender, DirectEventArgs e)
    {
        Node node = new Node() 
            { 
                Text = "NEW NODE", 
                Leaf = true 
            };
        this.TreePanel1.GetNodeById("Root").AppendChild(node);
    }
</script>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:TreePanel ID="TreePanel1" runat="server" AutoHeight="true">
            <Root>
                <ext:Node NodeID="Root" Text="Root (level 0)" Expanded="true">
                    <Children>
                        <ext:Node Text="Node1 (level 1)" Expanded="true">
                            <Children>
                                <ext:Node Text="Node1 (level 2)" Expanded="true">
                                    <Children>
                                        <ext:Node Text="Node1 (level 3)" Leaf="true" />
                                        <ext:Node Text="Node2 (level 3)" Leaf="true" />
                                    </Children>
                                </ext:Node>
                            </Children>
                        </ext:Node>
                        <ext:Node Text="Node2 (level 1)" Expanded="true">
                            <Children>
                                <ext:Node Text="Node1 (level 2)" Expanded="true">
                                    <Children>
                                        <ext:Node Text="Node1 (level 3)" Leaf="true" />
                                        <ext:Node Text="Node2 (level 3)" Leaf="true" />
                                    </Children>
                                </ext:Node>
                            </Children>
                        </ext:Node>
                    </Children>
                </ext:Node>
            </Root>
            <SelectionModel>
                <ext:TreeSelectionModel runat="server" />
            </SelectionModel>
        </ext:TreePanel>

        <ext:Button runat="server" Text="Get Selected Node" OnDirectClick="GetSelectedNode" />
        <ext:Button runat="server" Text="Add node" OnDirectClick="AddNode" />
    </form>
</body>
</html>
  5. #5
    Jun 11, 2015, 7:44 AM
    Hi,

    When following the example above to add nodes to a tree panel dynamically and specifying icon for the node in AddNode method, browser does not show node icon.

    Is it possible to specify icon for the dynamically added nodes? (I'm using ext.net version 2.x)

    Thanks.

        protected void AddNode(object sender, DirectEventArgs e)
    {
        Node node = new Node() 
            { 
                Text = "NEW NODE", 
                Leaf = true ,
                Icon = Icon.Add
            };
        this.TreePanel1.GetNodeById("Root").AppendChild(node);
    }
  6. #6
    Jun 15, 2015, 2:51 PM
    Hi @metci,

    I could not reproduce the issue with the latest Ext.NET 2. I guess it has been fixed.

    If you don't want/need to update to the latest Ext.NET 2, please try to register icons manually:
    ResourceManager.GetInstance().RegisterIcon(Icon.Add);

Similar Threads

  1. How to get Node by id in treepanel 2.0?
    By tms2003@126.com in forum 2.x Help
    Replies: 1
    Last Post: Apr 03, 2012, 3:01 PM
  2. TreePanel node marking
    By shijith in forum 1.x Help
    Replies: 2
    Last Post: Jan 02, 2011, 11:42 AM
  3. Selected Node Id of a TreePanel
    By Z in forum 1.x Help
    Replies: 1
    Last Post: Jul 21, 2010, 8:26 AM
  4. Treepanel Node
    By lindgrenm in forum 1.x Help
    Replies: 0
    Last Post: Feb 10, 2010, 3:08 PM
  5. TreePanel:Copying from one node to another node using drag and drop
    By eighty20 in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Jan 25, 2009, 7:48 AM

Posting Permissions