[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:
Code:
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:
Code:
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
Code:
@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 :)
