Awesome ASP.net Core and MVC Controls

Grid Filtering

Filter grid using parent controls


The grid can be filtered by adding parent controls to it, when a parent control triggers the change event, the grid (child) will reload and the parent values will be sent as parameters to the data function (or url in this case).
GridDemo/Filtering.cshtml
<div class="bar">
@Html.Awe().TextBox("txtPerson").Placeholder("search for person ...").CssClass("searchtxt")
@Html.Awe().TextBox("txtFood").Placeholder("search for food ...").CssClass("searchtxt")
@Html.Awe().AjaxRadioList("selCountry").Url(Url.Action("GetCountries", "Data")).Odropdown().HtmlAttributes(new { style = "min-width:15em;" })
</div>

@(Html.Awe().Grid("Grid1")
.Mod(o => o.ColumnsSelector().PageSize().PageInfo())
.Columns(
new Column { Bind = "Id", Width = 75, Groupable = false, Resizable = false },
new Column { Bind = "Person" },
new Column { Bind = "Food", ClientFormatFunc = "imgFood", MinWidth = 200 },
new Column { Bind = "Country.Name", ClientFormat = ".(CountryName)", Header = "Country" },
new Column { Bind = "Date", Width = 120 }.Mod(o => o.Autohide()),
new Column { Bind = "Location" }.Mod(o => o.Autohide()),
new Column { Bind = "Chef.FirstName,Chef.LastName", ClientFormat = ".(ChefName)", Header = "Chef" })
.Url(Url.Action("GetItems", "LunchGrid"))
.Reorderable()
.Resizable()
.Height(350)
.Parent("txtPerson", "person")
.Parent("txtFood", "food")
.Parent("selCountry", "country"))
<script>
var root = '@Url.Content("~/Content/Pictures/Food/")';
function imgFood(itm) {
return '<img src="' + root + itm.FoodPic + '" class="food" />' + itm.Food;
}
</script>
Awesome/Grid/LunchGridController.cs
public class LunchGridController : Controller
{
public ActionResult GetItems(GridParams g, string person, string food, int? country)
{
food = (food ?? "").ToLower();
person = (person ?? "").ToLower();

var list = Db.Lunches
.Where(o => o.Food.ToLower().Contains(food) && o.Person.ToLower().Contains(person))
.AsQueryable();

if (country.HasValue) list = list.Where(o => o.Country.Id == country);

return Json(new GridModelBuilder<Lunch>(list, g)
{
KeyProp = o => o.Id,// needed for Entity Framework | nesting | tree | api
Map = o => new
{
o.Id,
o.Person,
o.Food,
o.FoodPic,
o.Location,
o.Price,
Date = o.Date.ToShortDateString(),
CountryName = o.Country.Name,
ChefName = o.Chef.FirstName + " " + o.Chef.LastName
}
}.Build());
}
}

Grid filtering using a popup to enter the search criteria



Using a popupForm and the grid api to filter the grid. The search criteria is built inside the popup, and when the Ok button is clicked, the post function executes, this is where the grid api.load function is called.
Note: we used aweui to initialize the popupForm, and a formBuilder util class to build its content (just like in the aweui grid filtering demo); an alternative would be to use the PopupForm helper and instead the formBuilder we could set the Url to point to an action that returns a partial view with the search criteria form.
GridDemo/Filtering.cshtml
<div class="bar">
<button type="button" class="awe-btn" onclick="awe.open('filterGrid', {}, event)">Filter</button>
<button type="button" class="awe-btn" onclick="clearFilter()">Clear Filter</button>
</div>
@(Html.Awe().Grid("GridPopupFilter")
.Mod(o => o.ColumnsSelector().PageSize().PageInfo())
.Columns(
new Column { Bind = "Id", Width = 75, Groupable = false, Resizable = false },
new Column { Bind = "Person" },
new Column { Bind = "Food", ClientFormatFunc = "imgFood", MinWidth = 200 },
new Column { Bind = "Country.Name", ClientFormat = ".(CountryName)", Header = "Country" },
new Column { Bind = "Date", Width = 120 }.Mod(o => o.Autohide()),
new Column { Bind = "Location" }.Mod(o => o.Autohide()),
new Column { Bind = "Chef.FirstName,Chef.LastName", ClientFormat = ".(ChefName)", Header = "Chef" })
.Url(Url.Action("LunchGridFilter", "Data"))
.Reorderable()
.Resizable()
.Height(350))
<script>
var filterModel = {};

function clearFilter() {
filterModel = {};
filterGrid();
}

function filterGrid() {
var api = $('#GridPopupFilter').data('api');
api.load({
params: filterModel
});
}

$(function () {
aweui.initPopupForm({
id: 'filterGrid',
title: 'Filter grid',
height: 0,
dropdown: true,
loadOnce: true,
setCont: function (sp, o) {
var b = formBuilder({ model: filterModel, sp: sp });
b.add({ prop: 'person', func: aweui.txt });
b.add({ prop: 'food', func: aweui.txt });
b.add({
prop: 'country',
func: aweui.radioList,
opt: {
url: '@Url.Action("GetCountries", "Data")',
odropdown: true
}
});
b.add({ prop: 'location', func: aweui.txt });
b.add({ prop: 'date', func: aweui.datepicker });
b.add({
prop: 'chef',
func: aweui.lookup,
opt: {
getUrl: '@Url.Action("GetItem","ChefLookup")',
searchUrl: '@Url.Action("Search", "ChefLookup")'
}
});
b.applyToPopup(o);
},
postFunc: function (sp) {
var vm = utils.getParams(sp);
filterModel = vm;
filterGrid();
return {};
}
});
});
</script>
Awesome/DataController.cs
public ActionResult LunchGridFilter(
GridParams g,
string person,
string food,
string location,
int? country,
int? chef,
DateTime? date)
{
food = (food ?? "").ToLower();
person = (person ?? "").ToLower();
location = (location ?? "").ToLower();

var list = Db.Lunches
.Where(o => o.Food.ToLower().Contains(food)
&& o.Person.ToLower().Contains(person)
&& o.Location.ToLower().Contains(location))
.AsQueryable();

if (country.HasValue) list = list.Where(o => o.Country.Id == country);
if (chef.HasValue) list = list.Where(o => o.Chef.Id == chef);
if (date.HasValue) list = list.Where(o => o.Date == date);

return Json(new GridModelBuilder<Lunch>(list, g)
{
KeyProp = o => o.Id,// needed for Entity Framework | nesting | tree | api
Map = o => new
{
o.Id,
o.Person,
o.Food,
o.FoodPic,
o.Location,
o.Price,
Date = o.Date.ToShortDateString(),
CountryName = o.Country.Name,
ChefName = o.Chef.FirstName + " " + o.Chef.LastName
}
}.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.