Grid filter row server side data
The Awesome Grid allows you to filter its data using editor elements inside a filter row in the header of the grid.
Filter components are textboxes by default but other editors like dropdowns, numerics, etc. and custom ones can be defined.
Filter components are textboxes by default but other editors like dropdowns, numerics, etc. and custom ones can be defined.
Filter row using server side data filtering, all the data filtering, sorting, paging is done on the server.
Clicking the grid reset button will also reset all the filters.
The Food Column filter DropdownList will load its data independently of the grid data request and because it has
Country, Meals, and Chef Columns filters get their data from the Grid data result, so on each grid load (page, sort, filter change) their data will be updated, advantage being that we can limit the filter DropDownList items to only the ones present in the current grid data.
Clicking the grid reset button will also reset all the filters.
The Food Column filter DropdownList will load its data independently of the grid data request and because it has
FilterNoReload it will do that only on the first grid load.
Country, Meals, and Chef Columns filters get their data from the Grid data result, so on each grid load (page, sort, filter change) their data will be updated, advantage being that we can limit the filter DropDownList items to only the ones present in the current grid data.
Shared/Demos/GridFilterRowServerData.cshtml
@(Html.Awe().Grid("GridFrow2")
.Height(390)
.Reorderable()
.Resizable()
.Url(Url.Action("LunchFilterGrid", "GridFilterRowServerSideData"))
.Mod(o => o.Main().FilterRow())
.Columns(
new Column { Bind = "Id", Width = 100 }
.FltFormat("Search:"),
new Column { Bind = "Person" }
.FltString(),
new Column { Bind = "Food.Name", ClientFormatFunc = "site.imgFood", MinWidth = 200 }
.FltDropdownList(new DropdownListOpt
{
Name = "Food",
Url = Url.Action("GetFoods", "Data")
}
.FilterNoReload()
.FoodImgItem()),
new Column { Bind = "Price", MinWidth = 170 }
.FltNumericOp(),
new Column { Bind = "Date", Prop = "DateStr", Width = 200 }
.FltDateOp(),
new Column { Bind = "Country.Name", Header = "Country" }
.Flt("Country"),
new Column { Prop = "MealsStr", MinWidth = 200, Header = "Meals", Grow = 1.7 }
.Flt("Meals", type: FilterType.Multiselect),
new Column { Bind = "Chef.FirstName,Chef.LastName", Prop = "ChefName", Header = "Chef" }
.Flt("Chef"),
new Column {Bind = "Organic", Width = 130}
.FltDropdownList(new DropdownListOpt() {
Name = "Organic", Url = Url.Action("GetYesNoList", "Data"),
AutoSearch = false }))
)
Demos/Grid/GridFilterRowServerSideDataController.cs
public IActionResult LunchFilterGrid(GridParams g, LunchFilter filter)
{
var query = Db.Lunches.AsQueryable();
var filterBuilder = new FilterBuilder<Lunch>
{
Filter = filter,
Query = query
};
filterBuilder
.StringFilter(nameof(LunchFilter.Person))
.OpFilter<Lunch, decimal>(nameof(LunchFilter.Price))
.OpFilter<Lunch, DateTime>(nameof(LunchFilter.Date))
.Add(nameof(LunchFilter.Country), new FilterRule<Lunch>
{
Query = o => o.Country.Id == filter.Country,
GetData = async q =>
{
return (q.Select(o => o.Country).Distinct().ToArray())
.Select(o => new KeyContent(o.Id, o.Name));
}
})
.Add(nameof(LunchFilter.Chef), new FilterRule<Lunch>
{
Query = o => o.Chef.Id == filter.Chef,
GetData = async q =>
{
return (q.Select(o => o.Chef).Distinct().ToArray())
.Select(o => new KeyContent(o.Id, o.FullName));
}
})
.Add(nameof(LunchFilter.Food), new FilterRule<Lunch>
{
Query = o => o.Food.Id == filter.Food,
// no need for data, Url set in the view for the Food DropdownListOpt
})
.Add(nameof(LunchFilter.Organic), new FilterRule<Lunch>()
{
Query = lunch => lunch.Organic == filter.Organic.Value
})
.Add(nameof(LunchFilter.Meals), new FilterRule<Lunch>
{
QueryFunc = () =>
{
var ids = filter.Meals;
var count = ids.Count();
return o => o.Meals.Count(m => ids.Contains(m.Id)) == count;
},
GetData = async q =>
{
return (q.SelectMany(o => o.Meals).Distinct().ToArray())
.OrderBy(o => o.Id)
.Select(o => new KeyContent(o.Id, o.Name));
},
// call GetData (for Multiselect options) after querying this time,
// to filter the meals in GetData by previously selected meals
SelfQuery = true
});
query = filterBuilder.ApplyAsync().Result;
var gmb = new GridModelBuilder<Lunch>(query, g)
{
KeyProp = o => o.Id,
Map = MapToGridModel,
Tag = filterBuilder.GetGridData()
};
return Json(gmb.Build());
}
Comments