Tree grid is achieved by setting the GridModelBuilder.GetChildren,
this function should return an IQueryable<T> when the item is a node, or an Awe.Lazy when it is a lazy node.
For lazy loading GridModelBuilder.GetItem also needs to be set, it will be executed in the lazy request, GetItem is also used by the api.updateItem.
In the constructor of the GridModelBuilder collection of only the root items are passed.
public IActionResult LazyTree(GridParams g) { var rootNodes = Db.TreeNodes.Where(o => o.Parent == null).AsQueryable();
var builder = new GridModelBuilder<TreeNode>(rootNodes, g) { KeyProp = o => o.Id, GetChildrenAsync = async (node, nodeLevel) => { var children = Db.TreeNodes.Where(o => o.Parent == node).ToArray();
// set this node as lazy when it's above level 1 (relative), it has children, and this is not a lazy request already if (nodeLevel > 1 && children.Any() && g.Key == null) return Awe.LazyNode;
return children; }, GetItem = () => // used for lazy loading { var id = Convert.ToInt32(g.Key); return Db.TreeNodes.First(o => o.Id == id); }, Map = MapNode };
return Json(builder.Build()); }
Tree Grid with CRUD operations
Drag a column header and drop it here to group by that column
[HttpPost] public IActionResult Create(TreeNodeInput input) { if (!ModelState.IsValid) return PartialView(input);
var parent = input.ParentId.HasValue ? Db.Find<TreeNode>(input.ParentId) : null; var node = new TreeNode { Name = input.Name, Parent = parent };
Db.Add(node);
var result = new { node.Id // used to flash the new row if visibile };
return Json(result); }
public IActionResult Edit(int id) { var node = Db.Find<TreeNode>(id); return PartialView("Create", new TreeNodeInput { Id = node.Id, Name = node.Name }); }
[HttpPost] public IActionResult Edit(TreeNodeInput input) { if (!ModelState.IsValid) return PartialView("Create", input);
var node = Db.Find<TreeNode>(input.Id); node.Name = input.Name;
return Json(new { node.Id }); }
public IActionResult Delete(int id) { var node = Db.Find<TreeNode>(id);
return PartialView(new DeleteConfirmInput { Id = id, Type = "node", Name = node.Name }); }
[HttpPost] public IActionResult Delete(DeleteConfirmInput input) { var node = Db.Find<TreeNode>(input.Id); DeleteNodeTree(node);
var result = new { node.Id };
return Json(result); }
private void DeleteNodeTree(TreeNode node) { var children = Db.TreeNodes.Where(o => o.Parent == node).ToList();
foreach (var child in children) { DeleteNodeTree(child); }
Db.Remove(Db.Find<TreeNode>(node.Id)); }
Use as TreeView
The menu on the left is a TreeGrid with hidden footer and header.