Popup:
Theme:

Grid Demo

configure

Person: Food:
Page Size:

in the view:
GridDemo/IndexContent.ascx
<%=Html.Awe().Grid("Grid")
.Columns(
new Column{Name = "Id", Width = 55, Groupable = false, Resizable = false},
new Column{Name = "Person"},
new Column{Name = "Food"},
new Column{Name = "Location"},
new Column{Name = "Date", Width = 100},
new Column{Name = "Country.Name", ClientFormat = ".CountryName", Header = "Country"},
new Column{Name = "Chef.FirstName,Chef.LastName", ClientFormat = ".ChefName", Header="Chef"}
)
.Url(Url.Action("GetItems", "LunchGrid"))
.Persistence(Persistence.View)// save collapsed groups and nodes when switching between grid pages
.ColumnsPersistence(Persistence.Session) // save columns (width, grouping, etc..) for browser session lifetime
.Sortable(Model.Sortable)
.Groupable(Model.Groupable)
.SingleColumnSort(Model.SingleColumnSorting)
.ShowGroupedColumn(Model.ShowGroupedColumn)
.LoadOnParentChange(Model.LoadOnParentChange)
.Resizable(Model.Resizable)
.Height(Model.Height)
.MinHeight(Model.MinHeight)
.Parent("txtperson","person") /* binds to person parameter*/
.Parent("txtfood","food") /* binds to food */
.Parent("PageSize","PageSize") /* binds to GridParams.PageSize*/
controller:
LunchGridController.cs
public class LunchGridController : Controller
{
public ActionResult GetItems(GridParams g, string person, string food)
{
food = (food ?? "").ToLower();
person = (person ?? "").ToLower();

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

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

Awesome Grid is declared using Html.Awe().Grid(name) helper and requires .Columns() to be specified.

  • Column.Name - used to bind this column to the model, it can be bound to one or more properties and subproperties in the model, examples: "FirstName", "FirstName,LastName", "Country.Name", "Chef.FirstName, Chef.LastName"
  • Persistence - makes the grid save it's state ( collapsed groups, current page, sorting, grouping), it can be None - no persistence, View - view context (will loose state on page refresh); Session - using HTML sessionStorage (will loose state on closing browser); Local - using HTML localStorage ( state will be persisted even after the browser is closed)
  • GridModelBuilder<Model> - builds the model of the grid by sorting, paging and grouping the items.
  • GridModelBuilder<Model>.Map - defines a function that maps the Model to a Dto, this way Column.Name will still be bound the the Model's properties but for cell values the values from the Dto will be used
  • GridModelBuilder<Model>.Key - defines a property on which the data will be sorted when there's no sorting, this is needed when using Entity Framework because it does not allow paging if the data is not ordered at least by one column

See also:
Master Detail Crud Demo using Grid and PopupForm
Grid Crud Demo