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 )

Awesome grid with mods for choosing columns, page size and page info, also using columns persitence.
  • 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)
  • ColumnsPersistence - save columns definition (width, visibility)
    When developing if you use ColumnsPersistence Session or Local, if you add or remove a column in markup and you refresh the page you won't see the change because you'll get the persisted columns definition, to see the columns defined in markup click the grid refresh button, or remove persistence, or call api.clearpersist.
    You can also modify the global peristence key prefix, as shown in utils.js (init method) awe.ppk = "myappv1_".
  • 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; it's also used for nesting, tree, api
GridDemo/IndexContent.cshtml
@(Html.Awe().Grid("Grid")
.Mod(o => o.PageInfo().PageSize().ColumnsSelector().AutoMiniPager())
.Columns(
new Column{Name = "Id", Width = 75, Groupable = false, Resizable = false},
new Column{Name = "Person"},
new Column{Name = "Food"},
new Column{Name = "Location"},
new Column{Name = "Date", Width = 120},
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)
.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());
}
}