[CLOSED] Add tree node from JavaScript

  1. #1

    [CLOSED] Add tree node from JavaScript

    I'd like to add a node to a tree which have a column model (TreeGrid) via JavaScript. I made one sample, it doesn't make sense too much, but helps in explaining what I want to achieve:
    Controler:
    public class Employee
        {
            public string ID { get; set; }
            public string Name { get; set; }
            public string Position { get; set; }
            public string RefersTo { get; set; }
    
            public static List<Employee> GetAll()
            {
                return new List<Employee>() { new Employee() { ID = "1", Name = "John Smith", Position = "Manager" }, new Employee() { ID = "2", Name = "Peter Abbot", Position = "Senior Programmer", RefersTo = "1" }, new Employee() { ID = "3", Name = "Mike Top", Position = "Programmer", RefersTo = "1" }, new Employee() { ID = "4", Name = "Giovani Massa", Position = "Sales Manager" } };
            }
        }
    Controler:
    public ActionResult GetEmployees(string node)
            {
                IEnumerable<Employee> employees = null;
    
                if (node == "root")
                {
                    employees = from Employee employee in Employee.GetAll()
                                where String.IsNullOrEmpty(employee.RefersTo)
                                select employee;
                }
                else
                {
                    employees = from Employee employee in Employee.GetAll()
                                where !String.IsNullOrEmpty(employee.RefersTo) && employee.RefersTo == node
                                select employee;
                }
    
                NodeCollection nodeCollection = new NodeCollection();
    
                if (employees != null)
                {
                    foreach (Employee employee in employees)
                    {
                        Node employeeNode = new Node();
                        employeeNode.NodeID = employee.ID;
                        employeeNode.Icon = Icon.User;
                        employeeNode.CustomAttributes.Add(new ConfigItem("ID", employee.ID));
                        employeeNode.CustomAttributes.Add(new ConfigItem("Name", employee.Name));
                        employeeNode.CustomAttributes.Add(new ConfigItem("Position", employee.Position));
                        employeeNode.CustomAttributes.Add(new ConfigItem("RefersTo", employee.RefersTo));
                        employeeNode.Leaf = Employee.GetAll().Count(t => t.RefersTo == employee.ID) == 0;
                        nodeCollection.Add(employeeNode);
                    }
                }
    
                return this.Store(nodeCollection);
            }
    View
    @Html.X().ResourceManager()
    
    <script>
        function addEmployee(btn, text) {
            var store = App.Emps.getStore();
            node = App.Emps.getSelectionModel().getSelection()[0];
            var newId = Math.random().toString(36).substring(7);
            var childNode = node.appendChild({
                ID: newId,
                Name: text,
                Position: 'Subordinate',
                RefersTo: node.ID,
                leaf: true,
                iconCls: "#User",
            });
            store.sync();
        }
    </script>
    
    @(
        Html.X().TreePanel().ID("Emps").RootVisible(false).Title("Tree")
        .TopBar
        (
            Html.X().Toolbar()
            .Items
            (
                Html.X().Button().Icon(Icon.UserAdd).OnClientClick("Ext.MessageBox.show({title: 'Comment', msg: 'Text:',width: 300,buttons: Ext.MessageBox.OKCANCEL,multiline: true,fn: addEmployee});")
            )
        )
        .ColumnModel
        (
            Html.X().TreeColumn().Text("Name").Flex(1).DataIndex("Name"),
            Html.X().Column().Text("Position").Flex(1).DataIndex("Position")
        )
        .Store(
            Html.X().TreeStore()
            .Proxy
            (
                Html.X().AjaxProxy().Url(Url.Action("GetEmployees"))
            )
            .Model
            (
                Html.X().Model()
                .Fields
                (
                    Html.X().ModelField().Name("ID"),
                    Html.X().ModelField().Name("Name"),
                    Html.X().ModelField().Name("Position"),
                    Html.X().ModelField().Name("RefersTo")
                )
            )
        )
    )
    Please make addEmployee works :)
    Last edited by Daniil; Sep 24, 2015 at 1:33 PM. Reason: [CLOSED]
  2. #2
    Hi @ingbabic,

    Appending to "John Smith" works, so I guess the problem is to append to leaf nodes only, right?

    Please add this:
    if (node.isLeaf()) {
        node.set("leaf", false);
    }
    Also I would recommend to avoid a global variable here.
    node = App.Emps.getSelectionModel().getSelection()[0];
  3. #3
    Thanks Danill
    It was that. I did not set leaf property of Node.

Similar Threads

  1. Replies: 3
    Last Post: Jun 18, 2013, 2:10 AM
  2. Add tree node via javascript from child window
    By cicaglisa in forum 1.x Help
    Replies: 25
    Last Post: Apr 26, 2013, 4:33 PM
  3. Replies: 1
    Last Post: Apr 02, 2013, 6:50 AM
  4. Replies: 16
    Last Post: Jul 19, 2011, 4:53 AM
  5. [CLOSED] Problem when adding a Tree Node from Javascript
    By speedstepmem3 in forum 1.x Premium Help
    Replies: 3
    Last Post: Dec 15, 2010, 10:45 AM

Tags for this Thread

Posting Permissions