Awesome ASP.net Core and MVC Controls

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



Comments

We use cookies to improve your online experience. By accessing this site, you agree to the use of cookies and other technologies to process your personal data (e.g. IP address) to enhance and personalise your experience across our websites. Additionally, third-party companies, may store cookies on your device and use similar technologies to collect and use certain information. For more information, refer to our privacy policy and cookie policy.