Cacading Grids

Click on the rows of the first grid to select categories and watch the second grid reload.

CascadingGridDemo/Index.cshtml

@(Html.Awe().Grid("CategoriesGrid")
        .Groupable(false)
        .MinHeight(300)
        .Url(Url.Action("CategoriesGrid", "Data"))
        .Columns(new Column { Bind = "Name" })
        .Selectable())
<br />
@(Html.Awe().Grid("MealsGrid")
        .Groupable(false)
        .MinHeight(200)
        .Url(Url.Action("ChildMealsGrid", "Data"))
        .Columns(new Column { Bind = "Name" }))

<script>
    $(function () {
        $('#CategoriesGrid')
            .on('aweselect aweload', function () {
                var selectedIds = $(this).data('api').getSelection().map(function (o) { return o.Id; });
                $("#MealsGrid").data('api').load({ params: { categories: selectedIds } });
            });
    });
</script>

Awesome/DataController.cs

public IActionResult CategoriesGrid(GridParams g)
{
    var gmb = new GridModelBuilder<Category>(Db.Categories.AsQueryable(), g)
    {
        KeyProp = o => o.Id
    };

    var model = gmb.Build();

    return this.AweJson(model);
}

public IActionResult ChildMealsGrid(GridParams g, int[] categories)
{
    categories ??= new int[] { };
    var query = Db.Meals.Where(o => categories.Contains(o.Category.Id)).AsQueryable();
    var gmb = new GridModelBuilder<Meal>(query, g);

    var model = gmb.Build();

    return this.AweJson(model);
}

Comments