<% MasterDetailGrid.Grid()
        .Columns(
            new Column { ClientFormat = "<div class='detailnst'><i class='caretc'><i class='o-caret'></i></i> .(Id)</div>", Width = 100, Header = "Id" },
            new Column { Bind = "Person" },
            new Column { Bind = "Food.Name" },
            new Column { Bind = "Location" })
        .Url(Page.Url().Action("GetItems", "LunchGrid"))
        .PageSize(5)
        .Height(300)
        .Nests(new Nest { Name = "detailnst", Url = Page.Url().Action("LunchDetail", "GridNestingDemo"), LoadOnce = true }); %>
<awe:Ocon runat="server" ID="MasterDetailGrid" />
<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.ClientID %>');
        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>

<style>
    .detailnst {
        cursor: pointer;
    }

    .caretc {
        position: relative;
        padding: 0 .7em;
        margin-right: .5em;
    }

        .caretc .o-caret {
            transform: rotate(-90deg);
            zoom: 1.1;
        }

    .detailnst-on .caretc .o-caret {
        transform: rotate(-45deg);
    }
</style>

using AwesomeWebFormsDemo.Data;
using AwesomeWebFormsDemo.Models;
using AwesomeWebFormsDemo.Utils.Awesome;
using System.Web.Mvc;
using Omu.AwesomeWebForms;
using System.Linq;
using System.Threading.Tasks;

namespace AwesomeWebFormsDemo.Controllers.Awesome.Grid
{
    public class LunchGridController : Controller
    {
        private readonly MyContext mcx = new MyContext();// mock EF Db context

        public LunchGridController()
        {
            
        }

        public async Task<ActionResult> GetItems(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();

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

public ActionResult LunchDetail(int key)
{
    var lunch = Db.Get<Lunch>(key);
    return PartialView(lunch);
}

@model AwesomeWebFormsDemo.Models.Lunch
<div style="padding:0.2em 2em;">
    @Model.Person had @Model.Food.Name  at @Model.Location in @Model.Country.Name<br/>
    View loaded from server at: @DateTime.UtcNow UTC
</div>

<% CategoriesGrid.Grid()
        .Resizable()
        .Url(Page.Url().Action("CategoriesGrid", "Data"))
        .Columns(new Column { Bind = "Name", ClientFormat = "<div class='detailnst'><i class='caretc'><i class='o-caret'></i></i> .(Name)</div> " })
        .Nests(new Nest { Name = "detailnst", Url = Page.Url().Action("MealGrid", "GridNestingDemo"), LoadOnce = true }); %>
<awe:Ocon runat="server" ID="CategoriesGrid" />

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

<div style="margin: 5px;">
    @(Html.Awe().Grid("MealsGrid" + ViewData["Id"]) // please note, you need to have unique html ids
        .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 ActionResult CategoriesGrid(GridParams g)
{
    return Json(new GridModelBuilder<Category>(Db.Categories.AsQueryable(), g)
    {
        Key = "Id"
    }.Build());
}

public ActionResult 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());
}