Awesome ASP.net Core and MVC Controls

Grid grouping and aggregates


Person column:
Food column:

GridDemo/GroupingContent.cshtml
@model AwesomeMvcDemo.ViewModels.Input.GridDemoGroupingCfgInput

@(Html.Awe().Grid("GroupingGrid")
.Columns(new[]{
new Column{Bind = "Id", Width = 75},
new Column{Bind = "Person", Group = Model.PersonGrouped,
GroupRemovable = Model.PersonRem, Groupable = Model.PersonGroupable, GroupRank = Model.PersonRank},
new Column{Bind = "Food", Group = Model.FoodGrouped,
GroupRemovable = Model.FoodRem, Groupable = Model.FoodGroupable, GroupRank = Model.FoodRank},
new Column{Bind = "Date", Width = 180},
new Column{Bind = "Price", Width = 80},
new Column{Bind = "Location"},
new Column{Bind = "Chef.FirstName,Chef.LastName", ClientFormat = ".ChefName", Header = "Chef", FooterClientFormat = ".ChefCount"}
})
.Height(450)
.ShowGroupBar(Model.ShowGroupBar)
.Groupable(Model.Groupable)
.ShowGroupedColumn(Model.ShowGroupedColumn)
.Parameter("collapsed", Model.Collapsed)
.Url(Url.Action("GetItems","GroupingGrid")))
Demos/Grid/GroupingGridController.cs
public class GroupingGridController : Controller
{
public ActionResult GetItems(GridParams g, bool collapsed)
{
// passing 2 MakeFooter and MakeHeader to customize header and add footer
var builder = new GridModelBuilder<Lunch>(Db.Lunches.AsQueryable(), g)
{
KeyProp = o => o.Id,
Map = o => new
{
o.Id,
o.Person,
o.Food,
Date = o.Date.ToShortDateString(),
o.Price,
o.Location,
ChefName = o.Chef.FirstName + " " + o.Chef.LastName
},
MakeFooter = MakeFooter,
MakeHeader = gpinf => MakeHeader(gpinf, collapsed)
};

return Json(builder.Build());
}

private GroupHeader MakeHeader(GroupInfo<Lunch> g, bool collapsed)
{
// get first item in the group
var first = g.Items.First();

// get the grouped column value(s) for the first item
var val = string.Join(" ", AweUtil.GetColumnValue(g.Column, first).Select(ToStr));

return new GroupHeader
{
Content = string.Format(" {0} : {1} ( Count = {2}, Max Price = {3} )",
g.Header,
val,
g.Items.Count(),
g.Items.Max(o => o.Price)),
Collapsed = collapsed
};
}

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),
ChefCount = info.Items.Select(o => o.Chef.Id).Distinct().Count() + " chefs"
};
}

private static string ToStr(object o)
{
return o is DateTime ? ((DateTime)o).ToShortDateString() : o.ToString();
}
}

Grouping can be enabled or disabled for the whole grid by using the .Groupable(bool) and can be set for each column by setting the Column.Groupable

  • 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 - if true the grouped columns will be hidden
  • GridModelBuilder.MakeHeader - defines a function for creating the GroupHeader
  • GridModelBuilder.MakeFooter - function for creating a group footer



Comments