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

using grid api to open, close and toggle open nest for the first row:

GridNestingDemo/Index.cshtml

@(Html.Awe().Grid("MasterDetailGrid")
    .Columns(
        new Column { ClientFormat = MyAweIcons.DetailNstBtn("Id"), 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>

Awesome/Grid/LunchGridController.cs

public class LunchGridController : Controller
{
    public IActionResult GetItems(GridParams g, int? country, string person, string food)
    {            
        var query = Db.Lunches.AsQueryable();                        
        
        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);
                    
        var gmb = new GridModelBuilder<Lunch>(query.AsQueryable(), g);
                    
        gmb.KeyProp = o => o.Id;

        // grid row model
        // columns bound to Food.Name by default will display rowModel.FoodName
        // or specify in the view Column.Prop ="FooName", or ClientFormat = ".(FoodName)"
        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)
{
    Check.NotNull(key, nameof(key));

    var lunch = Db.Lunches.Where(o => o.Id == key).FirstOrDefault();

    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.

GridNestingDemo/Index.cshtml

@(Html.Awe().Grid("CategoriesGrid")
        .Resizable()
        .Url(Url.Action("CategoriesGrid", "Data"))
        .Columns(new Column { Bind = "Name", ClientFormat = MyAweIcons.DetailNstBtn("Name")})
        .Nests(new Nest { Name = "detailnst", Url = Url.Action("MealGrid"), LoadOnce = true }))

Demos/Grid/GridNestingDemoController.cs

public IActionResult MealGrid(int? key)
{
    Check.NotNull(key, nameof(key));

    ViewData["Id"] = key;
    return PartialView();
}

GridNestingDemo/MealGrid.cshtml

<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>

Awesome/DataController.cs

public IActionResult CategoriesGrid(GridParams g)
{
    return Json(new GridModelBuilder<Category>(Db.Categories.AsQueryable(), g)
    {
        Key = "Id"
    }.Build());
}

public IActionResult ChildMealsGrid(GridParams g, int[] categories)
{
    categories = categories ?? new int[] { };

    return Json(new GridModelBuilder<Meal>(Db.Meals
        .Where(o => categories.Contains(o.Category.Id)).AsQueryable(), g).Build());
}

Grid nest editing

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")

<div class="bar">
    <button type="button" onclick="aweUtils.nestCreate('@grid3', 'create@(grid3)')" class="awe-btn mbtn">Create</button>
</div>

@(Html.Awe().Grid(grid3)
    .Url(Url.Action("GridGetItems", "DinnersGridCrud"))
    .Attr("data-syncg", "dinner")    
    .PageSize(10)
    .Nests(
        new Nest { Name = "editnst", GetFunc = "aweUtils.loadNestPopup('edit" + grid3 + "')" },
        new Nest { Name = "delnst", GetFunc = "aweUtils.loadNestPopup('delete" + grid3 + "')" })
    .Columns(
            new Column { Bind = "Id", Width = 70 },
            Html.EditDelNestColumn(),            
            new Column { Bind = "Name" },
            new Column { Bind = "Date" },
            new Column { Bind = "Chef.FirstName,Chef.LastName", Prop = "ChefName", Header = "Chef" },
            new Column { Prop = "Meals", Header = "Meals" }            
            ))
<style>
    #NestDinnersGrid .earea {
        max-width: 20em;
    }

    .editnst-on .editnst, .delnst-on .delnst {
        outline: gray auto 5px;
    }
</style>

Comments