Grid Demo

Quick overview of the awesome grid.

- set to 0 for autosize
- load grid when parent triggers change event ( when you exit/hit enter in the Person|Food textbox )

GridDemo/IndexContent.cshtml
@model AwesomeMvcDemo.ViewModels.Input.GridDemoCfgInput
@(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
.LoadOnParentChange(Model.LoadOnParentChange)
.Resizable(Model.Resizable)
.Height(Model.Height)
.Parent("txtperson","person") /* binds to person parameter*/
.Parent("txtfood","food"))

Awesome/Grid/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 | api
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

  • 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 its 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