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.Bind - 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
@model AwesomeMvcDemo.ViewModels.Input.GridDemoCfgInput
.Mod(o => o.ColumnsSelector().PageSize().PageInfo())
new Column{Bind = "Id", Width = 75, Groupable = false, Resizable = false},
new Column{Bind = "Person"},
new Column{Bind = "Food"},
new Column{Bind = "Location"},
new Column{Bind = "Date", Width = 120},
new Column{Bind = "Country.Name", ClientFormat = ".CountryName", Header = "Country"},
new Column{Bind = "Chef.FirstName,Chef.LastName", ClientFormat = ".ChefName", Header="Chef"}
.Url(Url.Action("GetItems", "LunchGrid")) // used for remote data
.DataFunc(Model.DataFunc) // used for client side data
.Persistence(Persistence.View) // save collapsed groups and nodes when switching between grid pages
.Parent("txtperson", "person") /* binds to person parameter*/
.Parent("txtfood", "food")
.Parent("oCountry", "country"))
public class LunchGridController : Controller
public ActionResult GetItems(GridParams g, string person, string food, int? country)
food = (food ?? "").ToLower();
person = (person ?? "").ToLower();

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

if (country.HasValue) list = list.Where(o => o.Country.Id == country);

return Json(new GridModelBuilder<Lunch>(list, g)
KeyProp = o => o.Id,// needed for Entity Framework | nesting | tree | api
Map = o => new
Date = o.Date.ToShortDateString(),
CountryName = o.Country.Name,
ChefName = o.Chef.FirstName + " " + o.Chef.LastName
<div class="bar">
@Html.Awe().TextBox("txtperson").Placeholder("search for person ...").CssClass("searchtxt")
@Html.Awe().TextBox("txtfood").Placeholder("search for food ...").CssClass("searchtxt")
@Html.Awe().AjaxRadioList("oCountry").Url(Url.Action("GetCountries", "Data")).Odropdown().HtmlAttributes(new { style = "min-width:15em;"})
<button type="button" class="awe-btn mbtn" id="btnSearch" style="display: none;">search</button>

<div id="demoContent">
var lunches = @Html.Raw(DemoUtils.Encode(Db.Lunches.Select(o => new
o.Id, o.Person, o.Food, o.Location, o.Country, o.Chef, o.Date, DateStr = o.Date.ToShortDateString()

// func used for grid with client data
function getGridData(gp) {
var g = utils.getGridParams(gp);

function filter(list) {
var foodr = new RegExp(, "i");
var personr = new RegExp(g.person, "i");

var res = $.grep(list, function(o) {
return foodr.test(o.Food) && personr.test(o.Person) && (! || == o.Country.Id);
return res;

function map(o) { return { Id: o.Id, Person: o.Person, Food: o.Food, Location: o.Location,
Date: o.DateStr, CountryName: o.Country.Name, ChefName: o.Chef.FirstName + ' ' + o.Chef.LastName }; };

return utils.gridModelBuilder(this, g, lunches, { key:"Id", map:map, filter: filter, ghval:{ Date: "DateStr" }});

@*code for changing grid settings*@

<script type="text/javascript">

var liveSearch = true;

function setContent(o) {
// use live search only when not using remote data and LoadOnParentChange is true
liveSearch = !o.Cfg.UseRemoteData && o.Cfg.LoadOnParentChange;


// when grid is initialized it binds to parents' change event (awepch for awe controls)
$('#txtperson, #txtfood').off('change');

// set content (grid reinit)

if (!o.Cfg.LoadOnParentChange) {
} else {

$(function() {
$('#txtperson, #txtfood').keyup(function () {
if (liveSearch)

$('#btnSearch').click(function() {

See also:

Grid Client Data Demo
Grid Crud Demo (Popup editing), using PopupForm
Grid In Nest Editing Demo
Grid Inline editing demo
Master Detail Crud Demo