Awesome Controls overview

 
 

  •  
 
Hover me

Grid, search using parent binding


Grid bound to 3 editors using .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