Below is the sample code. here all the nodes at root level has their children loaded during the first ajax request. What I want to accomplish is have all of those nodes at root level as expanded by default so the already loaded sub nodes are visible.
If I uncomment following line in the code then all root level nodes are expanded and shows child but it still fires ajax request for all nodes which I want to avoid.
asyncNode.Expanded = true;
Controller:
public class MultiLevelGridTestController : Controller
{
public ActionResult TreeGrid()
{
return View();
}
public StoreResult GetNodes(string node)
{
NodeCollection nodes = new Ext.Net.NodeCollection();
if (node == "0")
{
for (int i = 1; i < 25; i++)
{
Node asyncNode = new Node();
asyncNode.Text = i.ToString();
asyncNode.NodeID = i.ToString();
asyncNode.Expanded = true;
asyncNode.CustomAttributes.Add(new ConfigItem("task", "Task_" + i));
asyncNode.CustomAttributes.Add(new ConfigItem("user", "User_" + i));
asyncNode.CustomAttributes.Add(new ConfigItem("duration", "11.6"));
asyncNode.CustomAttributes.Add(new ConfigItem("done", "True"));
if (i != 5)
{
asyncNode.Children.AddRange(BuildChildNodes(i.ToString()));
}
nodes.Add(asyncNode);
}
}
else
{
nodes = BuildChildNodes(node.ToString());
}
return this.Store(nodes);
}
private static NodeCollection BuildChildNodes(string node)
{
NodeCollection nodes = new NodeCollection();
for (int i = 1; i < 6; i++)
{
Node treeNode = new Node();
treeNode.Text = node + i.ToString();
treeNode.NodeID = node + "-" + i.ToString();
treeNode.Leaf = false;
treeNode.CustomAttributes.Add(new ConfigItem() { Name = "task", Value = "Sub_Task_" + node.ToString() + i });
treeNode.CustomAttributes.Add(new ConfigItem() { Name = "user", Value = "User_" + node + i });
treeNode.CustomAttributes.Add(new ConfigItem() { Name = "duration", Value = "11.6" });
treeNode.CustomAttributes.Add(new ConfigItem() { Name = "done", Value = "True" });
nodes.Add(treeNode);
}
return nodes;
}
}
View:
@using ScriptMode = Ext.Net.ScriptMode
@{
ViewBag.Title = "Index";
Layout = null;
var X = Html.X();
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>TreeGrid</title>
@Html.X().ResourceManager()
<script>
var formatHours = function(v) {
if (v < 1) {
return Math.round(v * 60) + " mins";
} else if (Math.floor(v) !== v) {
var min = v - Math.floor(v);
return Math.floor(v) + "h " + Math.round(min * 60) + "m";
} else {
return v + " hour" + (v === 1 ? "" : "s");
}
};
var handler = function(grid, rowIndex, colIndex, actionItem, event, record, row) {
Ext.Msg.alert('Editing' + (record.get('done') ? ' completed task' : ''), record.get('task'));
};
</script>
</head>
<body>
<div>
<br/>
@(
X.TreePanel().ID("tgProjects")
.Title("Core Team Projects")
.Width(900)
.Height(700)
.RootVisible(false)
.MultiSelect(true)
.RowLines(true)
.ColumnLines(true)
.FolderSort(false)
.Store(
Html.X().TreeStore().ID("treeGridStore")
.Proxy(
Html.X().AjaxProxy().Url(Url.Action("GetNodes"))
)
.Model(Html.X().Model()
.Fields(
X.ModelField().Name("task"),
X.ModelField().Name("user"),
X.ModelField().Name("duration"),
X.ModelField().Name("done").Type(ModelFieldType.Boolean)
)
)
)
.ColumnModel(
X.TreeColumn().Text("Task").Flex(1).DataIndex("task"),
X.TemplateColumn().Text("Duration").Flex(1).DataIndex("duration")
.Template(t =>
{
t.Html = "{duration:this.formatHours}";
t.Functions.Add(new JFunction
{
Name = "formatHours",
Fn = "formatHours"
});
}),
X.Column().Text("Assigned To").Flex(1).DataIndex("user").Editor(X.TextField().AllowBlank(false)),
X.Column().Text("Assigned BY").Flex(1).Editor(X.TextField().AllowBlank(true)),
X.CheckColumn().Text("Done").DataIndex("done").Flex(1).Editable(true).StopSelection(false)
)
.Root(
Html.X().Node().NodeID("0").Text("Root")
)
.Plugins(
X.CellEditing().ClicksToEdit(1).Listeners(l => { l.BeforeEdit.Handler = "return false;"; })
)
.View(
Html.X().TreeView()
.Plugins(
Html.X().TreeViewDragDrop().AllowLeafDrop(false).ContainerScroll(true)
)
)
)
</div>
</body>
</html>
Thanks
Update:
Updated controller code to fix the node ID duplication
