The Awesome grid can have multiple nests which can open under a grid row, this feature can be used to achive Hierarchical Grid, Master-Detail Grid, and more.
An url or javascript function can be specified for loading the nest content.
When using url the Key of the grid is sent as Key parameter to the url.
The class of the html element that will act as a toggle button for the nest needs to be specified,
that element will get classname+"-on" class while its nest is open.
The nest can also be open using the grid api nestOpen(row, class) as shown in the demos below.
Opening a nest will close other nests that are open for the same row.
Master detail grid
Using one nest with url to achieve a master detail grid view
Drag a column header and drop it here to group by that column
Id
Person
Food
Location
3675
Mary
Shepherd's pie
Diner
3671
Jeremy
Pizza
Tavern
3667
John
Cheesecake
Restaurant
3663
Michael
Hot Beverage
Visit
3659
Gabrielle
French toast
Tavern
using grid api to open, close and toggle open nest for the first row:
show code
GridNestingDemo/Index.cshtml
@(Html.Awe().Grid("MasterDetailGrid") .Columns( new Column { ClientFormat = DemoUtils.DetailNstBtn, Width = 100, Header = "Id" }, new Column { Bind = "Person" }, new Column { Bind = "Food.Name" }, new Column { Bind = "Location" }) .Url(Url.Action("GetItems", "LunchGrid")) .PageSize(5) .Resizable() .Reorderable() .Height(300) .Nests(new Nest { Name = "detailnst", Url = Url.Action("LunchDetail"), LoadOnce = true })) <br /> <p> using grid api to open, close and toggle open nest for the first row: </p> <button type="button" class="awe-btn" id="btnOpenNest">Open nest</button> <button type="button" class="awe-btn" id="btnCloseNest">Close nest </button> <button type="button" class="awe-btn" id="btnToggleNest">Toggle nest</button>
<script> $(function () { var grid = $('#MasterDetailGrid'); var api = grid.data('api');
public class LunchGridController : Controller { public IActionResult GetItems(GridParams g, int? country, string person, string food) { var query = Db.Lunches.AsQueryable();
// filtering if (person != null) query = query.Where(o => o.Person.ToLower().Contains(person.ToLower())); if (food != null) query = query.Where(o => o.Food.Name.ToLower().Contains(food.ToLower())); if (country.HasValue) query = query.Where(o => o.Country.Id == country);
// data can be from any source as long here you pass an IQueryable<T> var gmb = new GridModelBuilder<Lunch>(query.AsQueryable(), g);
// define grid key, used to identify rows gmb.KeyProp = o => o.Id;
// grid row model // columns bound to Prop1.Prop2 will automatically display Prop1Prop2, // or you could specify in the view Column.Prop ="Prop1Prop2", or ClientFormat = ".(Prop1Prop2)" gmb.Map = o => new { o.Id, o.Person, FoodName = o.Food.Name, FoodPic = o.Food.Pic, o.Location, o.Price, Date = o.Date.ToShortDateString(), CountryName = o.Country.Name, ChefName = o.Chef.FullName };
return Json(gmb.Build()); }
public IActionResult GetItemsEFExample(GridParams g, int? country, string person, string food) { var query = Db.Lunches.AsQueryable();
// Filter - custom extension in demo code // equivalent to .Where(o => o.Food.Name.Contains(food) || ...)
query = query .Filter(food, o => o.Food.Name) .Filter(person, o => o.Person);
if (country.HasValue) query = query.Where(o => o.Country.Id == country);
var gmb = new GridModelBuilder<Lunch>(query, g); gmb.KeyProp = o => o.Id; gmb.Map = o => new { o.Id, o.Person, FoodName = o.Food.Name, FoodPic = o.Food.Pic, o.Location, o.Price, Date = o.Date.ToShortDateString(), CountryName = o.Country.Name, ChefName = o.Chef.FullName };
return Json(gmb.Build()); } }
Demos/Grid/GridNestingDemoController.cs
public IActionResult LunchDetail(int key) { var lunch = Db.Lunches.Where(o => o.Id == key).First();
return PartialView(lunch); }
GridNestingDemo/LunchDetail.cshtml
@model AweCoreDemo.Models.Lunch <div style="padding:0.2em 2em;" class="o-fzcon"> @Model.Person had @Model.Food.Name at @Model.Location in @Model.Country.Name<br/> View loaded from server at: @DateTime.UtcNow UTC </div>
Nested grids / Hierarchical grid
Hierarchical grid done using the grid nest feature.
The url of the grid nest is set to an action that returns a partial view (created by the user) which contains a grid,
the action also receives the key of the row (Id) as a parameter.
Drag a column header and drop it here to group by that column
<div style="margin: 5px;"> @* adding Id to grid name to have unique html ids across all nests*@ @(Html.Awe().Grid("MealsGrid" + ViewData["Id"]) .Url(Url.Action("ChildMealsGrid", "Data")) .Columns( new Column {Bind = "Id", Width = 50}, new Column {Bind = "Name", Width = 150}, new Column {Bind = "Description"}) .Resizable() .Parameter("categories", ViewData["Id"])) </div>
Drag a column header and drop it here to group by that column
Id
Name
Date
Chef
Meals
4315
cabbage
1/6/2025
Naked Chef
Mango, Apple
675
asdasda
6/8/2007
Gaia Earth
Rice
673
Apples
9/17/2018
Peter Gibbons
Broccoli, Mango
671
Cookies
11/13/2019
Joanna Stan
Tomato, Walnuts, Cauliflower
669
Morning Tea
6/15/2009
Pepper Tomato
Hazelnuts
667
Morning meal
8/11/2018
Pepper Tomato
Walnuts
665
Snacks and movie
10/9/2020
Joanna Stan
Buckwheat
663
Apero
10/27/2010
Gaia Earth
Almonds, Buckwheat, Apple
661
petit dej
8/3/2009
Joanna Stan
Walnuts, Buckwheat
659
Breakfast
10/27/2012
Casse Croute
Mango
show code
Combining the PopupForm, inline popup, and grid nesting to achieve in nest editing. We have 2 nests, both with js functions specified for loading the content,
the js func uses the popup api to load the content inside the nest and binds to the popups aweclose event so that the nest will close when the popup closes.
All the popups are in the same group so opening a create popup will close other edit/delete popups etc.
Shared/Demos/GridNestEdit.cshtml
@{ var grid3 = "NestDinnersGrid"; } @Html.InitCrudForGridNest(grid3, "DinnersGridCrud")