Awesome Controls overview
Grid, search using parent binding
Grid bound to 3 editors using
The Grid will get the data for the current page only from specified
.Parent(id, paramName)
extension. When an editor changes value the grid will load and the values of the editors will be added to the request.The Grid will get the data for the current page only from specified
Url
, it can also get data from a js function by setting DataFunc
.Column.Bind
defines the property to OrderBy
when sorting by that column, and default row model property to display in the cell.
Home/Index.cshtml
<div class="bar">
@Html.Awe().TextBox(new TextBoxOpt{ Name = "txtPerson", Placeholder = "search for person ...", CssClass = "searchtxt", ClearBtn = true })
@Html.Awe().TextBox(new TextBoxOpt{ Name = "txtFood", Placeholder = "search for food ...", CssClass = "searchtxt", ClearBtn = true })
@(Html.Awe().DropdownList(
new DropdownListOpt
{
Name = "selCountry",
Url = Url.Action("GetCountries", "Data"),
ClearBtn = true
}))
</div>
@(Html.Awe().Grid("Grid1")
.Mod(o => o.Main()) // add page size, page info, columns selector, adaptive pager
.Columns(
new Column { Bind = "Id", Width = 75, Groupable = false, Resizable = false },
new Column { Bind = "Person" },
new Column { Bind = "Food.Name", ClientFormatFunc = "site.imgFood", MinWidth = 200 },
new Column { Bind = "Country.Name", Header = "Country" },
new Column { Bind = "Date", Grow = .1 }.Mod(o => o.Autohide()),
new Column { Bind = "Location" }.Mod(o => o.Autohide()),
new Column { Bind = "Chef.FirstName,Chef.LastName", Prop = "ChefName", Header = "Chef" })
.Url(Url.Action("GetItems", "LunchGrid"))
.Height(350)
.Reorderable()
.Resizable()
.Persistence(Persistence.Session) // save to sessionStorage page, columns state
.Parent("txtPerson", "person")
.Parent("txtFood", "food")
.Parent("selCountry", "country"))
Awesome/Grid/LunchGridController.cs
public IActionResult GetItems(GridParams g, int? country, string person, string food)
{
// get Lunch[] sample data (see other demos for EF demo)
var query = getLunchesArray().AsQueryable();
// filtering
if (person != null) query = query.Where(o => o.Person.ToLower().Contains(person.ToLower()));
if (food != null) query = query.Where(o => o.Food.Name.ToLower().Contains(food.ToLower()));
if (country.HasValue) query = query.Where(o => o.Country.Id == country);
// data can be from any source as long here you pass an IQueryable<T>
var gmb = new GridModelBuilder<Lunch>(query.AsQueryable(), g);
// define grid key, used to identify rows
gmb.KeyProp = o => o.Id;
// grid row model
// columns bound to Prop1.Prop2 will automatically display Prop1Prop2,
// or you could specify in the view Column.Prop ="Prop1Prop2", or ClientFormat = ".(Prop1Prop2)"
gmb.Map = o => new
{
o.Id,
o.Person,
FoodName = o.Food.Name,
FoodPic = o.Food.Pic,
o.Location,
o.Price,
Date = o.Date.ToShortDateString(),
CountryName = o.Country.Name,
ChefName = o.Chef.FullName
};
return Json(gmb.Build());
}
See also:
Drag And Drop Demo (grid move rows)
Grid Client Data Demo
Grid In Nest Editing Demo
Grid Inline Editing Demo
Master Detail Crud Demo
Wizard Demo
Comments