Grid Grouping, group headers, footers

Grid grouping is enabled by default and can can be enabled or disabled for the whole grid by using the .Groupable(bool). For each individual column grouping can be enabled or disabled by setting the Column.Groupable.
We can define aggregate values for grouped columns by using the .Aggregates() method.
The user can also modify and add new ones from the aggregates popup.

Column.Group - defines initial column grouped state
Column.GroupRank - group rank for this column
Column.GroupRemovable - (default is true) if set to false grouped column won't have the remove group button
.ShowGroupedColumn - default true, show grouped columns

GridDemo/GroupingContent.cshtml

@using AweCoreDemo.Models
@model AweCoreDemo.ViewModels.Input.GridDemoGroupingCfgInput

@(Html.Awex().Grid<Lunch>("GroupingGrid")
    .Main()
    .Url(Url.Action("GetItems","LunchGrid"))
    .Columns(b =>
    {
        b.Add(o => o.Id, new Column{ Width = 75});
        b.Add(o => o.Person, new Column{ Group = true });
        b.Add(o => o.Dish.Name, new Column{ Group = true, ClientFormatFunc="site.imgDish" });
        b.Add(o => o.Date, new Column{ Width = 180});
        b.Add(o => o.Price, new Column{ Width = 80});
        b.Add(o => o.Location);
        b.Add(o => new { o.Chef.FirstName, o.Chef.LastName}, new Column{ Header = "Chef" });
    })
    .Aggregates(b =>
    {
        b.Add(o => o.Id, Agg.Count);
        b.Add(o => o.Price, Agg.Average);
        b.Add(o => o.Date, Agg.Max);
    })
    .Height(450)
    .ShowGroupBar(Model.ShowGroupBar)    
    .ShowGroupedColumn(Model.ShowGroupedColumn)
)

Awesome/Grid/LunchGridController.cs

public class LunchGridController : Controller
{
    public IActionResult GetItems(GridParams g, int? country, string person, string dish)
    {
        var query = Db.Lunches.AsQueryable();

        var gmb = new GridModelBuilder<Lunch>(query.AsQueryable(), g);

        gmb.KeyProp = o => o.Id;

        // for when using parent controls filters
        gmb.FilterContainsStr(o => o.Person, person)
           .FilterContainsStr(o => o.Dish.Name, dish)
           .FilterEq(o => o.Country.Id, country);

        // props used in site.imgDish js function
        gmb.Prop(o => o.Dish.Pic, "DishPic");
        gmb.Prop(o => o.Dish.Name, "DishName");

        // used by some demos (GridFrozenColumns)`
        gmb.Prop(o => o.Organic, render: o => o ? "Yes" : "No");

        return this.AweJson(gmb.Build());
    }
}

Comments