Grid nesting, hierarchy

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
MaryShepherd's pieDiner
3671
JeremyPizzaTavern
3667
JohnCheesecakeRestaurant
3663
MichaelHot BeverageVisit
3659
GabrielleFrench toastTavern

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');

$('#btnToggleNest').click(function () {
api.nestToggle(grid.find('.awe-row:first'), 'detailnst');
});

$('#btnOpenNest').click(function () {
api.nestOpen(grid.find('.awe-row:first'), 'detailnst');
});

$('#btnCloseNest').click(function () {
api.nestClose(grid.find('.awe-row:first'), 'detailnst');
});
});
</script>

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
Name
Grains
Nuts
Vegetables
Legumes
Fruits
show code
GridNestingDemo/Index.cshtml
@(Html.Awe().Grid("CategoriesGrid")
.Resizable()
.Url(Url.Action("CategoriesGrid", "Data"))
.Columns(new Column { Bind = "Name", ClientFormat = "<div class='detailnst'><i class='caretc'><i class='o-caret o-cl2'></i></i> .(Name)</div> " })
.Nests(new Nest { Name = "detailnst", Url = Url.Action("MealGrid"), LoadOnce = true }))

Grid nest editing 

Drag a column header and drop it here to group by that column
Id
 
 
Name
Date
Chef
Meals
4315cabbage1/6/2025Naked ChefMango, Apple
675asdasda6/8/2007Gaia EarthRice
673Apples9/17/2018Peter GibbonsBroccoli, Mango
671Cookies11/13/2019Joanna StanTomato, Walnuts, Cauliflower
669Morning Tea6/15/2009Pepper TomatoHazelnuts
667Morning meal8/11/2018Pepper TomatoWalnuts
665Snacks and movie10/9/2020Joanna StanBuckwheat
663Apero10/27/2010Gaia EarthAlmonds, Buckwheat, Apple
661petit dej8/3/2009Joanna StanWalnuts, Buckwheat
659Breakfast10/27/2012Casse CrouteMango
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.



Comments