Grid

Data binding

@Html.Awe().Grid("DinnerGrid").Columns(...) // gets data from DinnerGrid/GetItems

@Html.Awe().Grid("MyGrid")
           .Url(Url.Action("GetItems", "LunchGrid")) // gets data from LunchGrid/GetItems
           .Columns(...)               

GridModelBuilder<TModel>().Build()

public class LunchGridController : Controller
{
    public ActionResult GetItems(GridParams g)
    {
        var list = Db.Lunches.AsQueryable();

        return Json(new GridModelBuilder<Lunch>(list, g)
            {
                Key = "Id", // needed for Entity Framework, nesting, tree, grid api (select, update)
                // EF can't do paging unless it orders at least by one column so we will order by that column when there is no sorted columns
            }.Build());
    }
}

GridModelBuilder<Model>

Column.Bind

 .Columns(
     new Column{ Bind = "Id" }, // bind to Model.Id                  
     new Column{ Bind = "Location" }, // bind to Model.Location
     new Column{ Bind = "Country.Name" } // bind to Model.Country.Name
     new Column{ Bind = "Person.FName,Person.LName" } // bind to Model.Person.FName and Model.Person.LName
     /* when sorting/grouping the FName will have a +1 higher rank than LName*/
     new Column{ Bind = "Code1,Code2" } // bind to Model.Code1 and Model.Code2

Map

Map

querying model

GridModelBuilder<T>

display model

Map

Column

return Json(new GridModelBuilder<Lunch>(list, g)
    {                   
        Map = o => new
        {
            o.Id // grid key
            CountryName = o.Country.Name, // =>  Bind = "Country.Name" and ClientFormat = ".(CountryName)"	
            ChefName = o.Chef.FirstName + " " + o.Chef.LastName // here ClientFormat = ".(ChefName)" (value displayed), but Bind = "Chef.FirstName,Chef.LastName" 
                                                               // so the sorting/grouping on this column is bound to Chef.FirstName and Chef.LastName
            o.Person // this can be just Bind="Person"
            }
    }.Build());

Custom Formatting

Column.Bind

ClientFormat

.(Prop1)

ClietnFormatFunc

Bind

// 123 USD | .(Cost) means Cost property value from the display model (usually the model returned by Map)
new Column{ Bind = "Cost", ClientFormat = ".(Cost) USD" }, 

// Adam spent 123
new Column{ Bind = "Person", ClientFormat = ".(Person) spent .(Cost) $" }, 

// will call formatPrice(model, "Price"), result will be <div style='color:red;'>123 £ </div>
new Column{ Bind = "Price", ClientFormatFunc = "formatPrice"}, 
...
<script type="text/javascript">
    function formatPrice(lunch) {
        var color = 'blue';
        if (lunch.Price < 20) color = 'green'; 
        if (lunch.Price > 50) color = 'red';
        return "<div style='color:" + color + ";'>" + lunch.Price + " USD </div>";
    }
</script>

Row class

.RowClassClientFormat

@Html.Grid("Grid1").RowClassClientFormat(".RowClass")...

return Json(new GridModelBuilder<Lunch>(Db.Lunches.AsQueryable(), g)
{
    Map = o => new
    {
        ...
        RowClass = o.Price > 90 ? "pinkb" : o.Price < 30 ? "greenb" : string.Empty
    }

RowClass

Encoding

ClientFormtFunc

.Encode(false)

Persistence

.Persistence

View

Session

Local

.PersistenceKey

awe.ppk

awe.ppk

aweUtils.init

awe.ppk

awe.ppk += "myapp" + 5; // 5 is version, modify it on each release
aweUtils.init(...

Sorting

Sortable

Column { Bind = "Id", Sortable = false }
@Html.Grid("MyGrid").Sortable(false) // Column.Sortable overrides this value

SingleColumnSort

@Html.Grid("MyGrid").SingleColumnSort(true)

Column.Sort

Column.SortRank

Default Key sorting

GridModelBuilder.Key

KeyProp

Key

GridModelBuilder.DefaultKeySort

new GridModelBuilder<Meal>(...) { Key = "Id", DefaultKeySort = Sort.None }

Grouping

Aggregates

public class GroupingGridController : Controller
{
    public ActionResult GetItems(GridParams g)
    {
        //passing 2 Functions MakeFooter and MakeHeader
        return Json(new GridModelBuilder<Lunch>(Db.Lunches.AsQueryable(), g)
        {
            MakeFooter = MakeFooter,
            MakeHeader = gr => 
            {
                //get first item in the group
                var first = gr.Items.First();
                
                //get the grouped column value for the first item
                var val = AweUtil.GetColumnValue(gr.Column, first).Single();
                
                return new GroupHeader
                {
                    Content = string.Format(" {0} : {1} ( Count = {2}, Max Price = {3} )", 
                                            gr.Header, val, gr.Items.Count(), gr.Items.Max(o => o.Price)),
                    Collapsed = true // making groups collapsed by default
                };
            }
        }.Build());
    }

    private object MakeFooter(GroupInfo<Lunch> info)
    {
        //will add the word Total at the grid level footer (Level == 0)
        var pref = info.Level == 0 ? "Total " : "";

        return new
                {
                    Food = pref + " count = " + info.Items.Count(),
                    Location = info.Items.Select(o => o.Location).Distinct().Count() + " distinct locations",
                    Date = pref + " max: " + info.Items.Max(o => o.Date).Date.ToShortDateString(),
                    Price = info.Items.Sum(o => o.Price)
                };
    }

}

Api

var api = $('#gridId').data('api');

api.load({
    group:[columnName,..],
    sort: [{Prop: columnName, Sort: direction }, ..],// direction 0 = none, 1 = asc, 2 = desc
    params: {PropName:PropValue, ..},// params will persist until api with params: {} is called
    oparams: {PropName:PropValue, ..} // oparams - one time params, sent only when the api is called with it
})
// all properties( group, sort, params, oparams) are optional, specifying a property will override its previous value

api.reset() // reset will bring the grid back to the initial state defined in the markup
api.getRequest() // get last request
api.getResult() // get last result
api.clearPersist() // clear grid persistence data
api.persist() // persist grid state
api.render() // render grid using last successful result
api.select(key) // select grid row(s) by key (multiple rows can be selected in case of the treeGrid), returns an array of jQuery objects
api.update(key[, params]) // update item by key, additional params can be sent
api.lay() // adjust grid layout
api.getSelection() // get selected rows models
api.nestOpen($row, nestName) // open row nest
api.nestClose($row, nestName) // close row nest
api.model($row) // get row model

api.inlineSave($row) // inline save grid row

api.batchSave($rows) // inline batch save, when $rows not specified all rows in edit mode will be saved

api.inlineCancel($row) // cancel inline edit row
api.inlineCancelAll() // cancel all inline edit rows
api.inlineEdit($row) // inline edit row

// grid configuration can also be accessed via data('o');

Events

$('#Grid1').on('aweload', function (event, data, requestData) {
        console.log('aweload handled', data, requestData);
    }).on('awebeginload', function (event, requestData) {
        console.log('awebeginload handled', data, requestData);
    });

Extensions

Column properties

.(ModelPropertyName)

GridModelBuilder