Tree Grid

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.

Tree grid, basic features 

simple tree grid, without lazy loading
Name
Id
main node 39393939
Barley 3939 -> 39633963
node 3939 -> 39433943
Cauliflower 3943 -> 39613961
node 3943 -> 39553955
Hazelnuts 3955 -> 39593959
Tomato 3955 -> 39573957
node 3943 -> 39453945
node 3945 -> 39493949
node 3949 -> 39513951
Banana 3951 -> 39533953
Mongongo 3945 -> 39473947
Papaya 3939 -> 39413941
main node 39293929
Broccoli 3929 -> 39373937
node 3929 -> 39313931
node 3931 -> 39333933
Chestnuts 3933 -> 39353935
main node 39133913
node 3913 -> 39173917
Carrot 3917 -> 39273927
node 3917 -> 39193919
Onion 3919 -> 39253925
node 3919 -> 39213921
Wheat 3921 -> 39233923
Cherry 3913 -> 39153915
show code
TreeGrid/Index.cshtml
@(Html.Awe().Grid("TreeGrid1")
.Url(Url.Action("SimpleTree", "TreeGrid"))
.Columns(
new Column { Bind = "Name" },
new Column { Bind = "Id", Width = 100 })
.Groupable(false)
.PageSize(3)
.Height(400))

Lazy loading Nodes, Tree Grid 

Drag a column header and drop it here to group by that column
Name
Id
main node 39393939
Barley 3939 -> 39633963
node 3939 -> 39433943
Papaya 3939 -> 39413941
main node 39293929
Broccoli 3929 -> 39373937
node 3929 -> 39313931
main node 39133913
node 3913 -> 39173917
Cherry 3913 -> 39153915
show code
TreeGrid/Index.cshtml
@(Html.Awe().Grid("LazyTreeGrid")
.Url(Url.Action("LazyTree", "TreeGrid"))
.Columns(
new Column { Bind = "Name" },
new Column { Bind = "Id", Width = 100 })
.Persistence(Persistence.Session)
.PageSize(3)
.Height(400))

Tree Grid with CRUD operations 

Drag a column header and drop it here to group by that column
Name
Id
 
 
 
main node 39393939
Barley 3939 -> 39633963
node 3939 -> 39433943
Cauliflower 3943 -> 39613961
node 3943 -> 39553955
Hazelnuts 3955 -> 39593959
Tomato 3955 -> 39573957
node 3943 -> 39453945
node 3945 -> 39493949
node 3949 -> 39513951
Banana 3951 -> 39533953
Mongongo 3945 -> 39473947
Papaya 3939 -> 39413941
main node 39293929
Broccoli 3929 -> 39373937
node 3929 -> 39313931
node 3931 -> 39333933
Chestnuts 3933 -> 39353935
main node 39133913
node 3913 -> 39173917
Carrot 3917 -> 39273927
node 3917 -> 39193919
Onion 3919 -> 39253925
node 3919 -> 39213921
Wheat 3921 -> 39233923
Cherry 3913 -> 39153915
show code
TreeGrid/Index.cshtml
@{
var gridId = "CrudTreeGrid";
}

@(Html.InitCrudPopupsForGrid(gridId, "TreeGrid", 200))

<div class="bar">
<button type="button" class="awe-btn" style="float: left;" onclick="awe.open('create@(gridId)')">add root</button>
<div style="text-align: right;">
@Html.Awe().TextBox("txtTreeName").Placeholder("search...").CssClass("searchtxt")
</div>
</div>

@(Html.Awe().Grid(gridId)
.Url(Url.Action("CrudTree", "TreeGrid"))
.Columns(
new Column { Bind = "Name" },
new Column { Bind = "Id", Width = 100 },
new Column { ClientFormat = GridUtils.AddChildFormat(gridId), Width = 120 },
new Column { ClientFormat = GridUtils.EditFormatForGrid(gridId), Width = GridUtils.EditBtnWidth },
new Column { ClientFormat = GridUtils.DeleteFormatForGrid(gridId), Width = GridUtils.DeleteBtnWidth })
.Resizable()
.PageSize(3)
.Parent("txtTreeName", "name")
.Height(400))

Use as TreeView 

The menu on the left is a TreeGrid with hidden footer and header.
show code
Shared/Menu.cshtml
<div id="sideCont">
<aside>
<div id="menuPlaceh"></div>
<div id="demoMenu">
@(Html.Awe().TextBox(new TextBoxOpt{
Name = "msearch",
Placeholder = "search...",
CssClass = "o-src msearch",
EditorAttr = new { data_brf = "true" },
ClearBtn = true
}))
<nav role="navigation">
@(Html.Awe().Grid("Menu")
.Columns(new Column { Id = "col1" })
.DataFunc("site.menuDataFunc('" + @Url.Action("GetMenuNodes", "Data", new { area = string.Empty }) + "')")
.Mod(o => o.CustomRender("sideMenu.menutree").Loading(false))
.CssClass("scrlh")
.RowClassClientFormat(".(Selected)")
.Parent("msearch", "search", false)
.ShowFooter(false)
.ShowHeader(false)
.ShowGroupBar(false)
.Load(false)
.ColumnWidth(100))
</nav>
</div>
</aside>
</div>

Tree grid with custom rendering 

Name
Id
main node 3939
Barley 3939 -> 3963
node 3939 -> 3943
Cauliflower 3943 -> 3961
node 3943 -> 3955
Hazelnuts 3955 -> 3959
Tomato 3955 -> 3957
node 3943 -> 3945
node 3945 -> 3949
node 3949 -> 3951
Banana 3951 -> 3953
Mongongo 3945 -> 3947
Papaya 3939 -> 3941
main node 3929
Broccoli 3929 -> 3937
node 3929 -> 3931
node 3931 -> 3933
Chestnuts 3933 -> 3935
main node 3913
node 3913 -> 3917
Carrot 3917 -> 3927
node 3917 -> 3919
Onion 3919 -> 3925
node 3919 -> 3921
Wheat 3921 -> 3923
Cherry 3913 -> 3915


show code
Using custom render mod to override api methods and render the grid using divs with padding instead of the default table.

See also: TreeGrid inline editing


Comments