Grid nesting, hierarchy

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

public class LunchGridController : Controller
{
    private readonly MyContext mcx = new MyContext();// mock EF Db context

    public LunchGridController()
    {
        
    }

    public IActionResult GetItems(GridParams g, int? country, string person, string food)
    {
        // get Lunch[] sample data (see other demos for EF demo)
        var query = getLunchesArray().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());            
    }

    private Lunch[] getLunchesArray()
    {
        return mcx.Lunches
            .Include(o => o.Country)
            .Include(o => o.Food)
            .Include(o => o.Chef)
            .ToArray();                
    }

    public async Task<IActionResult> GetItemsEFExample(GridParams g, int? country, string person, string food)
    {
        var query = mcx.Lunches
            .Include(o => o.Country)
            .Include(o => o.Food)
            .Include(o => o.Chef)
            .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(await gmb.EFBuildAsync());
        // you can use .Build() for non EF datasource (like a List<Lunch> query)
        // EFBuildAsync - custom extension for EF, you can copy it from demo source code
    }
}

public async Task<IActionResult> LunchDetail(int key)
{
    var lunch = await mcx.Lunches
        .Include(o => o.Food)
        .Include(o => o.Country)
        .Where(o => o.Id == key).FirstAsync();
    
    return PartialView(lunch);
}

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

@(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 }))

public IActionResult MealGrid(int key)
{
    ViewData["Id"] = key;
    return PartialView();
}

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

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

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

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

@{
    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")
    .Mod(o => o.ColumnsAutohide())
    .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 },
            new Column { ClientFormat = GridUtils.EditGridNestFormat(), Width = GridUtils.EditBtnWidth }.Mod(o => o.Nohide()),
            new Column { ClientFormat = GridUtils.DeleteGridNestFormat(), Width = GridUtils.DeleteBtnWidth }.Mod(o => o.Nohide()),
            new Column { Bind = "Name" }.Mod(o => o.NoAutohide()),
            new Column { Bind = "Date" },
            new Column { Bind = "Chef.FirstName,Chef.LastName", Prop = "ChefName", Header = "Chef" },
            new Column { Prop = "Meals", Header = "Meals" }            
            ))
<style>
    .editnst-on .editnst, .delnst-on .delnst {
        outline: gray auto 5px;
    }
</style>