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



Comments